Step 2

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

using System;
using System.Collections.Generic;
using System.ComponentModel.DataAnnotations;
using System.ComponentModel.DataAnnotations.Schema;
using System.Linq;
using System.Web;
 
namespace JQueryAjaxMvcApp.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 2-

Now add another class named “CustomerContext” to the project like this:

using System;
using System.Collections.Generic;
using System.Data.Entity;
using System.Linq;
using System.Web;
 
namespace JQueryAjaxMvcApp.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 3-

Now add a controller named “HomeController” to the project like this:

using JQueryAjaxMvcApp.Models;
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.Mvc;
 
namespace JQueryAjaxMvcApp.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 RedirectToAction("Index");
            }
            return View();
        }
 
        public JsonResult getRecords()
        {
            return Json(db.Customers.ToList(),JsonRequestBehavior.AllowGet);
        }
 
    }
}

Step 5

Now add a view named “Index” and write the below code in it:

@model JQueryAjaxMvcApp.Models.Customer
 
@{
    ViewBag.Title = "Index";
}
 
<script src="~/Scripts/jquery-1.8.2.min.js"></script>
<script>
    $(function () {
        $.ajax({
            type: "POST",
            url: "/Home/getRecords",
            success: function (data) {
                $.each(data, function (index, value) {
                    $('#divRecordList').append("<li>" +
                        value.Name + " " + value.Address + " " + value.ContactNo
                        + "</li>");
 
                });
            }
        });
    });
</script>
 
 
<div>
    <div>
        @using (Html.BeginForm("Index", "Home", FormMethod.Post))
        {
            <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>
   
 
    <div style="margin-top:20px;">
        <h2>Customer Lists</h2>
       <ul id="divRecordList">
 
       </ul>
    </div>
 
</div>

Now your solution explorer will look like this:

Output

Now run the application

Fill the form with desired values like this:

And click on Submit button: