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