Skip to content Skip to sidebar Skip to footer

How To Call A Controller Method From Javascript In Mvc3?

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 though

Solution 1:

Here is an example. Example of your Controller Method

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

and this would be your javascript function.

functioncheckValidId(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:

<scripttype="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:

publicclassHomeController
{
    [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]
publicvirtual 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.

Solution 5:

here is what you could do:

Given that you have controller called AccountController and action called CheckPassword that accepts parameter string password, you could put this in your view:

$('#texboxId').blur(function() {
    $.ajax({
        url: '/Account/CheckPassword',
        data: { password: $('#texboxId').val() },
        success: function(data) {
            // put result of action into element with class "result"
            $('.result').html(data);
        },
        error: function(){
            alert('Error');
        }
    });
});

Your controller action would approximately look like this:

publicclassAccountController : Controller
{
    public ActionResult CheckPassword(string password)
    {
        bool passwordIsCorrect = //do your checking;string returnString = "whatever message you want to send back";
        return Content(returnString);
    }
}

Post a Comment for "How To Call A Controller Method From Javascript In Mvc3?"