Iterating over table with Jquery in asp.net mvc

I asked this question before (how to create totals in an asp.net mvc view). And I think the easiest way is to just add another item to the model but I am curious about how to do the other answer which is to use Jquery.

Showing totals in an asp.net MVC list view?

And one of the answers was to iterate over the table with JQuery and create a new "total开发者_StackOverflows" row. My jquery skills are next to non-existent (I can create a hello world in my view). Any recommendations would be great. Maybe there is a useful jquery library I should be looking at. Would be great if I could add a sort here also.

Can someone give me an example on how this might work.

Here is some sample asp.net MVC 2 code I want to try an work this into

The model

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

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

The Controller

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);
}

And the view (with a 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>

I updated your view with a working jquery solution, I'm not saying it's bullet proof but it gives you an idea how to solve these kind of problems in jquery.

The script contains a little jquery plugin, which adds the values of a selection of elements .

Just apply the plugin to an element which should contain the total, and specify a selector for the elements to be added (in my example, all the elements with class 'quantity').

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