How to call a Controller method from javascript in MVC3?

Question

Im using MVC3 architecture, c#.net. I need to compare text box content(User ID) with the database immediately when focus changes to the next field i.e., Password field. So I thought to use onblur event to the User Id field which then calls the Controller method. Can any tell me how to approach to this problem? As Im a newbie, code snippets are highly appreciated.

Thanks in Advance,

Prashanth

Solution 1

Here is an example. Example of your Controller Method

[HttpPost] // can be HttpGet
public ActionResult Test(string id)
{
     bool isValid = yourcheckmethod(); //.. check
     var obj = new {
          valid = isValid
     };
     return Json(obj);
}

and this would be your javascript function.

function checkValidId(checkId)
{
    $.ajax({
         url: 'controllerName/Test',
         type: 'POST',
         contentType: 'application/json;',
         data: JSON.stringify({ id: checkId }),
         success: function (valid)
         {
              if(valid) { 
                  //show that id is valid 
              } else { 
                  //show that id is not valid 
              }
         }
    });
}

Solution 2

See JQuery.get(), System.Web.Mvc.JsonResult.

For Example:

<script type="text/javascript">
    $('#userID').blur(function()
    {
        $.get('/Home/ValidateUserID/' + $(this).val(), {}, 
            function(data, status)
            {
                if( !data.success ) {
                    alert('User ID is invalid!');
                }
            });
    });
</script>

You'll need an action to catch the GET request:

public class HomeController
{
    [HttpGet]
    public ActionResult ValidateUserID(string id)
    {
        bool superficialCheck = true;

        return Json(new { success = superficialCheck },
            JsonRequestBehavior.AllowGet);
    }
}

A few points, in no particular order:

• Notice that the first parameter to .get is the matching URL to the controller action?
• The value of the #userID html field is appended to the end of the URL, allowing MVC to data bind it in to the action parameters ValidateUserID(string id).
• The Controller.Json method formats .NET objects as JavaScript objects. The formatted object is recieved by JQuery as data in the callback function.
• JsonRequestBehavior.AllowGet tells MVC that its okay to pass data back to the browser from a .GET.

Solution 3

It sounds like server side validation, so may be you can use client side validation features for this.

http://msdn.microsoft.com/en-us/library/gg508808(v=vs.98).aspx

In general, that may be done by using ajax call (not sure if you're using jQuery, but if not and there's no special limitations, would encourage to use it for this):

http://api.jquery.com/jQuery.ajax/

On client side:

$.ajax({
            url: '@Url.Action("ActionName", "ControllerName")',
            type: "POST",
            async: true,
            dataType: "json",
            data: $('#form').serialize(),                    
            success: function (data) {
               // process result
            },
            error: function (request, status, error) {
               // process error message
            }
        });

On server side:

[HttpPost]
public virtual ActionResult ActionName() 
{
     return Json("value")
}

But in general you should google from ASP.NET MVC 3 Ajax, there's plenty stuff regarding this in web and you may find exactly what you need already.

Solution 4

You can use RemoteValidation attribute with a server side action on your controller to do it for you all by MVC Unobstrusive javascript and not needed to write a single line JS/Jquery for it.

View more solutions

Comments

[user1545987]

Im using Jquery too. Pls tell me how how to call the method using jquery.

[Andrei]

Since you are sending request via 'post' verb, there is no need in JsonRequestBehavior.AllowGet parameter, is there?

[Giedrius]

@user1545987 updated with some snipped, but in general I think you're trying to validate user name/password, if it is that so, you should really use validation framework, that is already there.

[user1545987]

Thanks to EveryOne!! I got it. I'm so happy :-)