通过 ajax.actionlink 使用通过 javascript 创建的 json 数据答案

【问题标题】：use json data created via javascript with ajax.actionlink通过 ajax.actionlink 使用通过 javascript 创建的 json 数据
【发布时间】：2013-07-24 19:58:37
【问题描述】：

我希望能够通过 Ajax.ActionLink 助手发布通过 javascript 函数创建的 json 数据。

我可以通过直接的 jQuery 代码来实现这一点，但我将在很多地方这样做，并想看看在 MVC 中是否有更有效的方法。

工作 jQuery 代码：

 $(function () {
        $("#delete-selected").click(function () {
            var ids= getSelected('ItemGrid'); //this returns a string[]
            var postData = { Ids: courseIds };
            var url = '/Home/DeleteSelected';
            $.ajax({
                url: url,
                traditional: true,
                type: "Post",
                dataType: 'json',
                data: postData
            });
        });
    });

【问题讨论】：

标签： c# asp.net-mvc jquery asp.net-ajax

【解决方案1】：

编写一个脚本，使用不显眼的 JavaScript 钩子（如 data- 属性）来存储设置。

HTML：

<div data-ajax-url='/Home/DeleteSelected' 
     data-ajax-post-data='{function name or json content}'>
....
</div>

JQuery 插件

$(document).on("click","[data-ajax-url]", function(){
        var postData =  $(this).data("ajax-post-data");
        var url = $(this).data("ajax-url");
        $.ajax({
            url: url,
            traditional: true,
            type: "Post",
            dataType: 'json',
            data: postData
        });
 }

【讨论】：

这当然需要改进，但它胜过每次都重写相同的 ajax 代码。

【解决方案2】：

如果您正在进行 ajax 调用并想使用 MVC 更新 html，我通常会从调用中返回 Partial View。然后使用结果更新当前持有者的 html

服务器端

public ActionResult DeleteSelected(int[] Ids)
{
   //do something
   MyModel model = new Model(); //create object with new data
   return Partial("_PartialViewName", model);
}

Javascript

    $("#delete-selected").click(function () {
        var ids= getSelected('ItemGrid'); //this returns a string[]
        var postData = { Ids: courseIds };
        var url = '/Home/DeleteSelected';
        $.ajax({
            url: url,
            traditional: true,
            type: "Post",
            dataType: 'html',
            data: postData
            success: function(result){
                 $('#MyPartialViewContainer').html(result);
            }
        });
    });

【讨论】：