How to pass Multiple Parameters from ajax call to MVC Controller

Question

I have the controller like the below:

public ActionResult Save(string input, string name) {
    //Some code
    return PartialView();
}

And I need an ajax call to this controller method and pass the two arguments input and value

And my ajax call is like the below:

$.ajax({
    url: '/Home/Save',
    type: 'POST',
    async: false,
    dataType: 'text',
    processData: false,
    data: "input=" + JSON.stringify(data) + "&name =" + $("#name").val(),
    success: function (data) {
    }
});

I am unable to pass the value to the name parameter. The value in the name parameter is becoming null.

possible duplicate of jquery Ajax call - data parameters are not being passed to MVC Controller action — xdumaine
– xdumaine, Commented Nov 25, 2013 at 13:31

xdumaine · Accepted Answer · 2013-11-25 13:23:07Z

29

You're making an HTTP POST, but trying to pass parameters with the GET query string syntax. In a POST, the data are passed as named parameters and do not use the param=value&foo=bar syntax. Using jQuery's ajax method lets you create a javascript object with the named parameters, like so:

$.ajax({
  url: '/Home/SaveChart',
  type: 'POST',
  async: false,
  dataType: 'text',
  processData: false,    
  data: { 
      input: JSON.stringify(IVRInstant.data), 
      name: $("#wrkname").val()
  },
  success: function (data) { }
});

answered Nov 25, 2013 at 13:23

xdumaine

10.4k7 gold badges65 silver badges107 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Macadameane Over a year ago

I believe that by default, forms with a POST method to submit a URI string in the body of the message.

Himalaya Garg · Accepted Answer · 2017-02-03 09:17:58Z

In addition to posts by @xdumain, I prefer creating data object before ajax call so you can debug it.

var dataObject = JSON.stringify({
                    'input': $('#myInput').val(),
                    'name': $('#myName').val(),
                });

Now use it in ajax call

$.ajax({
          url: "/Home/SaveChart",
          type: 'POST',
          async: false,
          dataType: 'json',
          contentType: 'application/json',
          data: dataObject,
          success: function (data) { },
          error: function (xhr) { }            )};

Purnendu Sarkar · Accepted Answer · 2019-09-24 12:28:46Z

function final_submit1() {
    var city = $("#city").val();
    var airport = $("#airport").val();

    var vehicle = $("#vehicle").val();

    if(city && airport){
    $.ajax({
        type:"POST",
        cache:false,
        data:{"city": city,"airport": airport},
        url:'http://airportLimo/ajax-car-list', 
        success: function (html) {
             console.log(html);
          //$('#add').val('data sent');
          //$('#msg').html(html);
           $('#pprice').html("Price: $"+html);
        }
      });

    }  
}

Community · Accepted Answer · 2017-05-23 11:53:20Z

I did that with helping from this question

jquery get querystring from URL

so let see how we will use this function

// Read a page's GET URL variables and return them as an associative array.
function getUrlVars()
{
    var vars = [], hash;
    var hashes = window.location.href.slice(window.location.href.indexOf('?') + 1).split('&');
    for(var i = 0; i < hashes.length; i++)
    {
        hash = hashes[i].split('=');
        vars.push(hash[0]);
        vars[hash[0]] = hash[1];
    }
    return vars;
}

and now just use it in Ajax call

"ajax": {
    url: '/Departments/GetAllDepartments/',                     
    type: 'GET',                       
    dataType: 'json',                       
    data: getUrlVars()// here is the tricky part
},

thats all, but if you want know how to use this function or not send all the query string parameters back to actual answer

Gilad Green · Accepted Answer · 2016-08-15 14:58:38Z

-2

$.ajax({
  type: "POST",
  contentType: "application/json; charset=utf-8",
  url: "ChnagePassword.aspx/AutocompleteSuggestions",
  data: "{'searchstring':'" + request.term + "','st':'Arb'}",
  dataType: "json",
  success: function (data) {
     response($.map(data.d, function (item) {
         return { value: item }
     }))
  },
  error: function (result) {
      alert("Error");
  }
});

edited Aug 15, 2016 at 14:58

Gilad Green

37.3k7 gold badges67 silver badges99 bronze badges

answered Nov 19, 2015 at 11:49

user3598298

11

1 Comment

avalancha Over a year ago

Please add some commentary on how this answers the question and use proper formatting

Collectives™ on Stack Overflow

How to pass Multiple Parameters from ajax call to MVC Controller

5 Answers 5

1 Comment

Comments

Comments

Comments

1 Comment

Linked

Hot Network Questions

Collectives™ on Stack Overflow

5 Answers 5

1 Comment

Comments

Comments

Comments

1 Comment

Linked

Related