Skip to main content

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

Comments

Popular posts from this blog

Asp.net mvc razor render partial view using ajax helper

This is the extension to my blog in which I demonstrated rendering of the partial view using jquery Ajax . I want to demonstrate here yet another way by which partial view can be rendered without page refresh. Here is the implementation. Step 1: I will again be using DisplayData class in my demo. Here is it. public class DisplayData { public int ID { get; set; } public DisplayData(int ID) { this.ID = ID; } } Step 2: Create a PartialDemo page @model IEnumerable<MvcApplication5.Models.DisplayData> @{ ViewBag.Title = "PartialDemo"; } @Ajax.ActionLink("Click 1", "PartialDemo", "PartialDemo", new {Data= "1" }, new AjaxOptions { UpdateTargetId = "rsvpmsg" }) @Ajax.ActionLink("Click 2", "PartialDemo", "PartialDemo", new {Data= "2" }, new AjaxOptions { UpdateTargetId = "rsvpmsg" }) <div id="rsvpms

Asp.net mvc razor render partial view using jquery Ajax

I will going to demonstrate how we can render PartialViews using Jquery Ajax. I will be clicking an a href link ,then I will be calling the controller through jquery Ajax which will fill the partialview for a really nice user experience. Step 1: First of all we will be creating an DisplayData class for the use for this example in the model. public class DisplayData { public int ID { get; set; } public DisplayData(int ID) { this.ID = ID; } } Step 2: We will create a Clicks page and write the following code on it. Specially note empty here which will going to empty and then fill partialview with new records. $(document).ready(function () { $('.msg').click(function () { var id = this.id; $.ajax({ url: "/Category/Display", data: { data: id }, success: function (mydata) { $("#link").empty().appe

Asp.net mvc DataAnnotation ValidateAttribute two properties comparison.

Using Datannotion is great but there are scenarious in which the current attributes compare, range etc becomes inadequate especially for the comparisions. So we create here our own custom validation using ValidationAttribute class which is the base class for all the annotation attributes. So by deriving from it and overriding the Isvalid method we can create our custom attribute for the model. So here is the scenario in which I will be validating the Username against the password which should not be equal. Compare attribute cannot be used in this scenario so I have created a custom attribute for that. Here is the model with the attribute. User View Model [CompareUserPass("UserName", "Password", ErrorMessage = "UserName and password cannot be equal")] public class UserView { [Required(ErrorMessage = "UserName Required")] public string UserName { get; set; } [Required(