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>

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

1 个答案: