---
title: "Jquery Ajax in Asp.Net Mvc 4"  
description: "In this article, I’m explaining jquery ajax in asp.net mvc 4 and how to implement it in our project and how to call a controller action method using a"  
author: "Sumit Kesarwani"  
published: 2014-08-21  
updated: 2019-09-07  
canonical: https://www.mindstick.com/articles/1474/jquery-ajax-in-asp-dot-net-mvc-4  
category: "asp.net mvc"  
tags: ["asp.net mvc"]  
reading_time: 3 minutes  

---

# Jquery Ajax in Asp.Net Mvc 4

In this article, I’m explaining jquery ajax in asp.net mvc 4 and how to implement it in our project and how to call a [controller action](https://www.mindstick.com/forum/12712/autocomplete-controller-action-not-being-called) method using ajax. AJAX is an acronym standing for [Asynchronous JavaScript](https://www.mindstick.com/forum/156513/asynchronous-javascript-function) and XML and this [technology help us](https://answers.mindstick.com/qa/94311/how-does-medical-technology-help-us) to load [data from the server](https://www.mindstick.com/forum/156656/fetch-the-json-data-from-the-server-through-jquery) without a browser page refresh. JQuery is a great tool which provides a rich set of AJAX methods to develop [next generation](https://www.mindstick.com/articles/341550/the-mind-blowing-next-generation-innovations-in-assistive-technology-bridging-the-career-gaps) [web application](https://www.mindstick.com/articles/13069/progressive-web-application-pwas-all-you-need-to-know-about). It is very easy to load any static or dynamic [data using JQuery](https://www.mindstick.com/forum/156633/add-or-remove-data-using-jquery) AJAX. Example Step 1 First create a table named “Customer” in the database like this:

| ![Jquery Ajax in Asp.Net Mvc 4](http://www.mindstick.com/MindStickArticle/dfde3135-04c2-40e4-8503-04132bf02f6d/Images/image001.png) ##### 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](https://www.mindstick.com/articles/17/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: ![Jquery Ajax in Asp.Net Mvc 4](http://www.mindstick.com/MindStickArticle/dfde3135-04c2-40e4-8503-04132bf02f6d/Images/image003.png) ##### Output Now run the application ![Jquery Ajax in Asp.Net Mvc 4](http://www.mindstick.com/MindStickArticle/dfde3135-04c2-40e4-8503-04132bf02f6d/Images/image005.png) Fill the form with desired values like this: ![Jquery Ajax in Asp.Net Mvc 4](http://www.mindstick.com/MindStickArticle/dfde3135-04c2-40e4-8503-04132bf02f6d/Images/image007.png) And click on [Submit button](https://www.mindstick.com/forum/130/its-possible-without-submit-button): ![Jquery Ajax in Asp.Net Mvc 4](http://www.mindstick.com/MindStickArticle/dfde3135-04c2-40e4-8503-04132bf02f6d/Images/image009.png) \ |
| --- |

---

Original Source: https://www.mindstick.com/articles/1474/jquery-ajax-in-asp-dot-net-mvc-4

Copyright © MindStick Software Pvt. Ltd. This Markdown version is provided for developers, AI systems, and offline reading.