How to pass multiple parameters from ajax to mvc controller?

Question

Controller

[HttpPost]
public ActionResult Save(string StrContactDetails, bool IsPrimary)
{
}

$.ajax({
  async: true,
  type: "POST",
  url: @url.Action("Helper","Save"),
  data: {
    StrContactDetails: Details,
    IsPrimary: true
  },
  //data: "StrContactDetails=" + Details + "&IsPrimary=" + true,
  //data: "{StrContactDetails:'" + Details + "',IsPrimary:"+ true + "}",
  //contentType: "application/json; charset=utf-8",
  success: function() {
  },
  error: function() {
  }
});

This works when my action method expects a single parameter and I pass the single parameter from ajax. But, I am unable to call the action with two parameters when it expects two parameters. So, there is some issue in passing parameters. May be content Type.

routes.MapRoute(
  name: "Default",
  url: "{controller}/{action}/{id}",
  defaults: new { controller = "Default", action = "Login", id = UrlParameter.Optional }
).DataTokens = new RouteValueDictionary(new { area = "MyArea" });

I can call .../TestProj/MyArea/Helper/Save/StrContactDetails="Test" when my action method is as follows.

public ActionResult Save(string StrContactDetails)
{
  return Content("called");         
}

I can call .../TestProj/MyArea/Helper/SaveEmergencyContact/StrContactDetails="test"?IsPrimary=true if my action method is as follows. But I am getting 404 for .../TestProj/MyArea/Helper/SaveEmergencyContact/StrContactDetails="test"/IsPrimary=true (replace ? with /)

public ActionResult Save(string StrContactDetails, bool IsPrimary)
{
  return Content("called");         
}

What I am missing here? Do I need to make route config change for ajax call with 2 parameters?

Change it to data: { StrContactDetails: 'Details', IsPrimary: 'true' }, (or use JSON.stingfy() ) — user3559349
– user3559349, Commented Feb 4, 2015 at 8:54
Does it hit your action method, but provide null parameters? — Mathew Thompson
– Mathew Thompson, Commented Feb 4, 2015 at 8:54
Your posting to /SaveEmergencyContact/Dhp! Change it to url: '@url.Action("SaveEmergencyContact","Dhp")', assuming you have DhpController — user3559349
– user3559349, Commented Feb 4, 2015 at 9:07
You have completely changed your question with the latest edits making the previous comments and answers meaningless (what has calling those urls got to do with passing multiple parameters from ajax to a controller? You should be asking a new question! But yes, you do need a specific route to make the second example work. — user3559349
– user3559349, Commented Feb 6, 2015 at 1:42

vinayan · Accepted Answer · 2015-02-04 08:59:13Z

30

I think you may need to stringify the data using JSON.stringify.

 var data = JSON.stringify({ 
                 'StrContactDetails': Details,
                 'IsPrimary':true
               });

$.ajax({
        type: "POST",
        url: @url.Action("Dhp","SaveEmergencyContact"),
        data: data,
        success: function(){},
        contentType: 'application/json'
    });

So the controller method would look like,

public ActionResult SaveEmergencyContact(string  StrContactDetails, bool IsPrimary)

answered Feb 4, 2015 at 8:59

vinayan

1,6373 gold badges21 silver badges45 bronze badges

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

2 Comments

Rush.2707 Over a year ago

This answer is exactly when you need to pass model

Rejwanul Reja Over a year ago

It's working fine. for me on: $.ajax({ type: 'POST', url: '/hr/employee/assigncustomer', data: JSON.stringify({ 'employeeCustomerId': contactId, 'customerIds': customerIds }), dataType: 'json', contentType: 'application/json; charset=utf-8', success: function (data) {}}) Thanks

B Kansara · Accepted Answer · 2018-09-24 13:09:37Z

You can do it by not initializing url and writing it at hardcode like this

//var url = '@Url.Action("ActionName", "Controller");

$.post("/Controller/ActionName?para1=" + data + "&para2=" + data2, function (result) {
        $("#" + data).html(result);
        ............. Your code
    });

While your controller side code must be like this below:

public ActionResult ActionName(string para1, string para2)
{
   Your Code .......
}

this was simple way. now we can do pass multiple data by json also like this:

var val1= $('#btn1').val();  
var val2= $('#btn2').val(); 
$.ajax({
                    type: "GET",
                    url: '@Url.Action("Actionre", "Contr")',
                    contentType: "application/json; charset=utf-8",
                    data: { 'para1': val1, 'para2': val2 },
                    dataType: "json",
                    success: function (cities) {
                        ur code.....
                    }
                });

While your controller side code will be same:

public ActionResult ActionName(string para1, string para2)
{
   Your Code .......
}

Suraj Rao · Accepted Answer · 2021-01-08 10:08:41Z

3

Try this;

function X (id,parameter1,parameter2,...) {
    $.ajax({

            url: '@Url.Action("Actionre", "controller")',+ id,
            type: "Get",
            data: { parameter1: parameter1, parameter2: parameter2,...}

    }).done(function(result) {

        your code...
    });
}

So controller method would looks like :

public ActionResult ActionName(id,parameter1, parameter2,...)
{
   Your Code .......
}

edited Jan 8, 2021 at 10:08

Suraj Rao

29.7k11 gold badges96 silver badges104 bronze badges

answered Jan 8, 2021 at 10:03

Ali Mahdian

1691 silver badge4 bronze badges

Comments

malkam · Accepted Answer · 2015-02-04 09:18:37Z

1

Try this:

var req={StrContactDetails:'data',IsPrimary:'True'}

$.ajax({
                   type: 'POST',
                   data: req,
                   url: '@url.Action("SaveEmergencyContact","Dhp")',
                   contentType: "application/json; charset=utf-8",
                   dataType: "json",
                   data: JSON.stringify(req),
                   success: function (data) {
                       alert("Success");
                   },
                   error: function (ob, errStr) {
                       alert("An error occured.Please try after sometime.");
                   }
               });

http://api.jquery.com/jquery.ajax/

edited Feb 4, 2015 at 9:18

answered Feb 4, 2015 at 9:12

malkam

2,3551 gold badge18 silver badges19 bronze badges

1 Comment

eaglei22 Over a year ago

Using stringify did not work passing it to the controller using asp.net mvc4. but passing it without calling stringify did. I noticed stringify works well when the controller param is an object, but not a regular primitive data type.

Lucifer · Accepted Answer · 2020-01-10 13:30:44Z

1

  var data = JSON.stringify
            ({
            'StrContactDetails': Details,
            'IsPrimary': true
            })

edited Jan 10, 2020 at 13:30

Lucifer

1,6572 gold badges22 silver badges34 bronze badges

answered Jan 10, 2020 at 12:24

raju soneri

111 bronze badge

1 Comment

Lucifer Over a year ago

Please add some explanation to your answer.

ADyson · Accepted Answer · 2018-05-02 10:12:38Z

0

function toggleCheck(employeeId) {
    var data =  'referenceid= '+ employeeId +'&referencestatus=' 1;
    console.log(data);
    $.ajax({
        type : 'POST',
        url : 'edit',
        data : data,
        cache: false,
        async : false,
        success : function(employeeId) {
            alert("Success");
            window.redirect = "Users.jsp";
        }
    });

}

edited May 2, 2018 at 10:12

ADyson

62.9k16 gold badges86 silver badges99 bronze badges

answered May 2, 2018 at 10:10

raju ranjan

11

3 Comments

ADyson Over a year ago

why async: false? This is well known to be a bad practice and it's not necessary in this code at all. Also, answers with explanations tend to be much higher quality.

raju ranjan Over a year ago

absolutely correct async not need to write,if you want then use otherwise dont use async ,but i wants to pass 2 parameter in my controller using above code i got success.

ADyson Over a year ago

Ok but why randomly include something which is bad practice when it's unnecessary for this purpose? Especially since you still haven't added any explanation of what you've done to make the code work compared to what's in the question, someone might think was a necessary part of the solution.

Collectives™ on Stack Overflow

How to pass multiple parameters from ajax to mvc controller?

6 Answers 6

2 Comments

Comments

Comments

1 Comment

1 Comment

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

6 Answers 6

2 Comments

Comments

Comments

1 Comment

1 Comment

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related