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

Dotnetnuke Inter-module communication (IMC) simplified on version 06.00.02 with c#

Few days ago I developed a module in which I used IMC which really interested me so I decided to write about it. I will try to explain in this post everything that is necessary to make IMC work in the modules. What is Inter Module Communication? As the name implies if you want to communicate or in other words send data from one module to another IMC is one way of doing it. I will be using module A and module B as the names in my post. An Observation: One thing I observed while playing around with it that if module A is on page 1 and module B is on page 2 then the data doesn't get passed. If both the modules are on the same page then only the data get passed. Example: The basic exercise that I will be performing is to take input from the textbox in Module A and display it in label in Module B. 1) You will be using IModuleCommunicator and IModuleListener interfaces to make this communication works. You will be implementing IModuleCommunicator in the class in the modul...