Question

我将模型传递到我的局部视图中。模型包含对象的数组。此部分视图将用于显示博客文章。但我希望博客文章以行显示内容，每行包含3列。但不幸的是，我不知道如何编写多维数组来做到这一点。

我的模型位于

之下

public class TopicView
    {
        public int ID { get; set; }

        public string PostedDate { get; set; }

        public string IconName { get; set; }

        public string FrontImage { get; set; }

        public string Subject { get; set; }

        public string Briefing { get; set; } //This is going to contain the summary information about each blog post

        public string Details { get; set; }

        public string CommentNumber { get; set; }
    }

以下部分视图

@model IEnumerable<LiveChatPrototype.Mvc.Areas.Blog.Models.TopicView> 



    @foreach(var val in Model)
    {

        <!-- Post Row -->
    <div class="row post_row">

        <!-- Post -->
        <div class="col-sm-4">
            <div class="post">

                <div class="img">
                    <a href="#">
                        <img src="~/Usedtemplate/users/img/@val.FrontImage" alt="" class="img-responsive" />
                    </a>
                </div>
                <div class="text">
                    <h5><a href="blogpost.html">@val.Subject.</a></h5>
                    <span class="date">@val.PostedDate.</span>
                    <p>
                        @val.Briefing
                    </p>
                </div>
                <div class="author_box">
                    <h6>Alejandra Galvan</h6>
                    <p>Creative Director</p>
                </div>
                <a class="plus_wrapper" href="#">
                    <span>&#43;</span>
                </a>
            </div>
        </div>


    </div>
    }

Answer 1

尝试使用for循环而不是foreach。

@model IEnumerable<LiveChatPrototype.Mvc.Areas.Blog.Models.TopicView> 

    @for (var i = 0; i < Model.Count(); i = i + 3)
    {

            <!-- Post Row -->
        <div class="row post_row">

            @for (var j = 0; j < 3; j++)
            {
                if(i + j < Model.Count())
                {
                    var val = Model.Skip(i + j).First();
                    <!-- Post -->
                    <div class="col-sm-4">
                        <div class="post">

                            <div class="img">
                                <a href="#">
                                    <img src="~/Usedtemplate/users/img/@val.FrontImage" alt="" class="img-responsive" />
                                </a>
                            </div>
                            <div class="text">
                                <h5><a href="blogpost.html">@val.Subject.</a></h5>
                                <span class="date">@val.PostedDate.</span>
                                <p>
                                    @val.Briefing
                                </p>
                            </div>
                            <div class="author_box">
                                <h6>Alejandra Galvan</h6>
                                <p>Creative Director</p>
                            </div>
                            <a class="plus_wrapper" href="#">
                                <span>&#43;</span>
                            </a>
                        </div>
                    </div>
                }
            }

        </div>
    }

在我的局部视图中显示bootstrap中包含3列的行

1 个答案: