Part 1 - How to Basic CRUD operations using Jquery ajax and modal popup in ASP.NET MVC4.


In this post, I am going to implement Basic CRUD (Create, Read, Update, Delete) operations using Jquery ajax and modal popup in ASP.NET MVC4 application.
I have split the entire application split into following 3 parts for making things more simple and understandable specially for beginners.

Step - 1 : Create New Project.

Go to File > New > Project > Select asp.net MVC4 web application > Entry Application Name > Click OK > Select Basic Application > Select view engine Razor > OK

Step-2: Add a Database.

Go to Solution Explorer > Right Click on App_Data folder > Add > New item > Select SQL Server Database Under Data > Enter Database name > Add.

Step-3: Create 3 tables for store Country, States and Contact information.

Open Database > Right Click on Table > Add New Table > Add Columns > Save > Enter table name > Ok.

In this example, I have used 3 tables as below



Step-4: Add Entity Data Model.

Go to Solution Explorer > Right Click on Project name form Solution Explorer > Add > New item > Select ADO.net Entity Data Model under data > Enter model name > Add.
A popup window will come (Entity Data Model Wizard) > Select Generate from database > Next >
Chose your data connection > select your database > next > Select tables > enter Model Namespace > Finish.

Step-5: Create a Folder

Here I have created a folder Named "ExtendedClass" in which we will create a class
Go to Solution Explorer > Right Click on Project name form Solution Explorer > Add > New Folder > Rename Folder.

Step-6: Create a (partial) Class for extend 2 fileds CountryName and StateName. Here I have also added MetaData Class for Apply Validation on Contact Model.

Here I have created a (partial) class named "Contact"
Go to Solution Explorer > Right Click on the Folder > Add > Class > Enter class name > Add.

[N:B: I have changed namespace of the class "MVCPopupCRUD.ExtendedClass" to "MVCPopupCRUD" and make it partial class]
using System;
using System.Collections.Generic;
using System.ComponentModel.DataAnnotations;
using System.Linq;
using System.Web;

namespace MVCPopupCRUD
    public partial class Contact
        public string CountryName { get; set; }
        public string StateName { get; set; }

    public class ContactMetaData
        [Required(ErrorMessage= "Contact Name required", AllowEmptyStrings = false)]
        [Display(Name="Contact Person")]
        public string ContactPerson { get; set; }

        [Required(ErrorMessage="Contact No required", AllowEmptyStrings=false)]
        [Display(Name="Contact No")]
        public string ContactNo { get; set; }

        [Required(ErrorMessage="Country required")]
        public int CountryID { get; set; }

        [Required(ErrorMessage="State required")]
        public int StateID { get; set; }

Step-7: Add a javascript file.

Go to Solution Explorer > Right Click on Scripts folder form Solution Explorer > Add new item...>Select JavaScript File> Enter file name (here "dotnetawesome.CRUDContacts.js") > Add.
Here we will write js code for open popup, create new contact, read, update and delete existing contact(s)

Step-8: Add a javascript function for show contact list . (read operation of CRUD)

$(document).ready(function () {

    //Populate Contact
function LoadContacts() {
    $('#update_panel').html('Loading Data...');

        url: '/home/GetContacts',
        type: 'GET',
        dataType: 'json',
        success: function (d) {
            if (d.length > 0) {
                var $data = $('<table></table>').addClass('table table-responsive table-striped');
                var header = "<thead><tr><th>Contact Person</th><th>Contact No</th><th>Country</th><th>State</th><th></th></tr></thead>";

                $.each(d, function (i, row) {
                    var $row = $('<tr/>');
                    $row.append($('<td/>').html("<a href='/home/Save/" + row.ContactID + "' class='popup'>Edit</a>&nbsp;|&nbsp;<a href='/home/Delete/" + row.ContactID + "' class='popup'>Delete</a>"));

            else {
                var $noData = $('<div/>').html('No Data Found!');
        error: function () {
            alert('Error! Please try again.');


Step-9: Add a new Controller.

Go to Solution Explorer > Right Click on Controllers folder form Solution Explorer > Add > Controller > Enter Controller name (Home) > Select Templete "empty MVC Controller"> Add.

Step-10: Add new action into your controller for get the view for show contact list.

Here I have used "Index" Action for show data. Please write this following code
public ActionResult Index()
    return View();

Step-11: Add view for the Action & design.

Right Click on Action Method (here right click on index action) > Add View... > Enter View Name > Select View Engine (Razor) > Add. Complete View
    ViewBag.Title = "Contact List";

<h2>Contact List</h2>
@Html.ActionLink("Add New Contact","Save","Home",null,new{@style="font-size:22px;", @class="popup"})

<div id="update_panel">

@* Add Jquery UI Css *@
<link rel="stylesheet" href="//code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css" />
/*This is optional, I have added this for make looks good*/
    html, body,footer, #body {
       .ui-widget-header {
            border: none !important;
            background: none !important;
            color: #222222;
            font-weight: bold;
        .ui-state-default, .ui-state-hover {
          border: none !important;
          background: none !important;
            webkit-box-shadow: 0 5px 15px rgba(0,0,0,.5);
            box-shadow: 0 5px 15px rgba(0,0,0,.5);
    h2 {
    .success {
    .failed {

@section Scripts{
    @*//Add Jquery UI JS*@
    <script src="//code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
    <script src="~/Scripts/dotnetawesome.CRUDContacts.js"></script>
Optional: Here I have added Bootstrap css in the layout page for Responsive design.

Step-12: Add another action into your controller for return contact list as Json Data

Here I have used "GetContacts" Action for fetch data. Please write this following code
public JsonResult GetContacts()
    List<Contact> all = null;

    using (MyDatabaseEntities dc = new MyDatabaseEntities())
        var contacts = (from a in dc.Contacts
                        join b in dc.Countries on a.CountryID equals b.CountryID
                        join c in dc.States on a.StateID equals c.StateID
                        select new
        if (contacts != null)
            all = new List<Contact>();
            foreach (var i in contacts)
                Contact con = i.a;
                con.CountryName = i.CountryName;
                con.StateName = i.StateName;

    return new JsonResult { Data = all, JsonRequestBehavior = JsonRequestBehavior.AllowGet };

Step-13: Run Application.

Hello ! My name is Sourav Mondal. I am a software developer working in Microsoft .NET technologies since 2010.

I like to share my working experience, research and knowledge through my site.

I love developing applications in Microsoft Technologies including Asp.Net webforms, mvc, winforms, c#.net, sql server, entity framework, Ajax, Jquery, web api, web service and more.