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

Introduction

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.

• Part 1 : Perform read functionality of CRUD Operation.
• Part 2 : Perform create and update functionality of CRUD Operation.
• Part 3 : Perform delete functionality of CRUD Operation.

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

Contacts

Countries

States

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
{
    [MetadataType(typeof(ContactMetaData))]
    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")]
        [Display(Name="Country")]
        public int CountryID { get; set; }
 
        [Required(ErrorMessage="State required")]
        [Display(Name="State")]
        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
    LoadContacts();
});
function LoadContacts() {
    $('#update_panel').html('Loading Data...');
 
    $.ajax({
        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>";
                $data.append(header);
 
                $.each(d, function (i, row) {
                    var $row = $('<tr/>');
                    $row.append($('<td/>').html(row.ContactPerson));
                    $row.append($('<td/>').html(row.ContactNo));
                    $row.append($('<td/>').html(row.CountryName));
                    $row.append($('<td/>').html(row.StateName));
                    $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>"));
                    $data.append($row);
                });
 
                $('#update_panel').html($data);
            }
            else {
                var $noData = $('<div/>').html('No Data Found!');
                $('#update_panel').html($noData);
            }
        },
        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">
 
</div>
@* Add Jquery UI Css *@
<link rel="stylesheet" href="//code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css" />
<style>
/*This is optional, I have added this for make looks good*/
    html, body,footer, #body {
        background-color:#fff;
    }
       .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;
        }
        .ui-dialog{
            webkit-box-shadow: 0 5px 15px rgba(0,0,0,.5);
            box-shadow: 0 5px 15px rgba(0,0,0,.5);
        }
    h2 {
        margin-top:0px;
        font-size:30px;
    }
    
    .success {
        color:green;
    }
    .failed {
        color:red;
    }
 
</style>
@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
                        {
                            a,
                            b.CountryName,
                            c.StateName
                        });
        if (contacts != null)
        {
            all = new List<Contact>();
            foreach (var i in contacts)
            {
                Contact con = i.a;
                con.CountryName = i.CountryName;
                con.StateName = i.StateName;
                all.Add(con);
            }
        }
    }
 
    return new JsonResult { Data = all, JsonRequestBehavior = JsonRequestBehavior.AllowGet };
}
                

Step-13: Run Application.