mvc 3 equivalent to function?

问题:

I have a website in Asp.Net that I am trying to port to MVC 3 and I have only worked with MVC 2 before. I stumbled across the following asp function

<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>

it looks like maybe this works similarly to a for loop, but I'm not quite positive how to convert it to MVC 3 architecture.

回答1:

Porting an existing WebForms application to ASP.NET MVC is not only about blindly translating line by line some WebForms view code that you have. You should take into account the semantics of the target platform. For example converting this asp:Repeater into an ugly foreach loop instead of taking into account things like view models, display templates would not be very good.

So in ASP.NET MVC you start by designing view models:

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

then you design a controller action which populates this view model:

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

then you write a strongly typed view in which you invoke a display template:

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

and then you define a display template which will be rendered for each element of the 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>

Now you will notice the two additional ThumbnailImage and FullImage controller actions that will allows us to fetch the images of the members given the member id. For example:

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

Now that's more like ASP.NET MVC. As you can see it's a totally different pattern than classic WebForms.

回答2:

You're quite right to suppose that the MVC equivalent of an asp:Repeater is

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

回答3:

You're right about it being similar to a for loop. A simple implementation might look like this:

<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>

You'll notice that there are no longer any controls with runat="server", nor are there any events linked to handlers in the code-behind. Instead, we are assuming that the controller has populated the Model object with objects representing the data that we need to display. That is the role of the controller when using MVC.

回答4:

A repeater is just a loop that provides databinding so that you can access the items in the collection that you are looping. If you look in the ourTeamRepeater_ItemDataBound method you will find the code that uses the databound items to populate the elements in the item template with data.

Usually you can just use a foreach loop in MVC to loop the items. Example:

<% foreach (var item in items) { %>
  <div class="holder">
    <%= item.Description %>
  </div>
<% } %>