--- title: "Crud operation(searching, paging) in MVC with modal popup" description: "Into this Project, we have completed insert update & delete operation in MVC technology and by using these modules like C#, Entity Framework, Stored" author: "Anonymous User" published: 2018-07-31 updated: 2020-09-03 canonical: https://www.mindstick.com/articles/13038/crud-operation-searching-paging-in-mvc-with-modal-popup category: "asp.net mvc" tags: ["c#", "asp.net mvc", "mvc", "mvc4"] reading_time: 17 minutes --- # Crud operation(searching, paging) in MVC with modal popup ## Step 1: First Create Database in SQL server… 1). Create a Database **APCRUD**. 2). Create A Table (**Customer**) into APCRUD database. ![Crud operation in mvc](https://www.mindstick.com/mindstickarticle/da70f7d6-8ea6-438d-a2ea-fd8d7dc1c06f/images/dca1750a-512c-4645-a413-3b8b53066bd3.jpg) 3). Create Stored Procedures for **CRUD Operation**. \ Stored Procedure for **Insert and Update record** ``` //----------------------Insert and Update Data----------------------// USE [APCRUD]GOSET ANSI_NULLS ONGOSET QUOTED_IDENTIFIER ONGOALTER PROC [dbo].[INSERTorUPDATE_CUSTOMER]@CustomerID INT,@Name VARCHAR(50),@Mobileno VARCHAR(20),@Address VARCHAR(200),@Birthdate Date = NULL,@CreationDate DATETIME = NULL,@EmailID VARCHAR(100)ASBEGIN IF(@CustomerID=0)  Begin   insert into Customer(Name, Mobileno, Address, Birthdate, CreationDate,EmailID) values(@Name, @Mobileno, @Address, @Birthdate, @CreationDate, @EmailID)   End  ELSE   BeginUpdate Customer setName=@Name,Mobileno = @Mobileno,Address = @Address,Birthdate=@Birthdate,CreationDate=@CreationDate,EmailID=@EmailIDwhereCustomerID = @CustomerID EndEND ``` ``` //--------------Stored Procedure for Select All Data---------------// USE [APCRUD]GOSET ANSI_NULLS ONGOSET QUOTED_IDENTIFIER ONGOALTER PROC [dbo].[ViewAllRecords_CUSTOMER]@Name nvarchar(50)ASBEGIN   Select * from Customer WHERE Name LIKE '%'+@Name+'%'END ``` ``` //------------Stored procedure for Delete Data by ID-------------------// USE [APCRUD]GOSET ANSI_NULLS ONGOSET QUOTED_IDENTIFIER ONGOALTER PROC [dbo].[DeleteRecordByID_CUSTOMER]@CustomerID intASBEGIN  Delete from Customer where CustomerID = @CustomerIDEND ``` ## Step 2 : Open visual studio ->select file in menu->select New Project on web->select ASP.Net MVC 4 web application-> Select and define the Name of your project->Select an option on project template window like Empty, Basic, Internet, Mobile Application, and web API ->Choose Empty or Basic. ![Crud operation in mvc](https://www.mindstick.com/mindstickarticle/da70f7d6-8ea6-438d-a2ea-fd8d7dc1c06f/images/f068aec3-d405-412e-a714-a5eeb764397d.jpg) ![Crud operation in mvc](https://www.mindstick.com/mindstickarticle/da70f7d6-8ea6-438d-a2ea-fd8d7dc1c06f/images/4fe29a40-3135-4cde-a2b2-e3e7c61bd081.jpg) ![Crud operation in mvc](https://www.mindstick.com/mindstickarticle/da70f7d6-8ea6-438d-a2ea-fd8d7dc1c06f/images/e40909de-317e-4e4a-892e-395ee098231a.jpg) **Step 3.**\ Create a .edmx file or database model with the help of Entity framework In the visual studio. Goto solution explorer -> Select project and done right click on it -> Select Add option -> select New item in option list . ![Crud operation in mvc](https://www.mindstick.com/mindstickarticle/da70f7d6-8ea6-438d-a2ea-fd8d7dc1c06f/images/572d7b5f-e369-4769-852d-9c7045e403e9.jpg) ![Crud operation in mvc](https://www.mindstick.com/mindstickarticle/da70f7d6-8ea6-438d-a2ea-fd8d7dc1c06f/images/80254e2d-4d15-44c1-9f48-6cb4130fc6e2.jpg) ![Crud operation in mvc](https://www.mindstick.com/mindstickarticle/da70f7d6-8ea6-438d-a2ea-fd8d7dc1c06f/images/89ab5179-25e7-4987-81ab-2b361e9a0646.jpg) ![Crud operation in mvc](https://www.mindstick.com/mindstickarticle/da70f7d6-8ea6-438d-a2ea-fd8d7dc1c06f/images/73d55f1e-0d54-4516-ba93-ec40d52d5464.jpg) ![Crud operation in mvc](https://www.mindstick.com/mindstickarticle/da70f7d6-8ea6-438d-a2ea-fd8d7dc1c06f/images/0dfb193e-03f5-425d-bc18-2dddae0c206d.jpg)\ **Step 4 :**\ Select Controllers folder in solution explorer -> Right click on controllers folder And Add a controller file with Home name as “HomeController”. (don't delete ‘Controller’ word from the name of controller file). ![Crud operation in mvc](https://www.mindstick.com/mindstickarticle/da70f7d6-8ea6-438d-a2ea-fd8d7dc1c06f/images/35c5edac-da97-443a-a385-a60c062fe8a8.jpg) ![Crud operation in mvc](https://www.mindstick.com/mindstickarticle/da70f7d6-8ea6-438d-a2ea-fd8d7dc1c06f/images/441706e9-a010-47b3-944b-44d32637b08b.jpg)\ ## Step -5 : After adding the HomeController file. Add an Index file in View folder. Move the cursor in the HomeController file -> And right click under the Action method. ``` public ActionResult Index(){      -----RightClick on Here(for adding a view)----    return View();} ``` ![Crud operation in mvc](https://www.mindstick.com/mindstickarticle/da70f7d6-8ea6-438d-a2ea-fd8d7dc1c06f/images/70671e9a-7fc4-4af3-a1f1-ea098b322e44.jpg)\ ## Step 6 : First Check and Add our system files in **HomeController** Like – ``` using System;using System.Collections.Generic;using System.Data;using System.Data.SqlClient;using System.Linq;using System.Web;using System.Web.Mvc;using PagedList; ``` • Then create an object for our entity framework on header position\ Like i.e. ![Crud operation in mvc](https://www.mindstick.com/mindstickarticle/da70f7d6-8ea6-438d-a2ea-fd8d7dc1c06f/images/b393a9ba-c30c-440e-b8a7-bb14d922a8a4.jpg)\ • Select and explore the model in solution explorer for the only check. ![Crud operation in mvc](https://www.mindstick.com/mindstickarticle/da70f7d6-8ea6-438d-a2ea-fd8d7dc1c06f/images/03ec9783-41c7-460c-9c7e-8fe829f687a9.jpg)\ **Step 7:** First of all understand some concept of MVC programming before using it. Like - 1). What is MVC? 2). Why would be used MVC? 3). How MVC is different from ASP.Net. 4). What is Entity Framework and LINQ? 5). SQL Store producer. 6). Naming Convention in programming. And so on… **Step 8:** Add the new record in the database via the entity framework and modal popup. (Insert new record via modal popup). ![Crud operation in mvc](https://www.mindstick.com/mindstickarticle/da70f7d6-8ea6-438d-a2ea-fd8d7dc1c06f/images/d928ff1e-51e2-48a5-8e36-512a9ac914f4.jpg)\ • Then first create a partial view for **_Addrecord** action. ![Crud operation in mvc](https://www.mindstick.com/mindstickarticle/da70f7d6-8ea6-438d-a2ea-fd8d7dc1c06f/images/a36b35f2-63fd-4eda-a649-297065afe1b8.jpg)\ ``` //--------_AddRecord.cshtml----------------// @model MvcAppFirst.Customer@{    ViewBag.Title = "Customer Details";}@{    var DOB = "";    if (Model != null && Model.Birthdate != null)    {        DOB = Model.Birthdate.Value.ToString("dd/MM/yyyy");    }}
    @using (Ajax.BeginForm(new AjaxOptions() { HttpMethod = "POST", OnSuccess = "onSuccess" }))    {       
                               
       
            @Html.ValidationSummary(true)           
               
                   
                       
                       
                            @Html.LabelFor(model => model.Name)                            @Html.TextBoxFor(model => model.Name, new { @class = "form-control", @placeholder = "Enter Your Full Name" })                            @Html.ValidationMessageFor(model => model.Name )                       
                       
                            @Html.LabelFor(model => model.Mobileno)                            @Html.TextBoxFor(model => model.Mobileno, new { @class = "form-control", @placeholder = "Enter Your Mobile No.", type = "number"})                            @Html.ValidationMessageFor(model => model.Mobileno)                       
                       
                            @Html.LabelFor(model => model.Birthdate)                            @Html.TextBoxFor(model => model.Birthdate, new { @class = "form-control datepicker", @Value = @DOB, @placeholder = "Select Your Date Of Birth"})                            @Html.ValidationMessageFor(model => model.Birthdate)                       
                       
                            @Html.LabelFor(model => model.EmailID)                            @Html.TextBoxFor(model => model.EmailID, new { @class = "form-control", @placeholder = "Enter Your EmailID"})                            @Html.ValidationMessageFor(model => model.EmailID)                       
                         
                            @Html.LabelFor(model => model.Address)                            @Html.TextAreaFor(model => model.Address, new { @class = "form-control", @placeholder = "Enter Yor Address"})                            @Html.ValidationMessageFor(model => model.Address)                       
                   
               
           
       
       
                                           
    }
``` **.** Then create an **Action method** in the HomeController File. ```         [HttpGet]        public ActionResult Addrecord()        {            return PartialView("_AddRecord");        }         [HttpPost]        public ActionResult Addrecord(Customer Cust)        {            Cust.CreationDate = DateTime.Now;            AP.Customers.Add(Cust);            AP.SaveChanges();            return RedirectToAction("Index");        } ``` • Here( in MVC) before creating a modal popup, we must be read about to 1). What is _Layout.cshtml page in MVC? 2). What is Master Page in Asp.Net? 3). What is similar to MasterPage and Layout page? ## Layout Page in mvc - When we want to a common layout or effects on overall our application then we used the **_Layout.cshtml** page in MVC for design and scripting. ![Crud operation in mvc](https://www.mindstick.com/mindstickarticle/da70f7d6-8ea6-438d-a2ea-fd8d7dc1c06f/images/e358e052-4aca-4ee0-9167-4cde87636b74.png) ``` //-----------_Layout Page for common Display-----//             @ViewBag.Title                        
        @RenderBody()    
                                    ``` • Create your self-scripting page as a **.js** file on the RightClick on script folder in solution explorer. ![Crud operation in mvc](https://www.mindstick.com/mindstickarticle/da70f7d6-8ea6-438d-a2ea-fd8d7dc1c06f/images/362b2235-7cc5-473d-a87e-d22edf9cffd3.png)\ ``` //------For retrive the Record into the modalpopup for edit and update------// $(document).ready(function () {    $(".open-dialog").click(function (e) {        e.preventDefault();        console.log(this.getAttribute('href'));        $.ajax({            url: this.getAttribute('href'),            data: {},            type: 'GET',            success: function (data) {                //alert(data);                $('#modalContent').html(data);                $('#modal-dialog').modal('show');            }        });    });}) ``` . For clear all text field, click on the **Reset button**. ``` //------Function for clearing the textboxes------// function clearTextBox() {    $('#Name').val("");    $('#Address').val("");    $('#Mobileno').val("");    $('#Birthdate').val("");    $('#EmailID').val("");    $('#Name').css('border-color', 'lightgrey');    $('#Address').css('border-color', 'lightgrey');    $('#Mobileno').css('border-color', 'lightgrey');    $('#EmailID').css('border-color', 'lightgrey');} ``` After creating a main.js file then create a .css file in CSS folder. ![Crud operation in mvc](https://www.mindstick.com/mindstickarticle/da70f7d6-8ea6-438d-a2ea-fd8d7dc1c06f/images/98b5a7c8-0fc3-48b6-b0aa-069f3e035152.png)\ Note : when we define CSS property in **.css file** there are no need to define "" tags. ```     .centerAlign {        text-align: center;    }    table#customerDetails {        width: 100%;        background-color: #f1f1c1;    }        table#customerDetails tr:nth-child(even) {            background-color: #eee;        }        table#customerDetails tr:nth-child(odd) {            background-color: #fff;        }        table#customerDetails th {            color: white;            background-color: DarkGray;        }    table, th, td {        border: 1px solid black;    }    table, th, td {        border: 1px solid black;        border-collapse: collapse;    }    table, th, td {        border: 1px solid black;        border-collapse: collapse;    }    th, td {        padding: 15px;    }    body {        font-family: Arial;    }    * {        box-sizing: border-box;    }    .rightAlign {        text-align: right;    }    .headerPadding {        padding: 5px;    }    .modal-content {        width: 500px !important;        margin: 30px auto !important;    }     .red {        color: red;    }    .form-area {        background-color: #FAFAFA;        padding: 10px 40px 60px;        margin: 10px 0px 60px;        border: 1px solid GREY;    } ``` Edit, Inserted Record: First, fill the record in **modal popup** fields by the click on Edit button. Here we have already defined the script code for filling the entire fields into the modal popup on above position. And here defined only Action method for Edit and Update data. ``` //-------Edit and Update record By using the stored procedure------// //-----Use ajax script for Get record---(script has defined on page above side)----// [HttpGet]        public ActionResult EditStudent(int customerID)        {            var model=AP.Customers.FirstOrDefault(x => x.CustomerID == customerID);            return PartialView("_AddRecord", model);        }        [HttpPost]        public ActionResult EditStudent(Customer Cust)        {            bool success = false;            var Customer = AP.Customers.Where(x => x.CustomerID == Cust.CustomerID).FirstOrDefault();            if (Customer != null)            {                success = AP.INSERTorUPDATE_CUSTOMER(Cust.CustomerID, Cust.Name, Cust.Mobileno, Cust.Address, Cust.Birthdate, DateTime.Now, Cust.EmailID) == 1 ? true : false;                AP.SaveChanges();            }            return RedirectToAction("Index");        } ``` Delete Record with **Confirmation Dialog** popup. ![Crud operation in mvc](https://www.mindstick.com/mindstickarticle/da70f7d6-8ea6-438d-a2ea-fd8d7dc1c06f/images/14cfe182-3938-4332-b5d6-5217b152cb50.png)\ ``` //------Delete Action Method-------// public ActionResult DeleteCustomer(int customerID)        {            bool success = false;            success = AP.DeleteRecordByID_CUSTOMER(customerID) == 1 ? true : false;            AP.SaveChanges();            return RedirectToAction("Index");        } ``` This **script code** is used For **Delete Confirmation popup**. ``` //------For Confirmation Dilogbox on delete button click------// $(".delete-dialog").click(function (e) {    e.preventDefault();    var deleteLinkObject = $(this);    $('#message-dialog').modal('show');    $("#confirmOk").click(function (e) {        $.ajax({            cache: false,            async: true,            type: "GET",            url: deleteLinkObject.attr("href"),            success: function () {                $('#delete-dialog').modal('hide');                location.reload();            }        });    });}); ``` **Index File** Coding for the view. ``` //-------- Index Page View---------// @model PagedList.IPagedList@using PagedList.Mvc;@using PagedList;@{    ViewBag.Title = "Customer Details";    Layout = "~/Views/Shared/_Layout.cshtml";}

Customer Details

@using (Html.BeginForm()){   
       
           
                           
           
               
                                                       
           
       
       
           
                                                                                                                                                                                                                                                                                                                                                            @foreach (var item in Model)                    {                                                                                                                                                                                                                                                                                                    }               
CustomerIDCustomerNameAddressMobileNoBirthDateEmailIDCreationDateAction
@item.CustomerID @item.Name @item.Address @item.Mobileno @item.Birthdate.Value.ToString("dd/MM/yyyy") @item.EmailID @item.CreationDate                                Edit                                Delete                           
               
                   
                        Page @(Model.PageCount < Model.PageNumber ? 0 : Model.PageNumber)                        of @Model.PageCount                        @Html.PagedListPager(Model, page => Url.Action("Index", new { page }))                   
               
           
       
   
}      ``` \ --- Original Source: https://www.mindstick.com/articles/13038/crud-operation-searching-paging-in-mvc-with-modal-popup Copyright © MindStick Software Pvt. Ltd. This Markdown version is provided for developers, AI systems, and offline reading.