How to get MVC action error message on jQuery $ajax to display on page

Question

I have a page that on the right side displays a log-in form from a PartialView, when the user submits their credentials, a jQuery $ajax calls a method in the controller to verify that the user exists otherwise is null.

Please point out what I am doing incorrectly and help me understand what is that I need to change or add to make it work, currently I cannot see the value of userid or password being passed to the action method.

I can see the message on the page though: "The user name or password provided is incorrect." But what is the point, somehow the values are not being passed.

Here are the complete examples of my code:

Index.cshtml

<div id="YourOrder_Login">
@if (!User.Identity.IsAuthenticated)
{
    <div class="YourOrder_loginForm">
        <div class="YourOrder_loginArea" style="position:relative;">
            @{Html.RenderAction("ShoppingCartLogin", "ShoppingCart");}
        </div>
    </div>
} else {
    <div class="YourOrder_addressArea" style="position:relative;">
        @{Html.RenderAction("ShoppingCartShippingAddress", "ShoppingCart");}
    </div>
}
</div> 

ShoppingCartLogin (PartialView)

<div class="YourOrder__inputEmail">
<input id="YourOrder_MainLoginEmail" class="YourOrder_MainLoginEmail" name="UserName" type="text" 
tabindex="1" />   
</div>
<div>
<input id="YourOrder_MainLoginPassword" class="YourOrder_MainLoginPassword" name="Password" 
type="password" tabindex="2" />
</div>
<div class="container_btnsignin">
<button type="button" class="fancyButton YourOrder_signin" id="btnLogin" value="SignIn" 
name="Command" onclick="javascript: ShoppingCartLogin();">Sign In</button>

The jQuery

<script type="text/javascript">

function ShoppingCartLogin() {

    var userid = $(".YourOrder_MainLoginEmail").val();
    var password = $(".YourOrder_MainLoginPassword").val();
    var url = "/ShoppingCart/ShoppingCartLogin";

    $.ajax({
        url: url,
        type: "POST",
        dataType: "json",
        data: JSON.stringify({usr: userid, pwd: password}),//{ userId: userid, pass: password },
        cache: false,
        success: function (result) {
            if (result.success = "Invalid") {
                $('.YourOrder_loginError').css('visibility', 'visible')
                $('.YourOrder_loginError').slideDown().html('The user name or password provided is incorrect.');
            }
            else {
                $('.YourOrder_loginError').css('visibility', 'hidden')
                location.reload();
            }
        }
    });

}

The controller code

        [HttpPost]
    [AllowAnonymous]
    public ActionResult ShoppingCartLogin(string userId, string pass)
    {
            using (Entities db = new Entities())
            {
                var user = (from u in db.Users where u.Email == userId && u.Password == pass && u.IsActive select u).FirstOrDefault();

                if (user == null)
                {
                    //ModelState.AddModelError("", "The user name or password provided is incorrect.");
                    //return View("ShoppingCartLogin");
                    //return Json(new { status = "success", message = "The user name or password provided is incorrect." }); 
                    return Json(new { error = "Invalid" });
                }


                    List<string> roles = new List<string>();
                    if (user.IsAdmin)
                    {
                        roles.Add("Admin");
                    }
                    if (user.IsOrdersAdmin)
                    {
                        roles.Add("Orders");
                    }
                    if (user.IsStoreAdmin)
                    {
                        roles.Add("Stores");
                    }

                    user.LastLoginDate = DateTime.Now;
                    db.SaveChanges();

                    FormsAuthentication.SetAuthCookie(user.ID.ToString(), true);
                    return View("ShoppingCartShippingAddress");

            }
        }

Answer 1

Your parameter names must be matched, so your json object could be something like this: {userId: userid, pass: password}

However logging in using an ajax call is not a right way in this scenario, because you need to reload the whole page to update your page with ShoppingCartShoppingAddress partialview. It would be easier to do that using a form submit.

Answer 2

you are doing two things wrong here.

1.Parameter Mismatch 2.data:Json.Stringify

try this code

<script type="text/javascript">



function ShoppingCartLogin() {

        var userid = "12";
        var password = "Hsakarp";
        var UrlP = "/Default/ShoppingCartLogin";

        $.ajax({
        cache: false,
        type: "POST",
        url: UrlP,
        data: { userId: userid, pass: password },
             success: function (data) {
                 $('#Load').html(data);
             },
             error: function (xhr, ajaxOptions, thrownError) {
                 alert('Error');
             }
     });
}
    }
</script>

---html--

<button id="call" onclick="ShoppingCartLogin()">Post Data</button>

<div id="Load"></div>

--SC--

<h2>ShoppingCartLogin</h2>

<h2>Hrllo from shopping cart</h2>


<h2>Hrllo from shopping cart</h2>

<h2>Hrllo from shopping cart</h2>

--Controller--

public ActionResult ShoppingCartLogin(string userId, string pass)
        {

            return View("ShoppingCartLogin");

        }