Question

这个对我来说很难说，这是我在谷歌搜索中失败的原因，我是asp.net的新手，它给了我一些这个要求的逻辑上的困难

我有一堆结果，主要显示为覆盖了一些文字的图像。

我有一些显示这些图片所需的HTML，但它使用自定义样式显示图像的每个“行”，它使用div来进行自定义外观。

我需要做的是，在cshtml文件中找到一种方式显示一个html块来开始一行，然后输出6个项目的html，然后关闭该行并开始另一个并且冲洗重复直到完成，但我不能为我的生活弄清楚我将如何在asp.net中进行。

这可能是一个非常非常简单的问题，但是由于我无法正确地为谷歌说出这一点，我真的很难在网上找到任何东西。

我能想到的最接近的视觉示例就像Netflix，但没有滚动电影的能力，所以所有电影都列在这些行中。

我目前正在使用以下方法，

@foreach (var item in Model)
{
  html...
}

我最初的想法是有一个计数器，当计数达到六，关闭行并开始一个新的时候做一个条件语句，但我无法弄清楚如何将那么多的html混合到代码块中。

@{
 int count = 0;
 foreach(var item in model)
 {
    count++;
    //Output current item's html 
    if(count == 6)
    {
        //End current row, start new row
        count = 0;
    } 
 }

但正如我所提到的，我只能找到如何使用@：方法将单个html元素与代码块混合在一起，我需要一个html块。

根据请求添加我的控制器代码，我有点使用viewbag，但groupsModel似乎将每部电影分成一个单独的行。

// GET: Movies
public ActionResult Index(string movieGenre, string searchString)
{
    var GenreList = new List<string>();

    var GenreQry = from d in db.Movies
                   orderby d.Genre
                   select d.Genre;

    GenreList.AddRange(GenreQry.Distinct());
    ViewBag.movieGenre = new SelectList(GenreList);

    var movies = from m in db.Movies
                 select m;

    if(!String.IsNullOrEmpty(searchString))
    {
        movies = movies.Where(s => s.Title.Contains(searchString));
    }

    if(!string.IsNullOrEmpty(movieGenre))
    {
        movies = movies.Where(x => x.Genre == movieGenre);
    }

    var groupedModel = movies.AsEnumerable().Select((e, i) => new { Element = e, Index = i }).GroupBy(e => e.Index % 6).Select(g => g.Select(e => e.Element));
    ViewBag.grouped = groupedModel;

    return View(movies);
}

和我的观点（为了便于阅读，删除了大部分HTML）：

@model IEnumerable<MvcMovie.Models.Movie>

@{
    ViewBag.Title = "Index";
}

<p>
    @Html.ActionLink("Create New", "Create")

    @using (Html.BeginForm("Index", "Movies", FormMethod.Get))
    {
        <p>
            Genre: @Html.DropDownList("movieGenre", "All")
            Title: @Html.TextBox("SearchString")
            <input type="submit" value="Filter" />
        </p>
    }
</p>

@foreach(var group in ViewBag.grouped)
{ 
   <div class="MovieRow">
       @foreach (var item in group)
       { 
           <div class="bob-title">@Html.Display((item as MvcMovie.Models.Movie).Title)</div>
       }
   </div>
}

编辑：

我现在唯一的问题是，我似乎无法输出项目变量，@Html.Display((item as MvcMovie.Models.Movie)部分都没有输出任何内容。

Answer 1

首先，让我们对您的模型进行分组，以获得包含6个元素的组（最好在控制器中进行，而不是在视图中）：

@foreach(var group in groupedModel)
{
    <div id="rowDiv">
    @foreach(var element in group)
    {
        <div id="elementDiv">// element div here
            // display element info here
        </div>// element div end
    }
    </div>    // row div end
}

比您将迭代这些组并显示它们：

{{1}}

如何将“分页”结果分成行而不是页面

1 个答案: