CODEWITHSUNDEEP
c#javascript.netajaxasp.net-mvc-3
user1545987
user1545987

Reputation: 273

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

Upvotes: 5

Views: 50928

Answers (5)

Tom Kim
Tom Kim

Reputation: 190

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 
              }
         }
    });
}

Upvotes: 10

Furqan Hameedi
Furqan Hameedi

Reputation: 4400

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.

Upvotes: 2

Dmitry Efimenko
Dmitry Efimenko

Reputation: 11203

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:

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

Upvotes: 0

Jesse Hallam
Jesse Hallam

Reputation: 6964

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.

Upvotes: 2

Giedrius
Giedrius

Reputation: 8540

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.

Upvotes: 2

Related Questions