Sunday, 5 June 2011

Jquery form plugin with asp.net mvc flavour

I am a great fan of jquery form plugin which is one of my favorites. It's really simple to integrate Ajax in your web pages with jquery form with very thorough documentation found at the site. Basically it really speed up the things. I had extended some of the examples found in the documentation and had created a small implementation of login in Asp.net mvc. So here how it goes.

Model:

    public class User
    {
       public string UserName { get; set; }
       public string Password { get; set; }        
    }

Controller:

     public ActionResult JqueryFormDemo()
     {
        return View();
     }

     public string Login(User User)
     {
       if(User.UserName=="mazhar" && User.Password=="mazhar")
           return "You are successfully login" ;
       else
           return "Login Failed";
     }


View:

@model MvcApplication5.Models.User

<script src="@Url.Content("~/Scripts/jquery.validate.unobtrusive.min.js")" type="text/javascript"></script>
<script src="@Url.Content("~/Scripts/jquery.form.js")" type="text/javascript"></script>

<script language="javascript" type="text/javascript">
    $(document).ready(function () {
        var options = {
            target: '#output1',   // target element(s) to be updated with server response 
            beforeSubmit: Validate,  // pre-submit callback 
          
        };
        $('#myForm').ajaxForm(options);

    });

    function Validate() {
        var usernameValue = $('input[name=UserName]').fieldValue();
        var passwordValue = $('input[name=Password]').fieldValue();
        
        if (!usernameValue[0] || !passwordValue[0]) {
            alert("UserName or password cannot be empty");
            return false;
        }
        return true;
    }      
   
</script>

<div id="output1"></div>
@using (Html.BeginForm("Login", "JQueryFormDemo", FormMethod.Post, new { id = "myForm" }))
{
    @Html.ValidationSummary(true)
    <fieldset>
        <legend>User</legend>

        <div class="editor-label">
            @Html.LabelFor(model => model.UserName)
        </div>
        <div class="editor-field">
            @Html.EditorFor(model => model.UserName)           
        </div>
        <div class="editor-label">
            @Html.LabelFor(model => model.Password)
        </div>
        <div class="editor-field">
            @Html.EditorFor(model => model.Password)          
        </div>

        <p>
            <input type="submit" value="Login" />
        </p>
    </fieldset>
}