.NET MVC - Jak powielić kilka elementów z Bootstrapa za pomocą pętli Foreach

Cześć!

Od kilku dni piszę Bloga, który na głównej stronie między innymi ma wyświetlać 6 najnowszych artykułów i mam problem z powielaniem elementów Boostrapa za pomocą pętli foreach.

Kod z index.html:

 @model Blog.ViewModel.HomeViewModel

@{
    ViewBag.Title = "Index";
}

<div class="container">

    <div id="slider">
        <div id="carousel-example-generic" class="carousel slide" data-ride="carousel">
            <!-- Indicators -->
            <ol class="carousel-indicators">
                <li data-target="#carousel-example-generic" data-slide-to="0" class="active"></li>
                <li data-target="#carousel-example-generic" data-slide-to="1"></li>
                <li data-target="#carousel-example-generic" data-slide-to="2"></li>
            </ol>
          
            <!-- Wrapper for slides -->
            <div class="carousel-inner" role="listbox">
                <div class="item active">
                    <img src="~/Content/img/1.jpg" class="img-responsive" alt="Picture" />
                    <div class="carousel-caption">
                        <h1>Pierwszy artykuł</h1>
                    </div>
                </div>

                <div class="item">
                    <img src="@Url.Content("~/Content/img/2.jpg")" alt="Picture_2" />
                    <div class="carousel-caption">
                        Drugi Artykuł
                    </div>
                </div>
                <div class="item">
                    <img src="@Url.Content("~/Content/img/3.jpg")" alt="Picture_3" />
                    <div class="carousel-caption">
                        Trzeci Artykuł
                    </div>
                </div>
            </div>

            <!-- Controls -->
            <a class="left carousel-control" href="#carousel-example-generic" role="button" data-slide="prev">
                <span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
                <span class="sr-only">Previous</span>
            </a>
            <a class="right carousel-control" href="#carousel-example-generic" role="button" data-slide="next">
                <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
                <span class="sr-only">Next</span>
            </a>
        </div>
    </div>

    
    @foreach (var article in Model.Articles)
    { 
        <div class="row">
            <div class="col-lg-8 col-sm-8 col-md-8">
                <div class="thumbnail">
                    <img src="@Url.Content("~/Content/img/4.jpg")" alt="picture">
                    <div class="caption">
                        <h3>Thumbnail label</h3>
                        <p>zsxdfcvghbjnctxextrcvybuyvutycrxrtcytvubyvtcrxrcytvytcyrxrtyctuvbyvtcxrryctuv</p>
                        <p><a href="#" class="btn btn-primary" role="button">Czytaj więcej</a></p>
                    </div>
                </div>
            </div>
        </div> 
    }
    

</div>

HomeController:

using Blog.DAL;
using Blog.ViewModel;
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.Mvc;

namespace Blog.Controllers
{
    public class HomeController : Controller
    {
        private BlogContext db = new BlogContext();
        
        public ActionResult Index()
        {
            var category = db.Categories.ToList();

            var newArticles = db.Articles.Where(a => !a.IsHidden).OrderByDescending(a => a.ArticleDateCreated).Take(3).ToList();

            var vm = new HomeViewModel() {
                Articles = newArticles,
                Categories = category
            };

            return View(vm);
        }

        public ActionResult Slider()
        {
            return PartialView("_Slider");
        }

    }
} 

HomeViewModel:

 using Blog.Models;
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;

namespace Blog.ViewModel
{
    public class HomeViewModel
    {
        public IEnumerable<Article> Articles { get; set; }
        public IEnumerable<Category> Categories { get; set; }
    }
}

Jest w ogóle możliwość powielania takich elementów ? Jeżeli tak to jak mogę sobie z tym poradzić?

Z góry dzięki za pomoc!

A ten problem czego dotyczy? Nic nie napisałeś tylko wrzuciłeś kod.

Chodzi o to ze po zaladowaniu strony nie wyswietla sie ten element:

@foreach (var article in Model.Articles)
    { 
        <div class="row">
            <div class="col-lg-8 col-sm-8 col-md-8">
                <div class="thumbnail">
                    <img src="@Url.Content("~/Content/img/4.jpg")" alt="picture">
                    <div class="caption">
                        <h3>Thumbnail label</h3>
                        <p>zsxdfcvghbjnctxextrcvybuyvutycrxrtcytvubyvtcrxrcytvytcyrxrtyctuvbyvtcxrryctuv</p>
                        <p><a href="#" class="btn btn-primary" role="button">Czytaj więcej</a></p>
                    </div>
                </div>
            </div>
        </div> 
    }

Jezeli usune petle foreach to element pojawia sie normalnie. Chcialbym aby dla tego komponentu boostrapa byly wyciagane z bazy najnowsze artykuly i przekazywane do widoku tworzac 6 elementow pod soba.

Może dlatego że Model.Articles jest pusty?

@error91
W projekcie mam initializer ktory wypelnia mi baze przy starcie przykladowymi danymi.

Podepnij się debuggerem w kontrolerze i zobacz co otrzymujesz z bazy.

@some_ONE
Sprawdziłem debbugerem i nie dostaje nic z bazy, ale nie mam też żadnych błędów przy odpalaniu strony. Może coś jest nie tak z initializerem?

Initializer:

 using Blog.Migrations;
using Blog.Models;
using System;
using System.Collections.Generic;
using System.Data.Entity;
using System.Data.Entity.Migrations;
using System.Linq;
using System.Web;

namespace Blog.DAL
{
    public class BlogInitializer : MigrateDatabaseToLatestVersion<BlogContext, Configuration>
    {
        public static void SeedBlogDate(BlogContext context)
        {
            var categories = new List<Category>
            {
                new Category() { CategoryId = 1, CategoryName = "Programming", CategoryDescription = "Ut fusce varius nis" },
                new Category() { CategoryId = 2, CategoryName = "Courses", CategoryDescription = "Ut fusce varius nis" },
                new Category() { CategoryId = 3, CategoryName = "Life Style", CategoryDescription = "Ut fusce varius nis" },
                new Category() { CategoryId = 4, CategoryName = "Events", CategoryDescription = "Ut fusce varius nis" }
            };

            categories.ForEach(c => context.Categories.AddOrUpdate(c));
            context.SaveChanges();
         
            var articles = new List<Article>
            {
                new Article() { ArticleId = 1, ArticleTitle = "Ut fusce varius nisl ", ArticleContent = "Ut fusce varius nisl ac ipsum gravida vel pretium tellus tincidunt integer eu augue augue nunc elit dolor, luctus placerat.", ArticleImageFileName = "1.jpg", ArticleDateCreated = new DateTime(2014, 02, 01) },
                new Article() { ArticleId = 2, ArticleTitle = "Ut fusce varius nisl ", ArticleContent = "Sapien elit in malesuada semper mi, id sollicitudin urna fermentum.", ArticleImageFileName = "2.jpg", ArticleDateCreated = new DateTime(2016, 08, 23) },
                new Article() { ArticleId = 3, ArticleTitle = "Ut fusce varius nisl ", ArticleContent = "Sapien elit in malesuada semper mi, id sollicitudin urna fermentum.", ArticleImageFileName = "3.jpg", ArticleDateCreated = new DateTime(2015, 03, 04) },
                new Article() { ArticleId = 4, ArticleTitle = "Ut fusce varius nisl ", ArticleContent = "Ut fusce varius nisl ac ipsum gravida vel pretium tellus tincidunt integer eu augue augue nunc elit dolor, luctus placerat.", ArticleImageFileName = "4.jpg", ArticleDateCreated = new DateTime(2015, 11, 15) },
                new Article() { ArticleId = 5, ArticleTitle = "Ut fusce varius nisl ", ArticleContent = "Ut fusce varius nisl ac ipsum gravida vel pretium tellus tincidunt integer eu augue augue nunc elit dolor, luctus placerat.", ArticleImageFileName = "5.jpg", ArticleDateCreated = new DateTime(2014, 05, 04) },
                new Article() { ArticleId = 6, ArticleTitle = "Ut fusce varius nisl ", ArticleContent = "Ut fusce varius nisl ac ipsum gravida vel pretium tellus tincidunt integer eu augue augue nunc elit dolor, luctus placerat.", ArticleImageFileName = "6.jpg", ArticleDateCreated = new DateTime(2017, 01, 01) },
            };

            articles.ForEach(a => context.Articles.AddOrUpdate(a));
            context.SaveChanges();
        }

    }
}

Lub może coś z zawartością pliku Context jest coś nie tak:

 using Blog.Models;
using System;
using System.Collections.Generic;
using System.Data.Entity;
using System.Linq;
using System.Web;

namespace Blog.DAL
{
    public class BlogContext : DbContext
    {
        public BlogContext() : base("BlogContext") 
        {
            
        }

        static BlogContext()
        {
            Database.SetInitializer<BlogContext>(new BlogInitializer());
        }

        public DbSet<Article> Articles { get; set; }
        public DbSet<Category> Categories { get; set; }
    }
}   

Chyba nie przeciążyłeś metody Seed.
http://www.entityframeworktutorial.net/code-first/seed-database-in-code-first.aspx

Metodę miałem przeciążoną, ale okazało się że w pliku Configuration w folderze Migrations nie wstawiłem Contextkey. Dzięki za pomoc :)