How to pass a parameter to a Controller method on Ajax call?

Question

I am trying to use an Ajax call to refresh my partial views in my DisplayController. I am not very familiar with JS and I am wondering how to pass a parameter into my GetModel() method. I want the parameter to be representative of what is in my KendoDropDown, either as a ViewModel or as a string.

I have tried passing different things into the "data:" field. With this current set up I can get it to pass in a DisplayViewModel, but that view model is null and is of little use.

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);
    }

I want to be able to pass in a parameter that is based in what is in my DropDownPicker into my GetModel method. Thanks!

EDIT:

I guess to clarify I am wondering what to put in the "data:" field. The current code is the only way that does not break my dropdown but this way still does not provide useful information to me. I am wondering how I can populate this with useful information or change it to be useful information.

EDIT:

I am going to add my DropDownValue() JS method just in case it could be useful.

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

Answer 1

you can not pass model to action by get method you must change the type to 'post' and add

[HttpPost]

attribute above GetModel action

Answer 2

Couple of things, first you need to specify your type: "get" to type: "post" since you want to post your form data to the controller. Secondly, you need to capture your form data variables in your AJAX and send them to your Controller method. I am giving you simple example on how you can achieve this:

<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>

And your Controller method would look like:

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");
}