jquery - 使用 AJAX 将模型从部分 View 传递到 Controller 的最佳方法?

标签 jquery asp.net ajax asp.net-mvc asp.net-mvc-4

我不确定如何确切地表达这个问题,但我一直在研究表排序器,作为掌握 ASP.NET MVC 中的 AJAX 和 JQuery 的一种方法。

到目前为止,使用以下代码可以正常工作:

部分 View :

@model IEnumerable<EH.SASS.TillStatus.Model.Models.TillTransactionsOnHold>
<link href="~/Content/Site.css" rel="stylesheet" />
<script src="~/Scripts/mvctablesort.js"></script>
<script src="~/Scripts/jquery-1.8.2.min.js"></script>
<div id="tablediv">
    <table id="empTable">
        <thead>
            <tr>
                <th data-attr="tillnetworkid">Till Network ID
                </th>
                <th data-attr="transactiontype">Transaction Type
                </th>
                <th data-attr="tid">TID
                </th>
                <th data-attr="transactionid">Transaction ID
                </th>
                <th data-attr="cardno">Card No.
                </th>
                <th data-attr="receiptno">Receipt No.
                </th>
                <th data-attr="scheme">Scheme
                </th>
                <th data-attr="amount">Amount
                </th>
                <th data-attr="date">Date
                </th>
                <th data-attr="resolved">Resolved
                </th>
                <th data-attr="dateresolved">Date Resolved
                </th>
                <th data-attr="resolvedby">Resolved by
                </th>
                <th data-attr="datecreated">Date Created
                </th>
                <th></th>
            </tr>
        </thead>
        <tbody>
            @foreach (var item in Model)
   {
                <tr>
                    <td>
                        @Html.DisplayFor(modelItem => item.Till.NetworkId)
                    </td>
                    <td>
                        @Html.DisplayFor(modelItem => item.TransactionType.Description)
                    </td>
                    <td>
                        @Html.DisplayFor(modelItem => item.TID)
                    </td>
                    <td>
                        @Html.DisplayFor(modelItem => item.TransactionId)
                    </td>
                    <td>
                        @Html.DisplayFor(modelItem => item.CardNo)
                    </td>
                    <td>
                        @Html.DisplayFor(modelItem => item.ReceiptNo)
                    </td>
                    <td>
                        @Html.DisplayFor(modelItem => item.SchemeType.Description)
                    </td>
                    <td>
                        @Html.DisplayFor(modelItem => item.Amount)
                    </td>
                    <td>
                        @Html.DisplayFor(modelItem => item.TransactionDate)
                    </td>
                    <td>
                        @Html.DisplayFor(modelItem => item.Resolved)
                    </td>
                    <td>
                        @Html.DisplayFor(modelItem => item.ResolvedDate)
                    </td>
                    <td>
                        @Html.DisplayFor(modelItem => item.User.EHLogin)
                    </td>
                    <td>
                        @Html.DisplayFor(modelItem => item.CreatedDate)
                    </td>
                    <td>
                        @Html.ActionLink("Edit", "Edit", "TransactionsOnHold", new { id = item.TillTransactionsOnHoldUid_PK }, null)
                        @if (!item.Resolved)
     {
                            @Html.ActionLink("Resolve", "Resolve", "TransactionsOnHold", new { id = item.TillTransactionsOnHoldUid_PK }, null)
     }
                    </td>
                </tr>
   }
        </tbody>
    </table>
</div>
<script type="text/javascript">
    $(document).ready(function () {
        sort("#empTable", "Home", "_heldTransactionTable")
    });
</script>

JQuery/AJAX:

function sort(tableid, controllername, actionname) {
    $(tableid).find( 'th' ).click(function () {
        var sortBy = $( this ).data("attr");

        $.ajax({
            cache: false,
            url: "/"+controllername+"/"+actionname,
            data: "{ 'sortBy': '" + sortBy + "' }",
            dataType: "html",
            type: "POST",
            async: "true",
            contentType: "application/json; charset=utf-8",
            dataFilter: function (data) { return data; },
            success: function (data) {
                $("#tablediv").html('');
                $("#tablediv").html(data);
            },
            error: function (xhr, ajaxOptions, thrownError) { alert(xhr.status); alert(thrownError); }
        });     
    })
}

Controller :

public PartialViewResult _heldTransactionTable(string sortBy)
{
        var tilltransactionsonhold =  db.TillTransactionsOnHold...

        if (sortBy == (string)Session["sortBy"])
        {
            switch (sortBy)
            {
                case "tillnetworkid":
                    tilltransactionsonhold = tilltransactionsonhold
                    .OrderBy(m => m.Till.NetworkId);
                    break;
                case "transactiontype":
                    tilltransactionsonhold = tilltransactionsonhold
                    .OrderBy(m => m.TransactionType.TransactionTypeUid_PK);
                    break;
                case "tid":
                    etc..etc..
            }
            Session["sortBy"] = "";
        }
        else
        {
            Session["sortBy"] = sortBy;
            switch (sortBy)
            {
                case "tillnetworkid":
                    tilltransactionsonhold = tilltransactionsonhold
                    .OrderByDescending(m => m.Till.NetworkId);
                    break;
                case "transactiontype":
                    tilltransactionsonhold = tilltransactionsonhold
                    .OrderByDescending(m => m.TransactionType.TransactionTypeUid_PK);
                    break;
                case "tid":
                    etc...etc...
            }       
        }

        return PartialView(tilltransactionsonhold.ToList());
    }

您会注意到我为了节省阅读时间而删除了一些代码,我也意识到这不是最好的解决方案,它是一个学习练习,欢迎提出任何建议。

每次从数据库中过滤一个全新的数据模型都会吸收广泛使用的应用程序,并且仅过滤模型本身会更有效。

我的问题是这样的:在不大量修改现有代码的情况下,从分部 View 将数据模型传递到 Controller 的好方法是什么,这样我就不必查询数据库了?

最佳答案

好吧,回发数据的 HTML 表示形式比无用更糟糕。你对此无能为力。通常处理此类事情的方法是为记录其“顺序”的每一行提供一个隐藏输入,并包含一些标识符的隐藏输入,以便能够确定将该顺序应用于哪个对象。每当排序发生变化时,您都必须更新此“顺序”输入,但任何好的库都应该对此有一些回调。

然后,您将发布这些字段值,这些值在 AJAX 中要么作为 JSON 对象,要么作为 x-www-form-urlencoded (您经常在 URL 中看到的名称-值对 jazz ,例如 foo=1&bar=2)。在后期操作中,您将使用 id 值查找相应的对象,然后将顺序值应用于这些对象。然后,将更新保存回您的数据库。

关于jquery - 使用 AJAX 将模型从部分 View 传递到 Controller 的最佳方法?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/24939091/

相关文章:

javascript - 在 jqGrid 渲染后隐藏列(标题和行)

javascript - 单击另一个选项卡时如何关闭 Accordion 选项卡?

c# - 在数据库中显示为空的行 - asp.net c#

c# - 从 app.config 文件的 web.config 部分获取值?

javascript - jVectorMap 加载 ajax 数据时出现问题

javascript - 根据您来自的链接预先选择表单上的选项?

javascript - 数据表分页隐藏 1 2 3 页按钮,仅具有下一个 - 上一个按钮

javascript - 正确获取元素值(ASP.NET MVC)

javascript - 尝试使用php和ajax将数据输入mysql数据库而不刷新页面

php - 如何在 php 中跟踪数据库表中的注销用户?