How to send json object to the Controller Action method in MVC 4

Question

I am trying to send my userid and password to my login Controller Action method.

//Login button click code

$("#btnLogin").click(function () {
    var userCrdential = {
        UserName: $("inputEmail3").val(),
        Password: $("inputPassword3").val()
    };
    $.ajax({
        type: "POST",
        url: "/Home/Login",
        content: "application/json; charset=utf-8",
        dataType: "json",
        data: userCrdential,
        success: function (res) {
          //  alert("data is posted successfully");
            if (res.success == true)
                alert("data is posted successfully");
            else {
               // alert("Something went wrong. Please retry!");
            }
        },
        error: function (xhr, textStatus, errorThrown) {
            alert(xhr.statusMessage);
        }
    }); 
});

and in my home Controller I have login Action method

    [HttpPost]
    [ActionName("Login")]
    public ActionResult Login(User userCrdential)
    {
        string userIdtest = userCrdential.UserName;
        string userPasswordtest = userCrdential.Password;
        var result=false;

        if (userIdtest != null && userPasswordtest != null)
        {
             result = true;
        }
        else
        {
             result = false;
        }

        return Json(result);
        //return RedirectToAction("Index");
    }

but my action method is not invoking...

In the firebug it is showing post is ok but displaying follwing error"NetworkError: 404 Not Found - localhost:49996/BlueBusApp/…"...... I have this ajax call from the Common.js file which is inside the Content folder and my controller Action method is inside my Home Controller... — Debashrita
– Debashrita, Commented Dec 2, 2014 at 10:21

haim770 · Accepted Answer · 2014-12-02 09:59:33Z

3

You need to change content to contentType and call JSON.stringify on your data:

$.ajax({
    type: "POST",
    url: "/Home/Login",
    contentType: "application/json; charset=utf-8",
    dataType: "json",
    data: JSON.stringify(userCrdential),
    ...
});

See jQuery.ajax

answered Dec 2, 2014 at 9:59

haim770

49.2k7 gold badges112 silver badges139 bronze badges

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

Comments

raju930 · Accepted Answer · 2014-12-02 10:08:12Z

0

Just change it from:

var userCrdential = {
    UserName: $("inputEmail3").val(),
    Password: $("inputPassword3").val()
};

to:

var userCrdential = "UserName=" + $("inputEmail3").val() + "&Password=" + $("inputPassword3").val();

all other things is ok in your code, but make sure your controller parameter having the same parameters passing here i.e. UserName and Password.

however you need to check user input before calling ajax.

answered Dec 2, 2014 at 10:08

raju930

957 bronze badges

2 Comments

Debashrita Over a year ago

Hi i am getting the following error at firebug NetworkError: 404 Not Found - localhost:49996/Home/Login" I have my ajax call in my Common.js file and my Login Controller Action is inside my HomeController...

raju930 Over a year ago

Just change the controller action from public ActionResult Login(User userCrdential) to public JsonResult Login(User userCrdential).

Mihai Dinculescu · Accepted Answer · 2014-12-02 18:42:55Z

0

You should never hard-code URLs in MVC.

Instead use @Url.Action.

url: ('@Url.Action("Login", "Home")',

userCrdential needs to be JSON encoded:

JSON.stringify(userCrdential)

Also, for the same of your sanity, please use the fail method.

$.ajax("url")
    .done(function() {
    alert("success");
})
    .fail(function() {
    alert("error");
})

One last note, success is deprecated as of jQuery 1.8; you should use done instead.

edited Dec 2, 2014 at 18:42

answered Dec 2, 2014 at 10:05

Mihai Dinculescu

20.1k8 gold badges58 silver badges70 bronze badges

1 Comment

Mihai Dinculescu Over a year ago

Because if you change your router settings the hardcoded value will become invalid and you will have to update two places instead of one.

Collectives™ on Stack Overflow

How to send json object to the Controller Action method in MVC 4

3 Answers 3

Comments

2 Comments

1 Comment

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

2 Comments

1 Comment

Related