Debashrita
Debashrita

Reputation: 940

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

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...

Upvotes: 3

Views: 6999

Answers (3)

Mihai Dinculescu
Mihai Dinculescu

Reputation: 20033

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.

Upvotes: 0

raju930
raju930

Reputation: 95

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.

Upvotes: 0

haim770
haim770

Reputation: 49133

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

Upvotes: 3

Related Questions