CODEWITHSUNDEEP
jqueryasp.net-mvc-2
Sang Suantak
Sang Suantak

Reputation: 5265

jQuery $.ajax passes null value to MVC Controller

i've been struggling with this problem for quite some time. I've followed all suggestions provided in similar problems but without success.

As the title says, data passed by my $.ajax is not received by my controller.

jQuery:

var data = {
    id: id,
    app: app
};


    $.ajax({
        type: "POST",
        url: "/Utility/FetchTransactionLog",
        data: JSON.stringify(data),
        contentType: "application/json;",
        success: function (data) {
            if (data) {
                h.resultDiv.html(data);
            }
            else {
                h.resultDiv.html("");
                alert("No Log Found");
            }
        }
    });

Controller:

//id and app receives null values
public ActionResult FetchTransactionLog(string id,string app) {
    UtilityModels util = new UtilityModels(app);
    List<ResultModel> result = util.FetchTransactionLog(id);
    return View("LogResult", result);            
}

Route in Global.asax:

routes.MapRoute(
    "Default", // Route name
    "{controller}/{action}/{id}", // URL with parameters
    new { controller = "Utility", action = "Index", id=UrlParameter.Optional } // Parameter defaults
);

routes.MapRoute(
     "FetchLog",
     "Utility/FetchTransactionLog/{id}/{app}",
     new { controller = "Utility", action = "FetchTransactionLog", id = "", app = "" } // Parameter defaults
 );

What am i doing wrong?

Update

The following works as suggested by Samich:

$.ajax({
            type: "POST",
            url: "/Utility/FetchTransactionLog/" + id + "/" + app,
            data: "{}",
            contentType: "application/json;",
            success: function (data) {
                if (data) {
                    h.resultDiv.html(data);
                }
                else {
                    h.resultDiv.html("");
                    alert("No Log Found");
                }
            }
        });

Upvotes: 1

Views: 3623

Answers (5)

Samich
Samich

Reputation: 30175

try just to append your id and app to your url as you specified in the routes /Utility/FetchTransactionLog/{id}/{app}

Probably because your routing expects values in query string and doesn't find it there, so the default values provided from the routing registration

Upvotes: 2

alexl
alexl

Reputation: 6851

Try this :

 $.ajax({
    type: "POST",
    url: "/Utility/FetchTransactionLog",
    data: { id: id, app: app },
    contentType: "application/json;",
    success: function (data) {
        if (data) {
            h.resultDiv.html(data);
        }
        else {
            h.resultDiv.html("");
            alert("No Log Found");
        }
    }
});

Upvotes: 0

Alex
Alex

Reputation: 9481

Your data shouldn't be a JSON string, just leave it as a Javascript object. jQuery will convert this to POST parameters, which your controller can then read.

$.ajax({
    type: "POST",
    url: "/Utility/FetchTransactionLog",
    data: data,
    success: function (data) {
        if (data) {
            h.resultDiv.html(data);
        }
        else {
            h.resultDiv.html("");
            alert("No Log Found");
        }
    }
});

Upvotes: 1

ipr101
ipr101

Reputation: 24236

I can't test this at the moment but try changing - 

data: JSON.stringify(data),

to 

data: data,

JSON.stringify will format you data in a way that prevents jQuery posting it correctly. If you pass a normal object everything should work as expected.

Upvotes: 0

Jon
Jon

Reputation: 437854

Why do you do JSON.stringify your data? You should just pass the object as it is, like

data: data,

The documentation says flat out that if you pass in an object, it will be converted to a string automatically. By passing in a string that contains JSON, you are confusing jQuery and it ends up passing garbage data to ASP (using your browser's developer tools to inspect the request would have immediately made this apparent).

Upvotes: 1

Related Questions