Home > DeveloperSection > Beginner > Ajax Helper in Asp.Net Mvc 4

Ajax Helper in Asp.Net Mvc 4


ASP.NET MVC ASP.NET MVC 
Ratings:
0 Comment(s)
 2977  View(s)
Rate this:

Ajax Helper in Asp.Net Mvc 4

In this article, I’m explaining the ajax helper in asp.net mvc 4 and how to implement it in our project.

Introduction

Ajax driven web applications are quite common these days. Using Ajax helper you can submit your HTML form using Ajax so that instead of refreshing the entire web page only a part of it can be refreshed.

Ajax helper of ASP.NET MVC essentially provides Ajax functionality to your web applications. Two core features of Ajax helper are as follows:

·        You can submit an entire form using Ajax.

·        You can invoke an action method using Ajax.

 

Properties Of Ajax

Properties

Description

Url

The Url property indicates a URL to which the form is to be submitted. You can also specify a controller and action method in the BeginForm() method instead of setting the URL property.

HttpMethod

The HttpMethod property indicates the HTTP method (GET or POST) to be used while making an Ajax request.

Confirm

The Confirm property is used to specify a message that will be displayed in a confirm dialog to the end user. If user clicks OK on the confirmation dialog the Ajax call is made.

OnBegin

The OnBegin property specifies a name of JavaScript function that is called at the beginning of the Ajax request.

OnComplete

The OnComplete property specifies a name of JavaScript function that is called at the end of the Ajax request.

OnSuccess

The OnSuccess property specifies a name of JavaScript function that is called when the Ajax request is successful.

OnFailure

The OnFailure property specifies a name of JavaScript function that is called if the Ajax request fails.

LoadingElementId

While an Ajax request is being made you can display a progress message or animation to the end user. The LoadingElementId indicates an ID of a DOM element that is serving this purpose. Note that the Ajax helper will simply display and hide this element. Displaying some progress message of animation inside this element is your responsibility.

LoadingElementDuration

The LoadingElementDuration property specifies a time duration in milliseconds that controls the duration of the progress message or animation.

UpdateTargetId

The UpdateTargetId property specifies an ID of a DOM element that will be populated with the HTML returned by the action method.

InsertionMode

The InsertionMode property governs how the HTML replacement should occur in a DOM element as specified by UpdateTargetId property. The possible values are InsertAfter, InsertBefore and Replace.

 

Example

 

Step 1

First create a table in the database named  “Customer” like below:

Ajax Helper in Asp.Net Mvc 4

Step 2

Now create a basic asp.net mvc 4 application and add a class named “Customer” like below:

using System;

using System.Collections.Generic;

using System.ComponentModel.DataAnnotations;

using System.ComponentModel.DataAnnotations.Schema;

using System.Linq;

using System.Web;

 

namespace Ajaxhelper.Models

{

    [Table("Customer")]

    public class Customer

    {

        [Key]

        public int CustID { getset; }

        public string Name { getset; }

        public string Address { getset; }

        public string ContactNo { getset; }

    }

}

Step 3

Now add another class named “CustomerContext” like below:

using System;

using System.Collections.Generic;

using System.Data.Entity;

using System.Linq;

using System.Web;

 

namespace Ajaxhelper.Models

{

    public class CustomerContext : DbContext

    {

        public DbSet<Customer> Customers { getset; }

    }

}

 

Now add connection string in the web.config file like this:

<connectionStrings>

      <add name="CustomerContext" connectionString="Data Source=UTTAM-PC4;Initial Catalog=SumitTesting; user id=userid;password=password;" providerName="System.Data.SqlClient"/>

  </connectionStrings>

Step 4

Before proceeding to step 4, first build the project, and now add a controller to the project named “HomeController” like below:

using Ajaxhelper.Models;

using System;

using System.Collections.Generic;

using System.Linq;

using System.Web;

using System.Web.Mvc;

 

namespace Ajaxhelper.Controllers

{

    public class HomeController : Controller

    {

        CustomerContext db = new CustomerContext();

 

        public ActionResult Index()

        {

            return View();

        }

 

        [HttpPost]

        public ActionResult Index(Customer customer)

        {

            if (ModelState.IsValid)

            {

                db.Customers.Add(customer);

                db.SaveChanges();

            }

            return View();

        }

 

    }

}

 

Step 5

Now a view name “Index” like below:

@model Ajaxhelper.Models.Customer

 

@{

    ViewBag.Title = "Index";

}

 

@{

    AjaxOptions options = new AjaxOptions();

    options.HttpMethod = "Post";

    options.Confirm = "Do you wish to submit this form?";

    options.OnBegin = "OnBegin";

    options.OnComplete = "OnComplete";

    options.OnFailure = "OnFailure";

    options.OnSuccess = "OnSuccess";

    options.LoadingElementId = "divProgress";

    options.LoadingElementDuration = 1000;

    options.UpdateTargetId = "divResponse";

    options.InsertionMode = InsertionMode.InsertAfter;

}

 

<script src="@Url.Content("~/Scripts/jquery-1.8.2.min.js")"></script>

<script src="@Url.Content("~/Scripts/jquery.unobtrusive-ajax.min.js")"></script>

<script>

    function OnBegin() {

        $("#divAjaxStatus").append("<h3>Beginning Ajax request.</h3>");

    }

    function OnComplete() {

        $("#divAjaxStatus").append("<h3>Completing Ajax request.</h3>");

    }

    function OnSuccess() {

        $("#divAjaxStatus").append("<h3>Ajax request successful.</h3>");

    }

    function OnFailure() {

        $("#divAjaxStatus").append("<h3>Ajax request failed.</h3>");

    }

</script>

<div>

    <div>

        @using (Ajax.BeginForm("Index""Home", options))

        {

            <div style="width:100%;float:left;">

                <div style="width100pxfloatleft;">

                    @Html.LabelFor(m => m.Name)

                </div>

                <div style="width200pxfloatleft;">

                    @Html.TextBoxFor(m => m.Name)

                </div>

            </div>

            <div style="width:100%;float:left;">

                <div style="width100pxfloatleft;">

                    @Html.LabelFor(m => m.Address)

                </div>

                <div style="width200pxfloatleft;">

                    @Html.TextBoxFor(m => m.Address)

                </div>

            </div>

            <div style="width:100%;float:left;">

                <div style="width100pxfloatleft;">

                    @Html.LabelFor(m => m.ContactNo)

                </div>

                <div style="width200pxfloatleft;">

                    @Html.TextBoxFor(m => m.ContactNo)

                </div>

            </div>

            <div style="width:100%;float:left;">

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

            </div>

        }

    </div>

    <br />

    <div id="divAjaxStatus">

    </div>

</div>

 

Now your solution explorer looks like this:

Ajax Helper in Asp.Net Mvc 4

Output

Now run the application

Ajax Helper in Asp.Net Mvc 4

Fill the form with the desired values like this:

Ajax Helper in Asp.Net Mvc 4

And click on Submit button:

Ajax Helper in Asp.Net Mvc 4

 


Don't want to miss updates? Please click the below button!

Follow MindStick