The Ajax Helper tools and Controls in Asp.Net MVC 4

Here, In this article, I’m trying to explain the ajax helper in asp.net MVC 4 and how it should be implemented 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 a user clicks OK on the confirmation dialog the Ajax call is made.
OnBegin	The OnBegin property specifies the name of a JavaScript function that is called at the beginning of the Ajax request.
OnComplete	The OnComplete property specifies the name of a JavaScript function that is called at the end of the Ajax request.
OnSuccess	The OnSuccess property specifies the 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 messages 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:

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 { get; set; }
        public string Name { get; set; }
        public string Address { get; set; }
        public string ContactNo { get; set; }
    }
}

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 { get; set; }
    }
}

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="width: 100px; float: left;">
                    @Html.LabelFor(m => m.Name)
                </div>
                <div style="width: 200px; float: left;">
                    @Html.TextBoxFor(m => m.Name)
                </div>
            </div>
            <div style="width:100%;float:left;">
                <div style="width: 100px; float: left;">
                    @Html.LabelFor(m => m.Address)
                </div>
                <div style="width: 200px; float: left;">
                    @Html.TextBoxFor(m => m.Address)
                </div>
            </div>
            <div style="width:100%;float:left;">
                <div style="width: 100px; float: left;">
                    @Html.LabelFor(m => m.ContactNo)
                </div>
                <div style="width: 200px; float: left;">
                    @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>

articles

The Ajax Helper tools and Controls in Asp.Net MVC 4