如何在 Ajax 调用中将参数传递给 Controller 方法？

Question

我正在尝试使用 Ajax 调用来刷新 DisplayController 中的部分视图。我对 JS 不是很熟悉，我想知道如何将参数传递给我的 GetModel() 方法。我希望参数代表我的 KendoDropDown 中的内容，可以是 ViewModel 也可以是字符串。

我尝试将不同的东西传递到“数据：”字段中。通过当前的设置，我可以让它传入一个 DisplayViewModel，但该视图模型是 null 并且几乎没有用处。

function OnClose() {
    var chart = $("#safetyIncident-chart").data("kendoChart");
    $.ajax({
        url: "Display/GetModel",
        type: "get",
        data: $("form").serialize(),
        success: function (result) {
            $("#partial").html(result);
        }
    });
    chart.dataSource.read();
    }

public ActionResult GetModel(DisplayViewModel dvm)
    {
        return View(dvm);
    }

我希望能够将基于 DropDownPicker 中的参数的参数传递到我的 GetModel 方法中。谢谢！

编辑：

我想澄清一下我想知道在“数据：”字段中输入什么。当前代码是唯一不会破坏我的下拉菜单的方法，但这种方法仍然不能为我提供有用的信息。我想知道如何用有用的信息填充它或将其更改为有用的信息。

编辑：

我将添加我的 DropDownValue() JS 方法以防万一它有用。

function DropDownValue() {
    var value = $("#productionLine-dropdown").data("kendoDropDownList").value();
    return { selectProductionLine: value };
}

Answer 1

有几件事，首先您需要将您的type: "get" 指定为type: "post"，因为您想将表单数据发布到控制器。其次，您需要在AJAX 中捕获表单数据变量并将它们发送到您的Controller 方法。我给你一个简单的例子来说明如何实现这一点：

<script type="text/javascript">

function OnClose() {
 var chart = $("#safetyIncident-chart").data("kendoChart"); //For your chart
 var value = $("#productionLine-dropdown").data("kendoDropDownList").value(); //Dropdown value

  var json = {
              chart: chart,
              value:value
             };

    $.ajax({
        url: '@Url.Action("GetModel", "Display")',
        type: 'post',
        dataType: "json",
        data: { "json": JSON.stringify(json)},
        success: function (result) {
            $("#partial").html(result);
        },
        error: function (error) {
             console.log(error)
        }
      });
   chart.dataSource.read();
}
</script>

您的 Controller 方法如下所示：

using System.Web.Script.Serialization;

[HttpPost]
public ActionResult GetModel(string json)
{

        var serializer = new JavaScriptSerializer();
        dynamic jsondata = serializer.Deserialize(json, typeof(object));

        //Get your variables here from AJAX call
        var chart= jsondata["chart"];
        var value=jsondata["value"];

        //Do something with your variables here    

    return Json("Success");
}

Answer 2

您不能通过 get 方法将模型传递给操作 您必须将类型更改为“发布”并添加

[HttpPost]

GetModel 动作上方的属性