mvc 3 equivalente a la función <asp: repetidor>?

Question

Tengo un sitio web en Asp.Net que intento conectar a MVC 3 y solo he trabajado anteriormente con MVC 2. Me encontré con la siguiente función 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> 

parece que tal vez esto funciona de manera similar a un bucle, pero no estoy muy positiva la forma de convertir a MVC 3 arquitectura.

Answer 1

tiene usted razón para suponer que el equivalente de un MVC asp: Repeater es

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

Answer 2

Tienes razón acerca de que sea similar a un bucle for. Una aplicación sencilla podría tener este aspecto:

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

Se dará cuenta de que ya no hay ningún tipo de control con runat="server", ni hay eventos vinculados a los manipuladores en el código subyacente. En cambio, estamos asumiendo que el controlador ha llenado el objeto Model con objetos que representan los datos que necesitamos mostrar. Esa es la función del controlador cuando se usa MVC.

Answer 3

Un repetidor es solo un bucle que proporciona enlace de datos para que pueda acceder a los elementos de la colección que está bucleando. Si busca en el método ourTeamRepeater_ItemDataBound, encontrará el código que usa los elementos de datos para completar los elementos en la plantilla de elementos con datos.

Por lo general, puede utilizar un bucle foreach en MVC para hacer un bucle en los elementos. Ejemplo:

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

Answer 4

Portar una aplicación Web Forms existentes a ASP.NET MVC se trata sólo de traducir ciegamente línea por línea algunos WebForms vista de código que tiene. Debe tener en cuenta la semántica de la plataforma de destino. Por ejemplo, la conversión de este asp:Repeater en un feo lazo foreach en lugar de tener en cuenta cosas como ver modelos, las plantillas de visualización no serían muy buenas.

Así en ASP.NET MVC se empieza por el diseño de modelos de vista:

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

continuación, se diseña una acción del controlador, que puebla esta vista del modelo:

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

continuación, se escribe una vista fuertemente tipado en el que se invoca una plantilla de visualización:

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

y luego se define una pantalla te mplate cual no se prestará para cada elemento de la colección (~/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> 

Ahora se dará cuenta de las dos acciones adicionales ThumbnailImage y FullImage controlador que nos permite recuperar las imágenes de los miembros, dada la identificación de miembro. Por ejemplo:

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

Ahora es más parecido a ASP.NET MVC. Como puede ver, es un patrón totalmente diferente a los clásicos WebForms.