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

Possible duplicate of [How to post viewmodel in MVC using jquery](https://stackoverflow.com/questions/25106722/how-to-post-viewmodel-in-mvc-using-jquery) — Arthur S., Jul 09 '19 at 19:25
@skipper I looked through your link and I am wondering how I would be able to do populate the form from the chart value. The chart value is basically all I need to pass into the GetModel() method. — Kevin, Jul 09 '19 at 19:36

score 2 · Accepted Answer · edited Jul 10 '19 at 14:01

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

Thank you! What you suggested led me on the right path. – Kevin Jul 10 '19 at 13:52 — Kevin, Jul 10 '19 at 13:52

score 1 · Answer 2 · answered Jul 09 '19 at 20:43

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

answered Jul 09 '19 at 20:43

Farhad Zamani

5,381
2
16
41

So I understand why it should be a [HttpPost] request but when I change it, it appears as though the method does not get called. (My break point is never hit). What is calling this and how could I change it to hit that method? – Kevin Jul 09 '19 at 21:01
are you changed the ajax method from get to post? – Farhad Zamani Jul 09 '19 at 21:10
Ahh good catch. I am able to call the GetModel() method now. How would I be able to pass in the DropDownValue() string? Currently the GetModel() is still receiving a null value because I am not sure how to define a non-null to get passed in. – Kevin Jul 09 '19 at 21:15

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

2 Answers2