1

我相信我找不到合适的标题来解释我的问题，但我认为这是最好的简短解释。

请让我解释一下细节。

我想在页面上显示我的图片列表并@foreach在 MVC 3 上使用循环。

此列表的部分视图如下：

@model IEnumerable<Picture>
@foreach (var item in Model)
{
    <a href="@item.PicId">
        <img height="35px" style="padding-top:3px" src="ImageHandler.ashx?id=@item.PicId" id="pictureMy" />
    </a>
}

正如您可能理解的那样，我正在向这个局部视图发送一个列表，它将图片放在一个列上。

它工作没有任何问题，但我想为每行显示 3 张图片但无法管理。

任何指导将不胜感激。

提前感谢您的帮助。

4

1 回答 1

6

您可以将它们按 3 分组：

@model IEnumerable<Picture>
@foreach (var item in Model.Select((value, index) => new { value, index }).GroupBy(x => x.index / 3))
{
    <div>
    @foreach (var picture in item)
    {
        <a href="@picture.value.PicId">
            <img height="35px" style="padding-top:3px" src="ImageHandler.ashx?id=@picture.value.PicId" id="pictureMy" />
        </a>
    }
    </div>
}

但老实说，这种分组并不是视图中应该做的事情。您应该定义一个视图模型，然后让您的控制器操作执行分组并返回视图模型。

所以让我们从定义我们的视图模型开始：

public class PictureViewModel
{
    public int PicId { get; set; }
}

public class GroupedPicturesViewModel
{
    public IEnumerable<PictureViewModel> Pictures { get; set; }
}

然后控制器动作：

public ActionResult Index()
{
    // fetch the pictures from the DAL or something
    IEnumerable<Picture> pictures = ... 

    // Now build the view model
    var model = pictures
        .Select((value, index) => new { value, index })
        .GroupBy(x => x.index / 3)
        .Select(x => new GroupedPicturesViewModel
        {
            Pictures = x.Select(p => new PictureViewModel
            {
                PicId = p.value.PicId
            })
        }
    );
    return View(model);
}

那么对应的视图：

@model IEnumerable<GroupedPicturesViewModel>
@Html.DisplayForModel()

GroupedPicturesViewModel然后是类型 ( )的相应显示模板~/Views/Shared/DisplayTemplates/GroupedPicturesViewModel.cshtml：

@model GroupedPicturesViewModel
<div>
    @Html.DisplayFor(x => x.Pictures)
</div>

最后是PictureViewModel类型 ( ~/Views/Shared/DisplayTemplates/PictureViewModel.cshtml) 的显示模板：

@model PictureViewModel
<a href="@Model.PicId">
    <img class="image" src="@Url.Content("~/ImageHandler.ashx?id=" + Model.PicId)" alt="" />
</a>

困扰我的最后一件事是这个锚。看起来很丑。你不觉得吗？看起来像意大利面条代码。

让我们通过编写一个自定义的、可重用的 HTML 助手来改进它，该助手将呈现这些图片：

public static class HtmlExtensions
{
    public static IHtmlString Picture(this HtmlHelper<PictureViewModel> htmlHelper)
    {
        var anchor = new TagBuilder("a");
        var picture = htmlHelper.ViewData.Model;
        var id = picture.PicId.ToString();
        var urlHelper = new UrlHelper(htmlHelper.ViewContext.RequestContext);

        // You probably need another property on your view model here as this 
        // id is suspicious about href but since that's what you had in your 
        // original code I don't know what is your intent.
        anchor.Attributes["href"] = id;
        var image = new TagBuilder("img");
        image.Attributes["alt"] = "";
        image.Attributes["src"] = urlHelper.Content(
            "~/ImageHandler.ashx?id=" + urlHelper.Encode(id)
        );
        image.AddCssClass("image");
        anchor.InnerHtml = image.ToString();
        return new HtmlString(anchor.ToString());
    }
}

然后在显示模板中我们将简单地拥有：

@model PictureViewModel
@Html.Picture()

差不多就是这样。无需编写循环。一切都按惯例进行。

于 2011-12-28T15:47:29.357 回答