Learn 📖 Modal Popup Using MVC And Entity Framework In Depth

Introduction

 

In this article, we will learn to implement modal popup for CRUD operations using MVC and Entity Framework. This is a single page for multiple operations using jQuery AJAX.

 

Prerequisites

• Visual Studio 2017
• SQL Server

Note

Before going through this session, please visit my previous articles related to Angular 7 applications.

• Article On jQuery
• Article On MVC

Step 1

 

Create three tables with the script as mentioned below.

USE [SatyaDB]
GO
/****** Object:  Table [dbo].[Contacts]    Script Date: 15-08-2019 21:35:17 ******/
SET ANSI_NULLS ON
GO
SET QUOTED_IDENTIFIER ON
GO
CREATE TABLE [dbo].[Contacts](
    [ContactID] [int] IDENTITY(1,1) NOT NULL,
    [ContactPerson] [varchar](100) NOT NULL,
    [ContactNo] [varchar](20) NOT NULL,
    [CountryID] [int] NOT NULL,
    [StateID] [int] NOT NULL,
PRIMARY KEY CLUSTERED
(
    [ContactID] ASC
)WITH (PAD_INDEX = OFF, STATISTICS_NORECOMPUTE = OFF, IGNORE_DUP_KEY = OFF, ALLOW_ROW_LOCKS = ON, ALLOW_PAGE_LOCKS = ON) ON [PRIMARY]
) ON [PRIMARY]
GO
/****** Object:  Table [dbo].[Country]    Script Date: 15-08-2019 21:35:19 ******/
SET ANSI_NULLS ON
GO
SET QUOTED_IDENTIFIER ON
GO
CREATE TABLE [dbo].[Country](
    [CountryID] [int] IDENTITY(1,1) NOT NULL,
    [CountryName] [varchar](100) NOT NULL,
PRIMARY KEY CLUSTERED
(
    [CountryID] ASC
)WITH (PAD_INDEX = OFF, STATISTICS_NORECOMPUTE = OFF, IGNORE_DUP_KEY = OFF, ALLOW_ROW_LOCKS = ON, ALLOW_PAGE_LOCKS = ON) ON [PRIMARY]
) ON [PRIMARY]
GO
/****** Object:  Table [dbo].[State]    Script Date: 15-08-2019 21:35:19 ******/
SET ANSI_NULLS ON
GO
SET QUOTED_IDENTIFIER ON
GO
CREATE TABLE [dbo].[State](
    [StateID] [int] IDENTITY(1,1) NOT NULL,
    [CountryID] [int] NOT NULL,
    [StateName] [varchar](100) NOT NULL,
PRIMARY KEY CLUSTERED
(
    [StateID] ASC
)WITH (PAD_INDEX = OFF, STATISTICS_NORECOMPUTE = OFF, IGNORE_DUP_KEY = OFF, ALLOW_ROW_LOCKS = ON, ALLOW_PAGE_LOCKS = ON) ON [PRIMARY]
) ON [PRIMARY]
GO

Step 2

 

Enter some records to test it in the browser including the country and state table. I have implemented cascading dropdown method using country and state table in this application. 

USE [SatyaDB]
GO
SET IDENTITY_INSERT [dbo].[Contacts] ON
GO
INSERT [dbo].[Contacts] ([ContactID], [ContactPerson], [ContactNo], [CountryID], [StateID]) VALUES (2, N'Satya', N'8765858485', 4, 88)
GO
INSERT [dbo].[Contacts] ([ContactID], [ContactPerson], [ContactNo], [CountryID], [StateID]) VALUES (3, N'Kulu', N'6478389999', 4, 25)
GO
INSERT [dbo].[Contacts] ([ContactID], [ContactPerson], [ContactNo], [CountryID], [StateID]) VALUES (5, N'Satyaprakash Samantaray1', N'8764637375', 4, 137)
GO
SET IDENTITY_INSERT [dbo].[Contacts] OFF
GO
SET IDENTITY_INSERT [dbo].[Country] ON
GO
INSERT [dbo].[Country] ([CountryID], [CountryName]) VALUES (1, N'Brazil')
GO
INSERT [dbo].[Country] ([CountryID], [CountryName]) VALUES (2, N'China')
GO
INSERT [dbo].[Country] ([CountryID], [CountryName]) VALUES (3, N'France')
GO
INSERT [dbo].[Country] ([CountryID], [CountryName]) VALUES (4, N'India')
GO
INSERT [dbo].[Country] ([CountryID], [CountryName]) VALUES (5, N'USA')
GO
SET IDENTITY_INSERT [dbo].[Country] OFF
GO
SET IDENTITY_INSERT [dbo].[State] ON
GO
INSERT [dbo].[State] ([StateID], [CountryID], [StateName]) VALUES (1, 5, N'California')
GO
INSERT [dbo].[State] ([StateID], [CountryID], [StateName]) VALUES (2, 2, N'Beijing')
GO
INSERT [dbo].[State] ([StateID], [CountryID], [StateName]) VALUES (3, 5, N'Iowa')
GO
INSERT [dbo].[State] ([StateID], [CountryID], [StateName]) VALUES (4, 5, N'New York')
GO
INSERT [dbo].[State] ([StateID], [CountryID], [StateName]) VALUES (5, 2, N'Hebei')
GO
INSERT [dbo].[State] ([StateID], [CountryID], [StateName]) VALUES (6, 2, N'Jiangsu')
GO
INSERT [dbo].[State] ([StateID], [CountryID], [StateName]) VALUES (7, 5, N'New Jersey')
GO
INSERT [dbo].[State] ([StateID], [CountryID], [StateName]) VALUES (8, 5, N'Massachusetts')
GO
INSERT [dbo].[State] ([StateID], [CountryID], [StateName]) VALUES (9, 5, N'Connecticut')
GO
INSERT [dbo].[State] ([StateID], [CountryID], [StateName]) VALUES (10, 2, N'Guangdong')
GO
INSERT [dbo].[State] ([StateID], [CountryID], [StateName]) VALUES (11, 5, N'Florida')
GO
INSERT [dbo].[State] ([StateID], [CountryID], [StateName]) VALUES (12, 5, N'Texas')
GO
INSERT [dbo].[State] ([StateID], [CountryID], [StateName]) VALUES (13, 5, N'Armed Forces US')
GO
INSERT [dbo].[State] ([StateID], [CountryID], [StateName]) VALUES (14, 5, N'Tennessee')
GO
INSERT [dbo].[State] ([StateID], [CountryID], [StateName]) VALUES (15, 5, N'Kentucky')
GO
INSERT [dbo].[State] ([StateID], [CountryID], [StateName]) VALUES (16, 3, N'Ile-de-3nce')
GO
INSERT [dbo].[State] ([StateID], [CountryID], [StateName]) VALUES (17, 5, N'Georgia')
GO
INSERT [dbo].[State] ([StateID], [CountryID], [StateName]) VALUES (18, 1, N'Rio de Janeiro')
GO
INSERT [dbo].[State] ([StateID], [CountryID], [StateName]) VALUES (19, 5, N'Illinois')
GO
INSERT [dbo].[State] ([StateID], [CountryID], [StateName]) VALUES (20, 1, N'Ceara')
GO
INSERT [dbo].[State] ([StateID], [CountryID], [StateName]) VALUES (21, 5, N'Colorado')
GO
INSERT [dbo].[State] ([StateID], [CountryID], [StateName]) VALUES (22, 2, N'Zhejiang')
GO
INSERT [dbo].[State] ([StateID], [CountryID], [StateName]) VALUES (23, 5, N'Utah')
GO
INSERT [dbo].[State] ([StateID], [CountryID], [StateName]) VALUES (24, 2, N'Liaoning')
GO
INSERT [dbo].[State] ([StateID], [CountryID], [StateName]) VALUES (25, 4, N'Haryana')
GO
INSERT [dbo].[State] ([StateID], [CountryID], [StateName]) VALUES (26, 5, N'Maryland')
GO
INSERT [dbo].[State] ([StateID], [CountryID], [StateName]) VALUES (27, 2, N'Shanghai')
GO
INSERT [dbo].[State] ([StateID], [CountryID], [StateName]) VALUES (28, 2, N'Tianjin')
GO
INSERT [dbo].[State] ([StateID], [CountryID], [StateName]) VALUES (29, 5, N'South Carolina')
GO
INSERT [dbo].[State] ([StateID], [CountryID], [StateName]) VALUES (30, 5, N'Montana')
GO
INSERT [dbo].[State] ([StateID], [CountryID], [StateName]) VALUES (31, 5, N'Louisiana')
GO
INSERT [dbo].[State] ([StateID], [CountryID], [StateName]) VALUES (32, 2, N'Fujian')
GO
INSERT [dbo].[State] ([StateID], [CountryID], [StateName]) VALUES (33, 1, N'Santa Catarina')
GO
INSERT [dbo].[State] ([StateID], [CountryID], [StateName]) VALUES (34, 1, N'Espirito Santo')
GO
INSERT [dbo].[State] ([StateID], [CountryID], [StateName]) VALUES (35, 5, N'Washington')
GO
INSERT [dbo].[State] ([StateID], [CountryID], [StateName]) VALUES (36, 4, N'Andhra Pradesh')
GO
INSERT [dbo].[State] ([StateID], [CountryID], [StateName]) VALUES (37, 5, N'Pennsylvania')
GO
INSERT [dbo].[State] ([StateID], [CountryID], [StateName]) VALUES (38, 2, N'Guangxi')
GO
INSERT [dbo].[State] ([StateID], [CountryID], [StateName]) VALUES (39, 5, N'North Carolina')
GO
INSERT [dbo].[State] ([StateID], [CountryID], [StateName]) VALUES (40, 2, N'Shandong')
GO
INSERT [dbo].[State] ([StateID], [CountryID], [StateName]) VALUES (41, 2, N'Chongqing')
GO
INSERT [dbo].[State] ([StateID], [CountryID], [StateName]) VALUES (42, 5, N'Michigan')
GO
INSERT [dbo].[State] ([StateID], [CountryID], [StateName]) VALUES (43, 2, N'Hubei')
GO
INSERT [dbo].[State] ([StateID], [CountryID], [StateName]) VALUES (44, 4, N'Delhi')
GO
INSERT [dbo].[State] ([StateID], [CountryID], [StateName]) VALUES (45, 5, N'Arkansas')
GO
INSERT [dbo].[State] ([StateID], [CountryID], [StateName]) VALUES (46, 5, N'Wisconsin')
GO
INSERT [dbo].[State] ([StateID], [CountryID], [StateName]) VALUES (47, 3, N'Midi-Pyrenees')
GO
INSERT [dbo].[State] ([StateID], [CountryID], [StateName]) VALUES (48, 3, N'Picardie')
GO
INSERT [dbo].[State] ([StateID], [CountryID], [StateName]) VALUES (49, 1, N'Bahia')
GO
INSERT [dbo].[State] ([StateID], [CountryID], [StateName]) VALUES (50, 2, N'Heilongjiang')
GO
INSERT [dbo].[State] ([StateID], [CountryID], [StateName]) VALUES (51, 4, N'Tamil Nadu')
GO
INSERT [dbo].[State] ([StateID], [CountryID], [StateName]) VALUES (52, 5, N'Ohio')
GO
INSERT [dbo].[State] ([StateID], [CountryID], [StateName]) VALUES (53, 5, N'New Mexico')
GO
INSERT [dbo].[State] ([StateID], [CountryID], [StateName]) VALUES (54, 5, N'Kansas')
GO
INSERT [dbo].[State] ([StateID], [CountryID], [StateName]) VALUES (55, 5, N'Oregon')
GO
INSERT [dbo].[State] ([StateID], [CountryID], [StateName]) VALUES (56, 4, N'Uttar Pradesh')
GO
INSERT [dbo].[State] ([StateID], [CountryID], [StateName]) VALUES (57, 5, N'Ne1ska')
GO
INSERT [dbo].[State] ([StateID], [CountryID], [StateName]) VALUES (58, 5, N'West Virginia')
GO
INSERT [dbo].[State] ([StateID], [CountryID], [StateName]) VALUES (59, 5, N'Virginia')
GO
INSERT [dbo].[State] ([StateID], [CountryID], [StateName]) VALUES (60, 5, N'Missouri')
GO
INSERT [dbo].[State] ([StateID], [CountryID], [StateName]) VALUES (61, 5, N'Mississippi')
GO
INSERT [dbo].[State] ([StateID], [CountryID], [StateName]) VALUES (62, 5, N'Rhode Island')
GO
INSERT [dbo].[State] ([StateID], [CountryID], [StateName]) VALUES (63, 1, N'Sao Paulo')
GO
INSERT [dbo].[State] ([StateID], [CountryID], [StateName]) VALUES (64, 2, N'Shanxi')
GO
INSERT [dbo].[State] ([StateID], [CountryID], [StateName]) VALUES (65, 4, N'Karnataka')
GO
INSERT [dbo].[State] ([StateID], [CountryID], [StateName]) VALUES (66, 2, N'Hunan')
GO
INSERT [dbo].[State] ([StateID], [CountryID], [StateName]) VALUES (67, 5, N'4iana')
GO
INSERT [dbo].[State] ([StateID], [CountryID], [StateName]) VALUES (68, 5, N'Oklahoma')
GO
INSERT [dbo].[State] ([StateID], [CountryID], [StateName]) VALUES (69, 5, N'Minnesota')
GO
INSERT [dbo].[State] ([StateID], [CountryID], [StateName]) VALUES (70, 5, N'Alabama')
GO
INSERT [dbo].[State] ([StateID], [CountryID], [StateName]) VALUES (71, 2, N'Hainan')
GO
INSERT [dbo].[State] ([StateID], [CountryID], [StateName]) VALUES (72, 5, N'Arizona')
GO
INSERT [dbo].[State] ([StateID], [CountryID], [StateName]) VALUES (73, 2, N'Sichuan')
GO
INSERT [dbo].[State] ([StateID], [CountryID], [StateName]) VALUES (74, 5, N'South Dakota')
GO
INSERT [dbo].[State] ([StateID], [CountryID], [StateName]) VALUES (75, 4, N'Maharashtra')
GO
INSERT [dbo].[State] ([StateID], [CountryID], [StateName]) VALUES (76, 5, N'Nevada')
GO
INSERT [dbo].[State] ([StateID], [CountryID], [StateName]) VALUES (77, 2, N'Henan')
GO
INSERT [dbo].[State] ([StateID], [CountryID], [StateName]) VALUES (78, 4, N'Kerala')
GO
INSERT [dbo].[State] ([StateID], [CountryID], [StateName]) VALUES (79, 5, N'New Hampshire')
GO
INSERT [dbo].[State] ([StateID], [CountryID], [StateName]) VALUES (80, 5, N'Maine')
GO
INSERT [dbo].[State] ([StateID], [CountryID], [StateName]) VALUES (81, 5, N'Hawaii')
GO
INSERT [dbo].[State] ([StateID], [CountryID], [StateName]) VALUES (82, 4, N'Chhattisgarh')
GO
INSERT [dbo].[State] ([StateID], [CountryID], [StateName]) VALUES (83, 2, N'Anhui')
GO
INSERT [dbo].[State] ([StateID], [CountryID], [StateName]) VALUES (84, 5, N'District of Columbia')
GO
INSERT [dbo].[State] ([StateID], [CountryID], [StateName]) VALUES (85, 5, N'Delaware')
GO
INSERT [dbo].[State] ([StateID], [CountryID], [StateName]) VALUES (86, 4, N'West Bengal')
GO
INSERT [dbo].[State] ([StateID], [CountryID], [StateName]) VALUES (87, 2, N'Shaanxi')
GO
INSERT [dbo].[State] ([StateID], [CountryID], [StateName]) VALUES (88, 4, N'Madhya Pradesh')
GO
INSERT [dbo].[State] ([StateID], [CountryID], [StateName]) VALUES (89, 4, N'Gujarat')
GO
INSERT [dbo].[State] ([StateID], [CountryID], [StateName]) VALUES (90, 3, N'3nche-Comte')
GO
INSERT [dbo].[State] ([StateID], [CountryID], [StateName]) VALUES (91, 5, N'Idaho')
GO
INSERT [dbo].[State] ([StateID], [CountryID], [StateName]) VALUES (92, 4, N'Rajasthan')
GO
INSERT [dbo].[State] ([StateID], [CountryID], [StateName]) VALUES (93, 2, N'Nei Mongol')
GO
INSERT [dbo].[State] ([StateID], [CountryID], [StateName]) VALUES (94, 3, N'Alsace')
GO
INSERT [dbo].[State] ([StateID], [CountryID], [StateName]) VALUES (95, 4, N'Orissa')
GO
INSERT [dbo].[State] ([StateID], [CountryID], [StateName]) VALUES (96, 2, N'Jilin')
GO
INSERT [dbo].[State] ([StateID], [CountryID], [StateName]) VALUES (97, 4, N'Jharkhand')
GO
INSERT [dbo].[State] ([StateID], [CountryID], [StateName]) VALUES (98, 4, N'Chandigarh')
GO
INSERT [dbo].[State] ([StateID], [CountryID], [StateName]) VALUES (99, 4, N'Punjab')
GO
INSERT [dbo].[State] ([StateID], [CountryID], [StateName]) VALUES (100, 3, N'Languedoc-Roussillon')
GO
INSERT [dbo].[State] ([StateID], [CountryID], [StateName]) VALUES (101, 4, N'Assam')
GO
INSERT [dbo].[State] ([StateID], [CountryID], [StateName]) VALUES (102, 3, N'Centre')
GO
INSERT [dbo].[State] ([StateID], [CountryID], [StateName]) VALUES (103, 3, N'Champagne-Ardenne')
GO
INSERT [dbo].[State] ([StateID], [CountryID], [StateName]) VALUES (104, 3, N'Bretagne')
GO
INSERT [dbo].[State] ([StateID], [CountryID], [StateName]) VALUES (105, 3, N'Rhone-Alpes')
GO
INSERT [dbo].[State] ([StateID], [CountryID], [StateName]) VALUES (106, 3, N'Nord-Pas-de-Calais')
GO
INSERT [dbo].[State] ([StateID], [CountryID], [StateName]) VALUES (107, 3, N'Lorraine')
GO
INSERT [dbo].[State] ([StateID], [CountryID], [StateName]) VALUES (108, 1, N'Rio Grande do Sul')
GO
INSERT [dbo].[State] ([StateID], [CountryID], [StateName]) VALUES (109, 3, N'Provence-Alpes-Cote d''Azur')
GO
INSERT [dbo].[State] ([StateID], [CountryID], [StateName]) VALUES (110, 1, N'Minas Gerais')
GO
INSERT [dbo].[State] ([StateID], [CountryID], [StateName]) VALUES (111, 3, N'Limousin')
GO
INSERT [dbo].[State] ([StateID], [CountryID], [StateName]) VALUES (112, 2, N'Guizhou')
GO
INSERT [dbo].[State] ([StateID], [CountryID], [StateName]) VALUES (113, 3, N'Haute-Normandie')
GO
INSERT [dbo].[State] ([StateID], [CountryID], [StateName]) VALUES (114, 3, N'Poitou-Charentes')
GO
INSERT [dbo].[State] ([StateID], [CountryID], [StateName]) VALUES (115, 5, N'Wyoming')
GO
INSERT [dbo].[State] ([StateID], [CountryID], [StateName]) VALUES (116, 4, N'Daman and Diu')
GO
INSERT [dbo].[State] ([StateID], [CountryID], [StateName]) VALUES (117, 1, N'Para')
GO
INSERT [dbo].[State] ([StateID], [CountryID], [StateName]) VALUES (118, 3, N'Basse-Normandie')
GO
INSERT [dbo].[State] ([StateID], [CountryID], [StateName]) VALUES (119, 4, N'Bihar')
GO
INSERT [dbo].[State] ([StateID], [CountryID], [StateName]) VALUES (120, 3, N'Aquitaine')
GO
INSERT [dbo].[State] ([StateID], [CountryID], [StateName]) VALUES (121, 1, N'Parana')
GO
INSERT [dbo].[State] ([StateID], [CountryID], [StateName]) VALUES (122, 3, N'Auvergne')
GO
INSERT [dbo].[State] ([StateID], [CountryID], [StateName]) VALUES (123, 1, N'Pernambuco')
GO
INSERT [dbo].[State] ([StateID], [CountryID], [StateName]) VALUES (124, 3, N'Pays de la Loire')
GO
INSERT [dbo].[State] ([StateID], [CountryID], [StateName]) VALUES (125, 1, N'Amazonas')
GO
INSERT [dbo].[State] ([StateID], [CountryID], [StateName]) VALUES (126, 1, N'Distrito Federal')
GO
INSERT [dbo].[State] ([StateID], [CountryID], [StateName]) VALUES (127, 5, N'North Dakota')
GO
INSERT [dbo].[State] ([StateID], [CountryID], [StateName]) VALUES (128, 3, N'Bourgogne')
GO
INSERT [dbo].[State] ([StateID], [CountryID], [StateName]) VALUES (129, 5, N'Vermont')
GO
INSERT [dbo].[State] ([StateID], [CountryID], [StateName]) VALUES (130, 1, N'Goias')
GO
INSERT [dbo].[State] ([StateID], [CountryID], [StateName]) VALUES (131, 4, N'Himachal Pradesh')
GO
INSERT [dbo].[State] ([StateID], [CountryID], [StateName]) VALUES (132, 1, N'Sergipe')
GO
INSERT [dbo].[State] ([StateID], [CountryID], [StateName]) VALUES (133, 5, N'Alaska')
GO
INSERT [dbo].[State] ([StateID], [CountryID], [StateName]) VALUES (134, 1, N'Mato Grosso do Sul')
GO
INSERT [dbo].[State] ([StateID], [CountryID], [StateName]) VALUES (135, 2, N'Yunnan')
GO
INSERT [dbo].[State] ([StateID], [CountryID], [StateName]) VALUES (136, 4, N'Uttarakhand')
GO
INSERT [dbo].[State] ([StateID], [CountryID], [StateName]) VALUES (137, 4, N'Meghalaya')
GO
INSERT [dbo].[State] ([StateID], [CountryID], [StateName]) VALUES (138, 2, N'Jiangxi')
GO
INSERT [dbo].[State] ([StateID], [CountryID], [StateName]) VALUES (139, 1, N'Rio Grande do Norte')
GO
INSERT [dbo].[State] ([StateID], [CountryID], [StateName]) VALUES (140, 1, N'Paraiba')
GO
INSERT [dbo].[State] ([StateID], [CountryID], [StateName]) VALUES (141, 1, N'Piaui')
GO
INSERT [dbo].[State] ([StateID], [CountryID], [StateName]) VALUES (142, 2, N'Gansu')
GO
INSERT [dbo].[State] ([StateID], [CountryID], [StateName]) VALUES (143, 4, N'Jammu and Kashmir')
GO
INSERT [dbo].[State] ([StateID], [CountryID], [StateName]) VALUES (144, 4, N'Goa')
GO
INSERT [dbo].[State] ([StateID], [CountryID], [StateName]) VALUES (145, 1, N'Maranhao')
GO
INSERT [dbo].[State] ([StateID], [CountryID], [StateName]) VALUES (146, 1, N'Mato Grosso')
GO
INSERT [dbo].[State] ([StateID], [CountryID], [StateName]) VALUES (147, 3, N'Corse')
GO
INSERT [dbo].[State] ([StateID], [CountryID], [StateName]) VALUES (148, 1, N'Alagoas')
GO
INSERT [dbo].[State] ([StateID], [CountryID], [StateName]) VALUES (149, 4, N'Puducherry')
GO
INSERT [dbo].[State] ([StateID], [CountryID], [StateName]) VALUES (150, 4, N'Manipur')
GO
INSERT [dbo].[State] ([StateID], [CountryID], [StateName]) VALUES (151, 1, N'Tocantins')
GO
INSERT [dbo].[State] ([StateID], [CountryID], [StateName]) VALUES (152, 1, N'Roraima')
GO
INSERT [dbo].[State] ([StateID], [CountryID], [StateName]) VALUES (153, 1, N'Rondonia')
GO
INSERT [dbo].[State] ([StateID], [CountryID], [StateName]) VALUES (154, 2, N'Xizang')
GO
INSERT [dbo].[State] ([StateID], [CountryID], [StateName]) VALUES (155, 2, N'Ningxia')
GO
INSERT [dbo].[State] ([StateID], [CountryID], [StateName]) VALUES (156, 2, N'Xinjiang')
GO
INSERT [dbo].[State] ([StateID], [CountryID], [StateName]) VALUES (157, 2, N'Qinghai')
GO
INSERT [dbo].[State] ([StateID], [CountryID], [StateName]) VALUES (158, 4, N'Mizoram')
GO
INSERT [dbo].[State] ([StateID], [CountryID], [StateName]) VALUES (159, 4, N'Dadra and Nagar Haveli')
GO
INSERT [dbo].[State] ([StateID], [CountryID], [StateName]) VALUES (160, 4, N'Arunachal Pradesh')
GO
INSERT [dbo].[State] ([StateID], [CountryID], [StateName]) VALUES (161, 4, N'Tripura')
GO
INSERT [dbo].[State] ([StateID], [CountryID], [StateName]) VALUES (162, 1, N'Amapa')
GO
INSERT [dbo].[State] ([StateID], [CountryID], [StateName]) VALUES (163, 1, N'Acre')
GO
INSERT [dbo].[State] ([StateID], [CountryID], [StateName]) VALUES (164, 4, N'Sikkim')
GO
INSERT [dbo].[State] ([StateID], [CountryID], [StateName]) VALUES (165, 4, N'Nagaland')
GO
SET IDENTITY_INSERT [dbo].[State] OFF
GO

Step 3

 

In this step, I have added an entity data model named "SatyaModalEntity.edmx". Follow the steps,

 

Go to Solution Explorer > right-click on the project name from Solution Explorer.

Go to Add > New item > select ADO.NET Entity Data Model under data.

Enter the model name > Add.

A popup window will appear (Entity Data Model Wizard).

Select "Generate from database" > Next.

Chose your data connection > select your database > Next.

Select tables > enter Model Namespace > Finish.

 

Step 4

 

In this step, I have created a partial class for implementing two fields - CountryName and StateName. Here, I have also added a Metadata class for applying validation on the Contact model. 

 

Code

using System;
using System.Collections.Generic;
using System.ComponentModel.DataAnnotations;
using System.Linq;
using System.Web;

namespace MVCModalApp
{
    [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 5

 

In this step, I have added a JavaScript file named "Satya.CRUDContacts.js" under scripts folder for opening the popup to create a new contact and to read, update, and delete existing records.

 

Code Ref

var $dialog;

$(document).ready(function () {

    //Populate Contact
    LoadContacts();

    //Open popup
    $('body').on("click", "a.popup", function (e) {
        e.preventDefault();
        var page = $(this).attr('href');
        OpenPopup(page);
    });

    $('body').on('change', '#CountryID', function () {
        var countryID = $(this).val();
        LoadStates(countryID);
    });

    //Save Contacts
    $("body").on('submit', '#saveForm', function (e) {
        e.preventDefault();
        SaveContacts();
    });

    //Update Contacts
    $("body").on('submit', '#updateForm', function (e) {
        e.preventDefault();
        UpdateContacts();
    });

    //Delete Contact
    $('body').on('submit', '#deleteForm', function (e) {
        e.preventDefault();
        DeleteContact();
    });
});


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 style='background-color: Yellow; color: blue'>Contact Person</th><th style='background-color: Yellow; color: blue'>Contact No</th><th style='background-color: Yellow; color: blue'>Country</th><th style='background-color: Yellow; color: blue'>State</th><th style='background-color: Yellow; color: blue'>Action</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/Update/" + row.ContactID + "' class='popup'>Edit</a> | <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.');
        }
    });

}

//open popup
function OpenPopup(Page) {
    var $pageContent = $('<div/>');
    $pageContent.load(Page);
    $dialog = $('<div class="popupWindow" style="overflow:hidden"></div>')
        .html($pageContent)
        .dialog({
            draggable: true,
            autoOpen: false,
            resizable: true,
            model: true,
            height: 600,
            width: 600,
            close: function () {
                $dialog.dialog('destroy').remove();
            }
        })
    $dialog.dialog('open');
}

//Casecade dropdown - Populate states of selected country
function LoadStates(countryID) {
    var $state = $('#StateID');
    $state.empty();
    $state.append($('<option></option>').val('').html('Please Wait...'));
    if (countryID == null || countryID == "") {
        $state.empty();
        $state.append($('<option></option>').val('').html('Select State'));
        return;
    }

    $.ajax({
        url: '/home/GetStateList',
        type: 'GET',
        data: { 'countryID': countryID },
        dataType: 'json',
        success: function (d) {
            $state.empty();
            $state.append($('<option></option>').val('').html('Select State'));
            $.each(d, function (i, val) {
                $state.append($('<option></option>').val(val.StateID).html(val.StateName));
            });
        },
        error: function () {

        }
    });

}


//Save Contact
function SaveContacts() {
    //Validation
    if ($('#ContactPerson').val().trim() == '' ||
        $('#ContactNo').val().trim() == '' ||
        $('#CountryID').val().trim() == '' ||
        $('#StateID').val().trim() == '') {
        $('#msg').html('<div class="failed">All fields are required.</div>');
        return false;
    }

    var contact = {
        ContactID: $('#ContactID').val() == '' ? '0' : $('#ContactID').val(),
        ContactPerson: $('#ContactPerson').val().trim(),
        ContactNo: $('#ContactNo').val().trim(),
        CountryID: $('#CountryID').val().trim(),
        StateID: $('#StateID').val().trim()
    };
    //Add validation token
    contact.__RequestVerificationToken = $('input[name=__RequestVerificationToken]').val();
    //Save Contact
    $.ajax({
        url: '/home/Save',
        type: 'POST',
        data: contact,
        dataType: 'json',
        success: function (data) {
            alert(data.message);
            if (data.status) {
                $('#ContactID').val('');
                $('#ContactPerson').val('');
                $('#ContactNo').val('');
                $('#CountryID').val('');
                $('#StateID').val('');
                LoadContacts();
                $dialog.dialog('close');
            }
        },
        error: function () {
            $('#msg').html('<div class="failed">Error! Please try again.</div>');
        }
    });
}

//Update Contact
function UpdateContacts() {
    //Validation
    if ($('#ContactPerson').val().trim() == '' ||
        $('#ContactNo').val().trim() == '' ||
        $('#CountryID').val().trim() == '' ||
        $('#StateID').val().trim() == '') {
        $('#msg').html('<div class="failed">All fields are required.</div>');
        return false;
    }

    var contact = {
        ContactID: $('#ContactID').val() == '' ? '0' : $('#ContactID').val(),
        ContactPerson: $('#ContactPerson').val().trim(),
        ContactNo: $('#ContactNo').val().trim(),
        CountryID: $('#CountryID').val().trim(),
        StateID: $('#StateID').val().trim()
    };
    //Add validation token
    contact.__RequestVerificationToken = $('input[name=__RequestVerificationToken]').val();
    //Update Contact
    $.ajax({
        url: '/home/Update',
        type: 'POST',
        data: contact,
        dataType: 'json',
        success: function (data) {
            alert(data.message);
            if (data.status) {
                $('#ContactID').val('');
                $('#ContactPerson').val('');
                $('#ContactNo').val('');
                $('#CountryID').val('');
                $('#StateID').val('');
                LoadContacts();
                $dialog.dialog('close');
            }
        },
        error: function () {
            $('#msg').html('<div class="failed">Error! Please try again.</div>');
        }
    });
}

//Delete Contact
function DeleteContact() {
    $.ajax({
        url: '/home/delete',
        type: 'POST',
        dataType: 'json',
        data: {
            'id': $('#ContactID').val(),
            '__RequestVerificationToken': $('input[name=__RequestVerificationToken]').val()
        },
        success: function (data) {
            alert(data.message);
            if (data.status) {
                $dialog.dialog('close');
                LoadContacts();
            }
        },
        error: function () {
            $('#msg').html('<div class="failed">Error ! Please try again.</div>');
        }
    });
}

Code Decsription

 

The section of code is described using a green mark comment for better understanding.

 

Step 6

 

In this step, I have added three different controller action methods in the Home controller for performing CRUD operation.

 

Code

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.Mvc;

namespace MVCModalApp.Controllers
{
    public class HomeController : Controller
    {
        public ActionResult Index() //"Index" Action for show data
        {
            return View();
        }

        public JsonResult GetContacts() //I have used "GetContacts" Action for fetch data as Json Data
        {
            List<Contact> all = null;

            using (SatyaDBEntities dc = new SatyaDBEntities())
            {
                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 };
        }

        //Fetch Country from database
        private List<Country> GetCountry()
        {
            using (SatyaDBEntities dc = new SatyaDBEntities())
            {
                return dc.Countries.OrderBy(a => a.CountryName).ToList();
            }
        }

        //Fetch State from database
        private List<State> GetState(int countryID)
        {
            using (SatyaDBEntities dc = new SatyaDBEntities())
            {
                return dc.States.Where(a => a.CountryID.Equals(countryID)).OrderBy(a => a.StateName).ToList();
            }
        }

        //return states as json data
        public JsonResult GetStateList(int countryID)
        {
            using (SatyaDBEntities dc = new SatyaDBEntities())
            {
                return new JsonResult { Data = GetState(countryID), JsonRequestBehavior = JsonRequestBehavior.AllowGet };
            }
        }

        //Get contact by ID
        public Contact GetContact(int contactID)
        {
            Contact contact = null;
            using (SatyaDBEntities dc = new SatyaDBEntities())
            {
                var v = (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
                         where a.ContactID.Equals(contactID)
                         select new
                         {
                             a,
                             b.CountryName,
                             c.StateName
                         }).FirstOrDefault();
                if (v != null)
                {
                    contact = v.a;
                    contact.CountryName = v.CountryName;
                    contact.StateName = v.StateName;
                }
                return contact;
            }
        }

        //for get view for Save new employee data.
        public ActionResult Save(int id = 0)
        {
            List<Country> Country = GetCountry();
            List<State> States = new List<State>();

            if (id > 0)
            {
                var c = GetContact(id);
                if (c != null)
                {
                    ViewBag.Countries = new SelectList(Country, "CountryID", "CountryName", c.CountryID);
                    ViewBag.States = new SelectList(GetState(c.CountryID), "StateID", "StateName", c.StateID);
                }
                else
                {
                    return HttpNotFound();
                }
                return PartialView("Save", c);
            }
            else
            {
                ViewBag.Countries = new SelectList(Country, "CountryID", "CountryName");
                ViewBag.States = new SelectList(States, "StateID", "StateName");
                return PartialView("Save");
            }
        }

        //for POST method for Save records to the database.
        [HttpPost]
        [ValidateAntiForgeryToken]
        public ActionResult Save(Contact c)
        {
            string message = "";
            bool status = false;
            if (ModelState.IsValid)
            {
                using (SatyaDBEntities dc = new SatyaDBEntities())
                {
                    if (c.ContactID > 0)
                    {
                        var v = dc.Contacts.Where(a => a.ContactID.Equals(c.ContactID)).FirstOrDefault();
                        if (v != null)
                        {
                            v.ContactPerson = c.ContactPerson;
                            v.ContactNo = c.ContactNo;
                            v.CountryID = c.CountryID;
                            v.StateID = c.StateID;
                        }
                        else
                        {
                            return HttpNotFound();
                        }
                    }
                    else
                    {
                        dc.Contacts.Add(c);
                    }
                    dc.SaveChanges();
                    status = true;
                    message = "Data Is Successfully Saved.";
                }
            }
            else
            {
                message = "Error! Please try again.";
            }

            return new JsonResult { Data = new { status = status, message = message } };
        }

        //for get view for update new employee data
        public ActionResult Update(int id = 0)
        {
            List<Country> Country = GetCountry();
            List<State> States = new List<State>();

            if (id > 0)
            {
                var c = GetContact(id);
                if (c != null)
                {
                    ViewBag.Countries = new SelectList(Country, "CountryID", "CountryName", c.CountryID);
                    ViewBag.States = new SelectList(GetState(c.CountryID), "StateID", "StateName", c.StateID);
                }
                else
                {
                    return HttpNotFound();
                }
                return PartialView("Update", c);
            }
            else
            {
                ViewBag.Countries = new SelectList(Country, "CountryID", "CountryName");
                ViewBag.States = new SelectList(States, "StateID", "StateName");
                return PartialView("Update");
            }
        }

        //for POST method for update records to the database.
        [HttpPost]
        [ValidateAntiForgeryToken]
        public ActionResult Update(Contact c)
        {
            string message = "";
            bool status = false;
            if (ModelState.IsValid)
            {
                using (SatyaDBEntities dc = new SatyaDBEntities())
                {
                    if (c.ContactID > 0)
                    {
                        var v = dc.Contacts.Where(a => a.ContactID.Equals(c.ContactID)).FirstOrDefault();
                        if (v != null)
                        {
                            v.ContactPerson = c.ContactPerson;
                            v.ContactNo = c.ContactNo;
                            v.CountryID = c.CountryID;
                            v.StateID = c.StateID;
                        }
                        else
                        {
                            return HttpNotFound();
                        }
                    }
                    else
                    {
                        dc.Contacts.Add(c);
                    }
                    dc.SaveChanges();
                    status = true;
                    message = "Data Is Successfully Updated.";
                }
            }
            else
            {
                message = "Error! Please try again.";
            }

            return new JsonResult { Data = new { status = status, message = message } };
        }

        //For delete records view
        public ActionResult Delete(int id)
        {
            var c = GetContact(id);
            if (c == null)
            {
                return HttpNotFound();
            }
            return PartialView(c);
        }

        //for POST method for delete records from the database.
        [HttpPost]
        [ValidateAntiForgeryToken]
        [ActionName("Delete")]
        public ActionResult DeleteContact(int id)
        {
            bool status = false;
            string message = "";
            using (SatyaDBEntities dc = new SatyaDBEntities())
            {
                var v = dc.Contacts.Where(a => a.ContactID.Equals(id)).FirstOrDefault();
                if (v != null)
                {
                    dc.Contacts.Remove(v);
                    dc.SaveChanges();
                    status = true;
                    message = "Data Is Successfully Deleted!";
                }
                else
                {
                    return HttpNotFound();
                }
            }

            return new JsonResult { Data = new { status = status, message = message } };
        }

        public ActionResult About()
        {
            ViewBag.Message = "Your application description page.";

            return View();
        }

        public ActionResult Contact()
        {
            ViewBag.Message = "Your contact page.";

            return View();
        }
    }
}

Code Decsription

 

The section of code is described using a green mark comment for better understanding.

 

Step 7

 

Here, I have added the code inside index.cshtml for showing employee details.

 

Code

@{
    ViewBag.Title = "List Of Employees";
}

<h2 style="background-color: darkorange;color: white; text-align: center; font-style: oblique">List Of Employees</h2>
@Html.ActionLink("Enter New Employee", "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*/
    table {
        font-family: arial, sans-serif;
        border-collapse: collapse;
        width: 100%;
    }

    td, th {
        border: 1px solid #dddddd;
        text-align: left;
        padding: 8px;
    }

    tr:nth-child(even) {
        background-color: #dddddd;
    }
    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/Satya.CRUDContacts.js"></script>
}

Code Decsription

 

The section of code is described using a green mark comment for better understanding.

 

Step 8

 

In this step, I added a partial view named "Save.cshtml" for the "Save" Action & design. 

 

Right-click on Shared folder (under Views) > Add > View... > Enter View Name > Select Template as Edit > Select your model class "Contact (MVCModalApp)" > Check "Create as a Partial View" > Add.

 

Code

@model MVCModalApp.Contact
<h2>Save Employee Details</h2>
@using (Html.BeginForm("Save", "Home", FormMethod.Post, new { role = "form", id = "saveForm" }))
{
    @*here role = "form" for bootstrap design (optional) *@
    @Html.ValidationSummary(true)
    @Html.AntiForgeryToken()

    @*here the field for person name *@
    <div class="form-group">
        @Html.HiddenFor(model => model.ContactID)
        @Html.LabelFor(model => model.ContactPerson)
        @Html.TextBoxFor(model => model.ContactPerson, new { @class = "form-control" })
    </div>
    @*here the field for person number *@
    <div class="form-group">
        @Html.LabelFor(model => model.ContactNo)
        @Html.TextBoxFor(model => model.ContactNo, new { @class = "form-control" })
    </div>
    @*here the field for person country *@
    <div class="form-group">
        @Html.LabelFor(model => model.CountryID)
        @Html.DropDownListFor(model => model.CountryID, ViewBag.Countries as SelectList, "Select Country", new { @class = "form-control" })
    </div>
    @*here the field for person state *@
    <div class="form-group">
        @Html.LabelFor(model => model.StateID)
        @Html.DropDownListFor(model => model.StateID, ViewBag.States as SelectList, "Select State", new { @class = "form-control" })
    </div>
    <button type="submit" class="btn btn-default">Save</button>
    @Html.ActionLink("Back To List", "Index", null, new { @style = "margin-left:50px; font-weight:bold;" })
    <div id="msg"></div>
}

Code Decsription

 

The section of code is described using a green mark comment for better understanding.

 

Step 9

 

In this step, I added a partial view named "Update.cshtml" for the "Update" Action & design.

 

Right Click on Shared folder (under Views) > Add > View... > Enter View Name > Select Template as Edit > Select your model class "Contact (MVCModalApp)" > Check "Create as a Partial View" > Add.

 

Code

@model MVCModalApp.Contact
<h2>Update Employee Details</h2>
@using (Html.BeginForm("Update", "Home", FormMethod.Post, new { role = "form", id = "updateForm" }))
{
    @*here role = "form" for bootstrap design (optional) *@
    @Html.ValidationSummary(true)
    @Html.AntiForgeryToken()
    @*here the field for person name *@
    <div class="form-group">
        @Html.HiddenFor(model => model.ContactID)
        @Html.LabelFor(model => model.ContactPerson)
        @Html.TextBoxFor(model => model.ContactPerson, new { @class = "form-control" })
    </div>
    @*here the field for person number *@
    <div class="form-group">
        @Html.LabelFor(model => model.ContactNo)
        @Html.TextBoxFor(model => model.ContactNo, new { @class = "form-control" })
    </div>
    @*here the field for person country *@
    <div class="form-group">
        @Html.LabelFor(model => model.CountryID)
        @Html.DropDownListFor(model => model.CountryID, ViewBag.Countries as SelectList, "Select Country", new { @class = "form-control" })
    </div>
    @*here the field for person state *@
    <div class="form-group">
        @Html.LabelFor(model => model.StateID)
        @Html.DropDownListFor(model => model.StateID, ViewBag.States as SelectList, "Select State", new { @class = "form-control" })
    </div>
    <button type="submit" class="btn btn-default">Update</button>
    @Html.ActionLink("Back To List", "Index", null, new { @style = "margin-left:50px; font-weight:bold;" })
    <div id="msg"></div>
}

Code Decsription

 

The section of code is described using a green mark comment for better understanding.

 

Step 10

 

In this step, I added a partial view named "Delete.cshtml" for the "Delete" Action & design.

 

Right-click on Shared folder (under Views) > Add > View... > Enter View Name > Select Template as Edit > Select your model class "Contact (MVCModalApp)" > Check "Create as a Partial View" > Add.

 

Code Ref

@model MVCModalApp.Contact

<h2> Delete Employee Details </h2>
<h3>Are you sure you want to delete this?</h3>
<div>
    <table class="table table-responsive">
        <tr>
            <td>@Html.DisplayNameFor(a => a.ContactPerson)</td> @*for name field*@
            <td>@Html.DisplayFor(a => a.ContactPerson)</td>
        </tr>
        <tr>
            <td>@Html.DisplayNameFor(a => a.ContactNo)</td> @*for number field*@
            <td>@Html.DisplayFor(a => a.ContactNo)</td>
        </tr>
        <tr>
            <td>@Html.DisplayNameFor(a => a.CountryID)</td> @*for country field*@
            <td>@Html.DisplayFor(a => a.CountryName)</td>
        </tr>
        <tr>
            <td>@Html.DisplayNameFor(a => a.StateID)</td> @*for state field*@
            <td>@Html.DisplayFor(a => a.StateName)</td>
        </tr>
    </table>
</div>
@using (Html.BeginForm("delete", "home", FormMethod.Post, new { id = "deleteForm" })) //This id used in JS file for delete contact.
{
    <p>
        @Html.AntiForgeryToken()
        @Html.HiddenFor(a => a.ContactID)
        <input type="submit" value="Delete" />
    </p>
}

Code Decsription

 

The section of code is described using a green mark comment for better understanding.

 

OUTPUT

 

For Index View, here, I have used modal popup in the red marked area for CRUD operation.

 

For Validation fields,

 

 

Modal Popup for saving records,

 

 

 

Modal Popup for updating records, 

 

 

Show Update Field named "State" In record list as marked in green color, 

 

Modal Popup for deleting records, 

 

Record is deleted from the list as well as from database as marked in red color, 

 

Link To Source Code

• Modal Popup Using MVC And Entity Framework

Summary

In this article, we have learned how to perform -

• Multiple operations on a single page using jQuery Ajax
• CRUD operation using Modal popup
• Field validation in Modal popup
• Modal popup using Bootstrap