Hi everyone in this post I’m explaining about woring with ajax in asp.net mvc.

 If you want to learn more about model read my previous post Working With Model in MVC4

Description:

In this post I’ll teach you post data using ajax form without page refreshing. Firstly I explain about ajax. In this article we will learn one very important concept in ajax() functionality. In day-to-day project development the common task is to submit form data to the server, in other words in the broad sense, "save user's data to server".  The data sending or data passing operation can be done in various ways, we can take data from an individual control and form it in JSON format or we can serialize an entire form's data and send it to the server.

AJAX:

AJAX (Asynchronous javascript and xml) is used basically exchange data with a server and updating parts of web page without reloading whole page. Ajax is make our site very fast and more interactive web application with the help of xml, html, css and javascript.

Conventional web applications transmit information to and from the sever using synchronous requests. It means you fill out a form, hit submit, and get directed to a new page with new information from the server.

With AJAX, when you hit submit, JavaScript will make a request to the server, interpret the results, and update the current screen. In the purest sense, the user would never know that anything was even transmitted to the server.

XML is commonly used as the format for receiving server data, although any format, including plain text, can be used.

AJAX is a web browser technology independent of web server software.

 Lets start:

Step 1:  Create database and table like this

CREATE TABLE Customer
(
      CustomerId INT IDENTITY(1,1)PRIMARY KEY,
      CustomerName VARCHAR(200),
      CompanyName VARCHAR(200),
      Address VARCHAR(100),
      City VARCHAR(100),
      PostalCode VARCHAR(100),
      Country VARCHAR(100),
      Phone VARCHAR(100),
      Fax VARCHAR(100)
)
 

Step 2: Open visual studio >> File >> New Project >> ASP.NET MVC 4 Web Application

Give the application name and click ok after click ok open a new window and select project type empty.

Step 3:  Now install entity frame work  from Manage NuGet Package.

Step 4:  Now add .edmx file in model folder for use db first approach learn more about db first approach read my previous post Crud operation in MVC using DB First-Approach. 

Step 4:  Download these liberary.

<linkhref="@Url.Content("~/Content/bootstrap-3.3.2-dist/css/bootstrap.min.css")"rel="stylesheet"/>
<linkhref="@Url.Content("~/Content/bootstrap-3.3.2-dist/css/bootstrap-theme.min.css")"rel="stylesheet"/>
<linkhref="@Url.Content("~/Content/bootstrap-3.3.2-dist/css/font-awesome.min.css")"rel="stylesheet"/>
<scriptsrc="@Url.Content("~/Script/jquery-2.1.3.min.js")"></script>
<scriptsrc="@Url.Content("~/Script/bootstrap-3.3.2-dist/js/bootstrap.min.js")"></script>
<scriptsrc="@Url.Content("~/Script/jquery.unobtrusive-ajax.min.js")"></script>

Step 5:  Add HomeController

using Asp.NetAjaxSample.Models;
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.Mvc;
 
namespace Asp.NetAjaxSample.Controllers
{
    publicclassHomeController : Controller
    {
        //
        // GET: /Home/
        MyDBEntities db = newMyDBEntities();
 
        publicActionResult Index()
        {
            return View();
        }
 
        [HttpPost]
        publicActionResult Save(Customer model)
        {
            db.Customers.Add(model);
            db.SaveChanges();
            ModelState.Clear();
            return View(newCustomer());
        }
 
    }
}

Step 6:  Add Index View

@model Asp.NetAjaxSample.Models.Customer
@{
    ViewBag.Title = "Index";
}
 
<linkhref="@Url.Content("~/Content/bootstrap-3.3.2-dist/css/bootstrap.min.css")"rel="stylesheet"/>
<linkhref="@Url.Content("~/Content/bootstrap-3.3.2-dist/css/bootstrap-theme.min.css")"rel="stylesheet"/>
<linkhref="@Url.Content("~/Content/bootstrap-3.3.2-dist/css/font-awesome.min.css")"rel="stylesheet"/>
<scriptsrc="@Url.Content("~/Script/jquery-2.1.3.min.js")"></script>
<scriptsrc="@Url.Content("~/Script/bootstrap-3.3.2-dist/js/bootstrap.min.js")"></script>
<scriptsrc="@Url.Content("~/Script/jquery.unobtrusive-ajax.min.js")"></script>
 
 
<divclass="clearfix">&nbsp;</div>
<divclass="clearfix">&nbsp;</div>
<divclass="clearfix">&nbsp;</div>
<divclass="container">
    <divclass="row">
        <divclass="col-md-6 col-md-offset-3 well">
            @using (Ajax.BeginForm("Save","Home", newAjaxOptions{ HttpMethod = "POST",UpdateTargetId = "result"}))
            {
                <divid="result"></div>
                    <h2class="text-center text-priamry">Register</h2>
                    <divclass="col-md-12">
                        <divclass="form-group">
                            <divclass="input-group">
                                <spanclass="input-group-addon"><iclass="fa fa-user"></i></span>
                                                                @Html.TextBoxFor(m=> m.CustomerName, new { @class = "form-control", @placeholder = "Customer Name"})
                            </div>
                        </div>
                    </div>
                    <divclass="col-md-12">
                        <divclass="form-group">
                            <divclass="input-group">
                                <spanclass="input-group-addon"><iclass="fa fa-medium"></i></span>
                                
                                @Html.TextBoxFor(m => m.CompanyName, new { @class = "form-control", @placeholder = "Company Name"})
                            </div>
                        </div>
                    </div>
                    <divclass="col-md-12">
                        <divclass="form-group">
                            <divclass="input-group">
                                <spanclass="input-group-addon"><iclass="fa fa-location-arrow"></i></span>
                                
                                @Html.TextBoxFor(m=> m.Address, new { @class = "form-control",@placeholder = "Address"})
                            </div>
                        </div>
                    </div>
                    <divclass="col-md-12">
                        <divclass="form-group">
                            <divclass="input-group">
                                <spanclass="input-group-addon"><iclass="fa fa-map-marker"></i></span>
                                
                                @Html.TextBoxFor(m=> m.City, new { @class = "form-control",@placeholder = "City" })
                            </div>
                        </div>
                    </div>
                    <divclass="col-md-12">
                        <divclass="form-group">
                            <divclass="input-group">
                                <spanclass="input-group-addon"><iclass="fa fa-pinterest-p"></i></span>
                               
                                @Html.TextBoxFor(m => m.PostalCode, new { @class = "form-control",@placeholder = "Postal Code" })
                            </div>
                        </div>
                    </div>
                    <divclass="col-md-12">
                        <divclass="form-group">
                            <divclass="input-group">
                                <spanclass="input-group-addon"><iclass="fa fa-flag-checkered"></i></span>
                               
                                @Html.TextBoxFor(m => m.Country, new { @class = "form-control",@placeholder = "Country"})
                            </div>
                        </div>
                    </div>
                    <divclass="col-md-12">
                        <divclass="form-group">
                            <divclass="input-group">
                                <spanclass="input-group-addon"><iclass="fa fa-phone"></i></span>
                               
                                @Html.TextBoxFor(m => m.Phone, new { @class = "form-control",@placeholder = "Phone No" })
                            </div>
                        </div>
                    </div>
                    <divclass="col-md-12">
                        <divclass="form-group">
                            <divclass="input-group">
                                <spanclass="input-group-addon"><iclass="fa fa-fax"></i></span>
                             
                                @Html.TextBoxFor(m => m.Fax, new { @class = "form-control", @placeholder = "Fax" })
                            </div>
                        </div>
                    </div>
                    <divclass="col-md-12">
                        <inputtype="submit"value="Register"id="register"class="btn btn-success form-control"/>
                    </div>
            }
        </div>
    </div>
</div>

 Output:

1.       Now our table is empty

2.       Now Add a Record

3.       After add record

 In my next post I’ll explain about Crud Operation in MVC using Ajax