mvc 3 tương đương với hàm <asp: repeater>?

Question

Tôi có một trang web trong Asp.Net mà tôi đang cố gắng chuyển sang MVC 3 và tôi chỉ làm việc với MVC 2 trước đây. Tôi tình cờ chức năng asp sau

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

có vẻ như có thể làm việc này tương tự như một vòng lặp for, nhưng tôi không khá tích cực như thế nào để chuyển nó sang MVC 3 kiến ​​trúc.

Answer 1

Bạn đang hoàn toàn đúng nếu cho rằng tương đương với MVC của một asp: Repeater là

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

Answer 2

Bạn nói đúng về nó là tương tự như một vòng lặp for. Một thực hiện đơn giản có thể trông như thế này:

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

Bạn sẽ nhận thấy rằng có không còn bất kỳ điều khiển với runat="server", cũng không có bất kỳ sự kiện liên quan đến xử lý trong code-behind. Thay vào đó, chúng ta giả định rằng bộ điều khiển đã điền đối tượng Model với các đối tượng biểu diễn dữ liệu mà chúng ta cần hiển thị. Đó là vai trò của bộ điều khiển khi sử dụng MVC.

Answer 3

Bộ lặp lại chỉ là vòng lặp cung cấp dữ liệu để bạn có thể truy cập các mục trong bộ sưu tập mà bạn đang lặp. Nếu bạn nhìn vào phương thức ourTeamRepeater_ItemDataBound, bạn sẽ tìm thấy mã sử dụng các mục dữ liệu để điền các phần tử trong mẫu mục có dữ liệu.

Thông thường bạn chỉ có thể sử dụng vòng lặp foreach trong MVC để lặp lại các mục. Ví dụ:

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

Answer 4

Porting một ứng dụng WebForms hiện có để ASP.NET MVC là không chỉ về một cách mù quáng dịch từng dòng một số WebForms xem mã mà bạn có. Bạn nên tính đến ngữ nghĩa của nền tảng đích. Ví dụ: chuyển đổi số asp:Repeater thành vòng lặp foreach xấu xí thay vì tính đến những thứ như kiểu xem, mẫu hiển thị sẽ không tốt lắm.

Vì vậy, trong ASP.NET MVC bạn bắt đầu bằng cách thiết kế mô hình điểm:

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

sau đó bạn thiết kế một hành động điều khiển mà populates mô hình quan điểm này:

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

sau đó bạn viết một cái nhìn mạnh mẽ gõ trong đó bạn gọi một mẫu hiển thị:

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

và sau đó bạn xác định hiển thị te mplate mà sẽ được trả lại cho mỗi phần tử của bộ sưu tập (~/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> 

Bây giờ bạn sẽ thấy thêm hai ThumbnailImage và FullImage hành động điều khiển mà sẽ cho phép chúng tôi để lấy những hình ảnh của các thành viên trao id thành viên. Ví dụ:

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

Bây giờ, nó giống như ASP.NET MVC. Như bạn có thể thấy đó là một mô hình hoàn toàn khác với WebForms cổ điển.