mvc 3 equivalent to <asp:repeater> function?

Question

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.

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