Sunday, 5 June 2011

Jquery form plugin with 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 mvc. So here how it goes.


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


     public ActionResult JqueryFormDemo()
        return View();

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


@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 


    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;

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

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

            <input type="submit" value="Login" />

No comments:

Post a Comment