articles

Home / DeveloperSection / Articles / The Ajax Helper tools and Controls in Asp.Net MVC 4

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

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

Sumit Kesarwani8940 21-Aug-2014

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:

      The Ajax Helper tools and Controls 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 { 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>

       Now your solution explorer looks like this

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

      Output

      Now run the application

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

      Fill the form with the desired values like this:

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

      And click on Submit button:

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


      Updated 28-Nov-2019

      Leave Comment

      Comments

      Liked By