【问题标题】:ASP.NET MVC passing whole model to controller using ajaxASP.NET MVC 使用 ajax 将整个模型传递给控制器
【发布时间】:2015-09-03 13:29:13
【问题描述】:

如何使用 ajax 将视图的模型传递给控制器​​?请看下面的 JS 函数 CreateTable():

我的控制器:

public ActionResult Index()
{
    var viewModel = new MyViewModel();

    return View(viewModel);
}

[HttpPost]
public ActionResult Index(MyViewModel viewModel)
{
    //CODE FOR GETTING STUFF HERE

    return View(viewModel);
}

public JsonResult GetResult(JQueryDataTableParamModel param, MyViewModel viewModel)
{
    //CODE FOR GETTING STUFF HERE

    return Json(new
    {
        sEcho = param.sEcho,
        aaData = viewModel.Data,
        iTotalRecords = viewModel.Data.Rows.Count,
        iTotalDisplayRecords = viewModel.DisplayRecords
    }, JsonRequestBehavior.AllowGet);
}

这是 datatables.net 处理的 ajax 部分:

function CreateTable() {
    var table = $('#dataTable').DataTable({
        "deferRender": true,
        "bServerSide": true,
        "sAjaxSource": "@Url.Action("GetResult")",
        "fnServerParams": function (aaData) {
            //here's my problem: HOW CAN I PUSH MY WHOLE MODEL HERE?
            aaData.push({ "name": "MyViewModel", "value": "@Model" });
        },
        "sPaginationType": "simple_numbers",
        "bProcessing": true,
        "oLanguage": { "sProcessing": "Loading..." },
        "aoColumns": [
            { "sName": "Col1" },
            { "sName": "Col2" },
            { "sName": "Col3" },
            { "sName": "Col3" },
            { "sName": "Col4" },
            { "sName": "Col5" }
        ]
    });
}

我的朋友告诉我,我也可以将整个模型从 ajax 传递到我的控制器,但我不知道该怎么做。请告知执行此操作的更好方法是什么。谢谢你。

【问题讨论】:

  • 如果你想在 javascript 中使用它,你需要将你的模型序列化为 JSON。使用 Json.net 你会使用类似@JsonConvert.SerializeObject(model)
  • 我正在尝试亚历克斯的回答与您的相同,但我在使用 JsonConvert 时遇到编译错误
  • 您需要获取Newtonsoft.Json nuget 包才能识别JsonConvert

标签: c# asp.net asp.net-mvc datatables


【解决方案1】:

使用fnServerParams 时,您使用aoData.push 将自定义参数发送到服务器。我不确定是否将整个模型作为单个参数传递,但您可以这样做:

aoData.push({ "name": "customParam1", "value": $('#param1').val() });
aoData.push({ "name": "customParam2", "value": $('#param2').val() });

其中param1param2 是从jQuery 选择器检索的模型属性。

您的控制器方法需要从查询字符串中检索这些参数。像这样的:

创建一个表示自定义参数的模型(在您的示例中这基本上会复制 MyViewModel):

public class MyCustomParamModel
{
    public string customParam1 { get; set; }
    public string customParam2 { get; set; }
}

在控制器中,解析查询字符串,获取自定义参数并将它们分配给您的模型

public JsonResult GetResult(JQueryDataTableParamModel param)
{
    NameValueCollection qs = HttpUtility.ParseQueryString(Request.QueryString.ToString());

    var model = new MyCustomParamModel
    {
        customParam1 = qs["customParam1"],
        customParam2 = qs["customParam2"],
    }

现在你的模型数据在控制器中,你可以用它做任何你想做的事情。

【讨论】:

  • 谢谢,我明白了。但是,如果我有一个 MyCustomParamModel 属性作为 DataTable 怎么办?我怎样才能做到这一点?假设 MyCustomParamModel.customParam1 是一个数据表?
  • 我认为您必须将其作为数组传递,或者以某种方式对其进行字符串化,我不确定您如何或为什么要这样做。你能解释一下你想做什么吗?
【解决方案2】:

只要你传递与你的模型具有相同属性的json对象,你应该是安全的,例如:

Model:

public class Language
    {
        public int ID { get; set; }
        public string Language1{ get; set; }
        public string Language2 { get; set; }
    }

Ajax:

$.ajax({
            url: '@Url.Action("Action", "Controller")',
            type: "POST",
            contentType: 'application/json',
            data: JSON.stringify({
                ID: 1,
                Language1: "English",
                Language2: "German",
                         }),
            dataType: 'json',


            success: function (data) {
                alert(data)
            }
        });

【讨论】:

    【解决方案3】:

    您可以使用@Html.Raw(JsonConvert.SerializeObject(Model)) 序列化您的模型,这样您的函数将如下所示:

    "fnServerParams": function (aaData) {
    
                aaData.push({ name: "viewModel", value: @Html.Raw(JsonConvert.SerializeObject(Model)) });
            },
    

    【讨论】:

    • 感谢 Alex 抽出时间检查我的问题,我怎样才能用我的控制器 GetResult() 捕捉到它?
    • 你不需要做任何特别的事情。 MVC 模型绑定器将解析此模型。只需在方法中使用您的 viewModel 对象。它将包含您从客户端传递的所有值
    • JsonConvert 从我这里返回编译错误。 :(
    • 你的意思是JsonConvert.SerializeObject(Model)返回编译错误?
    猜你喜欢
    • 2011-12-16
    • 1970-01-01
    • 1970-01-01
    • 2020-11-22
    • 1970-01-01
    • 2014-10-17
    • 1970-01-01
    • 1970-01-01
    • 2015-06-30
    相关资源
    最近更新 更多