CODEWITHSUNDEEP
asp.net-mvc-4jquery
Willy
Willy

Reputation: 10648

Passing data as string in jQuery ajax

I have a javascript method which contains an ajax call:

function MyFunction(urlTask, task) {

    ...

    ajax({
        url: urlTask,        
        data: task.Params,
        type: 'POST',
        dataType: 'json'
    })

    ...

}

urlTask is the name of a method in the controller and its name varies depending on some conditions. As a example, sometimes it can be Task1 and sometimes Task2:

    [HttpPost]
    public ActionResult Task1(string Param1, string Param2)
    {
    }

    [HttpPost]
    public ActionResult Task2(string Param1)
    {
    }

Each controller method has a different number of parameters, for example, Task1 has two parameters whereas Task2 has one. So as method in the controller to be called from jquery ajax can vary as well as its parameters I use the above commented scenario, that is, passing the name of the task (urlTask) and task to the javascript function and finally, passing them through the ajax call to the method in the controller.

task.Params contains the necessary parameters to be passed to the controller for each case, either Task1 or Task2. (see below explanation).

What I want is to build the parameters to be passed to the controller method as a string, and then assign it to the 'Data' in the ajax call. task is a json object returned previously by the controller and it contains a field called Params, among others. Params field is a string type which contains the correct parameters depending on the controller method to be called. For example:

task.Params contains a string like below when calling Task1 controller method:

{'Param1':'Param_1','Param2':'Param_2'}

and:

{'Param1':'Param_1'}

when calling Task2 controller method:

My problem is: Controller method, either Task1 or Task2, is receiving its parameters as null so what's wrong? It seems like ajax call is not interpreting correctly the 'data' argument when sending it to the controller method.

Using below in the ajax call is not working:

contentType: 'application/json',
data: JSON.stringify(task.Params)

Any ideas?

Upvotes: 0

Views: 6799

Answers (3)

Victor Xie
Victor Xie

Reputation: 148

the other way I used in my project:

in javascript:

var sData = "Param1=" + encodeURIComponent(jsParam1) + "&Param2="+ encodeURIComponent(jsParam2);

jQuery.ajax:

    ...
    url: '{server side task1 url}',
    type: 'POST',
    data: sData ,
    contentType: 'application/x-www-form-urlencoded; charset=UTF-8',
    ...

server side:

[HttpPost]
public ActionResult Task1(string Param1, string Param2)
{
    string sUnescapedParam1 = System.Uri.UnescapeDataString(Param1);
    string sUnescapedParam2 = System.Uri.UnescapeDataString(Param2);
}

Upvotes: 2

EvilDevil
EvilDevil

Reputation: 690

 contentType: 'application/json',
 data: JSON.stringify(task.Params)

Worked for me.

My controller: 

[Authorize]
[HttpPost]
public ActionResult Test(string Param1, string Param2) {
    return Json(new{ Msg = "Param1: " + Param1 + " & Param2: " + Param2}, JsonRequestBehavior.AllowGet);
}

JS:

          var Task={};
          Task.Params = {'Param1':'Param_1','Param2':'Param_2'};
          $.ajax({
                url: "/Test",
                type: "POST",
                dataType: 'json',
                contentType: 'application/json',
                data: JSON.stringify(Task.Params),
                success: function (data) {
                    alert(data.Msg);
                }, error: function (data) {

                }
          });

Output is: {"Msg":"Param1: Param_1 \u0026 Param2: Param_2"}

Upvotes: 3

Kaptan
Kaptan

Reputation: 336

You can pass the object by converting it as json object like the following syntax 

 function MyFunction(urlTask, task) {

           $.ajax({
            url: urlTask,        
            data: "{" + JSON.stringify(task.Params) + "}",
            type: 'POST',
            contentType: "application/json;charset=utf-8",
            dataType: "json",
            success: onSussess,
            error: onError
        });    
    }

Upvotes: 0

Related Questions