mvc 3相当于<asp:repeater>功能？

Question

我在Asp.Net有一个网站,我试图移植到MVC 3,我之前只使用过MVC 2.我偶然发现了以下的asp函数

<div class="popup-holder">
<ul class="popups">
    <asp:Repeater runat="server" ID="ourTeamRepeater" OnItemDataBound="ourTeamRepeater_ItemDataBound">
        <ItemTemplate>
            <asp:Panel ID="pnlTeamMember" runat="server">
                <li id="TeamMember" runat="server" class="memberImage">
                    <asp:Image runat="server" ID="memberImg" />
                </li>
                <div class="popup">
                    <div class="img-holder">
                        <asp:Image runat="server" ID="memberImgBig" />
                    </div>
                    <div class="popup-text-t">
                        <div class="close">
                            close
                        </div>
                    </div>
                    <div class="popup-text">
                    </div>
                    <div class="popup-text-b">
                    </div>
                    <div class="holder">
                        <asp:Literal ID="memberDescription" runat="server" />
                    </div>
                </div>
            </asp:Panel>
        </ItemTemplate>
    </asp:Repeater>
</ul>

看起来这可能与for循环类似,但我不太肯定如何将其转换为MVC 3架构.

Answer 1

将现有WebForms应用程序移植到ASP.NET MVC不仅仅是盲目地逐行转换一些WebForms视图代码.您应该考虑目标平台的语义.例如,将其asp:Repeater转换为丑陋的foreach循环而不是考虑视图模型之类的东西,显示模板不会很好.

所以在ASP.NET MVC中,您首先要设计视图模型:

public class MemberViewModel
{
    public int Id { get; set; }
    public string Description { get; set; }   
}

然后你设计一个控制器动作来填充这个视图模型:

public ActionResult Index()
{
    IEnumerable<MemberViewModel> model = ...
    return View(model);
}

然后你编写一个强类型视图,在其中调用显示模板:

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

然后定义一个显示模板,该模板将为collection(~/Views/Shared/DisplayTemplates/MemberViewModel.cshtml)的每个元素呈现:

@model MemberViewModel

<li id="TeamMember" class="memberImage">
    <img src="Url.Action("ThumbnailImage", new { id = Model.Id })" alt=""/>
</li>

<div class="popup">
    <div class="img-holder">
        <img src="Url.Action("FullImage", new { id = Model.Id })" alt=""/>
    </div>

    <div class="popup-text-t">
        <div class="close">
            close
        </div>
    </div>

    <div class="popup-text"></div>
    <div class="popup-text-b"></div>

    <div class="holder">
        @Html.DisplayFor(x => x.Description)
    </div>
</div>

现在您将注意到两个额外的ThumbnailImage和FullImage控制器操作,这些操作将允许我们获取给定成员ID的成员的图像.例如:

public ActionResult ThumbnailImage(int id)
{
    byte[] thumbnail = ...
    return File(thumbnail, "image/jpeg");
}

现在,这更像是ASP.NET MVC.正如您所看到的,它与传统WebForms完全不同.

Answer 2

你认为MVC等效于asp:Repeater是完全正确的

<% foreach( var item in Model )
   { %>
       <!-- Your HTML Markup -->
<% } %>

Answer 3

你是对的,它与for循环类似.一个简单的实现可能如下所示:

<div class="popup-holder">
<ul class="popups">
    <%foreach(var item in Model.Items) { %>
            <div id="pnlTeamMember">
                <img src="<%: item.MemberImageSrc %>" ID="memberImg" />
                <div class="popup">
                    <div class="img-holder">
                        <img src="<%: item.MemberImgBigSrc %>" ID="memberImgBig" />
                    </div>
                    <div class="popup-text-t">
                        <div class="close">
                            close
                        </div>
                    </div>
                    <div class="popup-text">
                    </div>
                    <div class="popup-text-b">
                    </div>
                    <div class="holder">
                        <%: item.MemberDescription %>
                    </div>
                </div>
            </div>
    <% } %>
</ul>

您会注意到runat="server"代码隐藏中不再有任何控件,也没有任何事件链接到处理程序.相反,我们假设控制器已Model使用表示我们需要显示的数据的对象填充对象.这是使用MVC时控制器的作用.