how to call Json Method on textbox change event using jquery in asp.net mvc?

Question

I want to call a JSON method on my textbox change event using jquery.

Below is how my JsonResult method looks like

public JsonResult GetUserName(string emailId)
{
    string UserName = "";
    var query = (from u in DbContext.Users
                 where u.User_Email.ToLower() == emailId.ToLower()
                 select u).SingleOrDefault();
    if(query!=null)
    {
        UserName = query.User_FirstName +", "+query.User_LastName;
    }
    return Json(UserName, JsonRequestBehavior.AllowGet);
}

below is my view code

Email:&nbsp;<input type="text" id="txtEmail" /><br /><br />
Name:&nbsp;<input type="text" id="txtName" />

below is the jquery code

<script type="text/javascript">
        $(document).ready(function () {
            //$("#txtEmail").first().focus();

            $("#txtEmail").change(function () {
                var emailId = $(this).val();
                //$("#txtName").val(emailId);
                $.ajax({
                    url: 'GetUserName',
                    type: 'POST',
                    data: JSON.stringify({ emailId: emailId }),
                    dataType: 'json',
                    contentType: 'application/json',
                    success: function (data) {
                        if (data != "" || data != null) {
                            $("#txtName").val(data);
                        }
                        else {
                            alert("Our system does not recognize this email. Please try again.");
                            $("#txtEmail").focus();
                        }
                    }
                });
            });
        });
    </script>

Note....My GetUserName JsonResult method belongs to my Default Controller.

My jquery code is successfully getting executed on change event but the GetUserName method doesn't get called...please let me know what I am missing.

Thanks,

In addition to what @nemesv said, your action method seems to be a 'HttpGet' while you are trying to make a 'POST' request from the jQuery. Change either one to support same http verb across. — Siva Gopal
– Siva Gopal, Commented Jul 23, 2012 at 6:13

nemesv · Accepted Answer · 2012-07-23 06:16:55Z

2

You url is wrong it should be like /DefaultControllerName/GetUserName (it doesn't matter that this is the default controller if GetUserName is not the default action you have to specify the contoller in the url) that's why you should always use the built in UrlHelper to generate the urls in ASP.NET MVC:

$.ajax({
   url: '@(Url.Action("GetUserName"))',
   type: 'POST',

With the aspx viewengine:

$.ajax({
    url: '<%: Url.Action("GetUserName") %>',
    type: 'POST'

edited Jul 23, 2012 at 6:16

answered Jul 23, 2012 at 6:07

nemesv

140k16 gold badges424 silver badges364 bronze badges

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

1 Comment

aamankhaan Over a year ago

i have modified the url to /Home/GetUserName and it is working fine....by the way thanks for ur comment

Collectives™ on Stack Overflow

how to call Json Method on textbox change event using jquery in asp.net mvc?

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related