在asp.net中使用jquery迭代表mvc

Question

我之前問過這個問題（如何在asp.net mvc視圖中創建總計）。我認爲最簡單的方法是在模型中添加另一個項目，但我很好奇如何執行另一個使用Jquery的答案。

Showing totals in an asp.net MVC list view?

而且答案之一是迭代與jQuery表，並創建一個新的「總計」行。 我的jQuery技能是不存在的（我可以在我的視圖中創建一個hello world）。任何建議都會很棒。也許有一個我應該看的有用的jQuery庫。如果我也可以在這裏添加一個排序會很好。

有人可以給我一個例子，說明這可能如何工作。

下面是一些示例asp.net MVC 2的代碼，我想嘗試的工作，這爲

模型

namespace MvcScratch.Models 
{ 
    public class Thing 
    { 
     public string Name; 
     public int Value; 

     public Thing(string name, int value) 
     { 
      Name = name; 
      Value = value; 
     } 
    } 
} 

的控制器

public ActionResult Index() 
{ 
    List<Thing> myThings = new List<Thing>(); 

    myThings.Add(new Thing("Thing 1",2)); 
    myThings.Add(new Thing("Thing 2",3)); 

    return View(myThings); 
} 

和視圖（用jQuery hello world）。

<%@ Page Title="" Language="C#" MasterPageFile="~/Views/Shared/Site.Master" Inherits="System.Web.Mvc.ViewPage<IEnumerable<MvcScratch.Models.Thing>>" %> 

<asp:Content ID="Content1" ContentPlaceHolderID="TitleContent" runat="server"> 
    Index 
</asp:Content> 

<asp:Content ID="Content2" ContentPlaceHolderID="MainContent" runat="server"> 
<script src="../../Scripts/jquery-1.4.1.min.js" type="text/javascript"></script> 
<script src="../../Scripts/jquery-1.4.1.js" type="text/javascript"></script> 
    <h2>Index</h2> 

    <table> 
     <tr> 
      <th>Name</th> 
      <th>Value</th> 
     </tr> 

    <% foreach (var item in Model) { %> 

     <tr> 
<%--   <td> 
       <%: Html.ActionLink("Edit", "Edit", new { /* id=item.PrimaryKey */ }) %> | 
       <%: Html.ActionLink("Details", "Details", new { /* id=item.PrimaryKey */ })%> | 
       <%: Html.ActionLink("Delete", "Delete", new { /* id=item.PrimaryKey */ })%> 
      </td>--%> 
         <td> 
       <%: item.Name %> 
      </td> 

         <td> 
       <%: item.Value %> 
      </td> 
     </tr> 

    <% } %> 

    </table> 

    <p> 
     <%: Html.ActionLink("Create New", "Create") %> 
    </p> 

    <script type="text/javascript"> 
    $(document).ready(function() { 
    $("h2").click(function() { 
    alert("Hello world!"); 
    }); 
}); 
</script> 
</asp:Content> 

Answer 1

我更新了一個工作jQuery的解決你的看法，我不是說這是防彈但它給你一個想法如何解決這幾樣在jQuery的問題。

該腳本包含一個小jQuery插件，它添加了一系列元素的值。

只需將插件應用於應包含總數的元素，併爲要添加的元素指定一個選擇器（在我的示例中，所有具有「數量」類的元素）。

<%@ Page Title="" Language="C#" MasterPageFile="~/Views/Shared/Site.Master" Inherits="System.Web.Mvc.ViewPage<IEnumerable<MvcScratch.Models.Thing>>" %> 

<asp:Content ID="Content1" ContentPlaceHolderID="TitleContent" runat="server"> 
    Index 
</asp:Content> 

<asp:Content ID="Content2" ContentPlaceHolderID="MainContent" runat="server"> 
<script src="../../Scripts/jquery-1.4.1.min.js" type="text/javascript"></script> 
<script src="../../Scripts/jquery-1.4.1.js" type="text/javascript"></script> 
    <h2>Index</h2> 

    <table> 
     <tr> 
      <th>Name</th> 
      <th>Value</th> 
     </tr> 

    <% foreach (var item in Model) { %> 

     <tr> 
<%--   <td> 
       <%: Html.ActionLink("Edit", "Edit", new { /* id=item.PrimaryKey */ }) %> | 
       <%: Html.ActionLink("Details", "Details", new { /* id=item.PrimaryKey */ })%> | 
       <%: Html.ActionLink("Delete", "Delete", new { /* id=item.PrimaryKey */ })%> 
      </td>--%> 
         <td> 
       <%: item.Name %> 
      </td> 

         <td class="quantity"> 
       <%: item.Value %> 
      </td> 
     </tr> 

    <% } %> 

    </table> 
    <label>Total:</label><span id="total"></span> 

    <p> 
     <%: Html.ActionLink("Create New", "Create") %> 
    </p> 

    <script type="text/javascript"> 
     $(document).ready(function() { 
      $("h2").click(function() { 
       alert("Hello world!"); 
      }); 
      $('#total').calculateTotal('.quantity'); 
     }); 


(function($) { 
    $.fn.calculateTotal = function(selector) { 
     var totalElement = this; 
     var total = 0; 

     $(selector).each(function() { 
      total += parseFloat($(this).html()); 
     }); 

     $(totalElement).html(total); 
    }; 
})(jQuery); 

</script> 
</asp:Content>