Part 20 - Add Edit Record using Partial View, JQuery and Bootstrap Modal

In this video you will find an Add/Edit record functionality using partial view and bootstrap modal (see example Create a popup using bootstrap). The concept is pretty much straight forward- First you click on edit record button then, a popup is displayed and you make some changes in it then, finally you submit the record.
For implementing this do what as shown in the video. Before starting anything, please create a project and give it a name "MVCTutorial" otherwise, you will get an error while replacing with below code.

#Controller Code

Add a controller named "Test" and replace everything with below code. In below code, you will find three methods
a) Index () : This method will return all employees records.
b) Index (EmployeeViewModel model): This method will insert and update employees record.
c) AddEditEmployee(int EmployeeId): This method will return a partial view containing the record of a particular employee. This method is called when we start editing an employee record. The employee record is displayed in modal(popup). 

using MVCTutorial.Models;
using System;
using System.Collections.Generic;
using System.Globalization;
using System.Linq;
using System.Threading;
using System.Web;
using System.Web.Mvc;

namespace MVCTutorial.Controllers
{
    public class TestController : Controller
    {

        public ActionResult Index()
        {
            MVCTutorialEntities db = new MVCTutorialEntities();

            List<Department> list = db.Departments.ToList();
            ViewBag.DepartmentList = new SelectList(list, "DepartmentId", "DepartmentName");

            List<EmployeeViewModel> listEmp = db.Employees.Where(x => x.IsDeleted == false).Select(x => new EmployeeViewModel { Name = x.Name, DepartmentName = x.Department.DepartmentName, Address = x.Address, EmployeeId = x.EmployeeId }).ToList();

            ViewBag.EmployeeList = listEmp;

            return View();
        }


        [HttpPost]
        public ActionResult Index(EmployeeViewModel model)
        {
            try
            {
                MVCTutorialEntities db = new MVCTutorialEntities();
                List<Department> list = db.Departments.ToList();
                ViewBag.DepartmentList = new SelectList(list, "DepartmentId", "DepartmentName");

                if (model.EmployeeId > 0)
                {
                    //update
                    Employee emp = db.Employees.SingleOrDefault(x => x.EmployeeId == model.EmployeeId && x.IsDeleted == false);

                    emp.DepartmentId = model.DepartmentId;
                    emp.Name = model.Name;
                    emp.Address = model.Address;
                    db.SaveChanges();


                }
                else {
                    //Insert
                    Employee emp = new Employee();
                    emp.Address = model.Address;
                    emp.Name = model.Name;
                    emp.DepartmentId = model.DepartmentId;
                    emp.IsDeleted = false;
                    db.Employees.Add(emp);
                    db.SaveChanges();
                
                }
                return View(model);

            }
            catch (Exception ex)
            {

                throw ex;
            }

        }

        public ActionResult AddEditEmployee(int EmployeeId)
        {
            MVCTutorialEntities db = new MVCTutorialEntities();
            List<Department> list = db.Departments.ToList();
            ViewBag.DepartmentList = new SelectList(list, "DepartmentId", "DepartmentName");

            EmployeeViewModel model = new EmployeeViewModel();

            if (EmployeeId > 0) {

                Employee emp = db.Employees.SingleOrDefault(x => x.EmployeeId == EmployeeId && x.IsDeleted == false);
                model.EmployeeId = emp.EmployeeId;
                model.DepartmentId = emp.DepartmentId;
                model.Name = emp.Name;
                model.Address = emp.Address;
            
            }
            return PartialView("Partial2", model);
        }
       
    }
}

  
#Model code (EmployeeViewModel)

Right click on your model folder and add a class. Then give a name "EmployeeViewModel" and click ok button. Replace content with below code, 

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

namespace MVCTutorial.Models
{
    public class EmployeeViewModel
    {
        public int EmployeeId { get; set; }
        public string Name { get; set; }
        public Nullable<int> DepartmentId { get; set; }
        public string Address { get; set; }
        public Nullable<bool> IsDeleted { get; set; }

        //Custom attribute
        public string DepartmentName { get; set; }
        public bool Remember { get; set; }
        public string SiteName { get; set; }
       
    }
}

 # View Page (Index.cshtml)

Right click on your controller' s Index method and add a view. After adding view, replace content with below code.

@model MVCTutorial.Models.EmployeeViewModel
@{
    ViewBag.Title = "Index";
    Layout = null;
}

<script src="~/Scripts/jquery-1.10.2.min.js"></script>
<link href="~/Content/bootstrap.min.css" rel="stylesheet" />
<script src="~/Scripts/bootstrap.min.js"></script>


<div class="container" style="width:40%;margin-top:2%">     
    

    <table class="table table-responsive">
        <tr>
            <th>Name</th>
            <th>Department</th>
            <th>Address</th>
            <th></th>
        </tr>
        <tbody>

            @if (ViewBag.EmployeeList != null)
            {

                foreach (var item in ViewBag.EmployeeList)
                {
                    <tr id="row_@item.EmployeeId">
                        <td>@item.Name</td>
                        <td>@item.DepartmentName</td>
                        <td>@item.Address</td>                        
                        <td><a href="#" class="btn btn-success" onclick="AddEditEmployee(@item.EmployeeId)"><i class="glyphicon glyphicon-pencil"></i> </a> </td>

                    </tr>

                }
            }
        </tbody>
    </table>
    <a href="#" class="btn btn-primary" onclick="AddEditEmployee(0)">New</a>
    

    <div class="modal fade" id="myModal1">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <a href="#" class="close" data-dismiss="modal">&times;</a>
                    <h3 class="modal-title">AddEdit Employee</h3>
                </div>
                <div class="modal-body" id="myModalBodyDiv1">


                </div>
              

            </div>

        </div>

    </div>

    <input type="hidden" id="hiddenEmployeeId" />


</div>

<script>  

    var AddEditEmployee=function(employeeId){
    
        var url="/Test/AddEditEmployee?EmployeeId="+employeeId;

        $("#myModalBodyDiv1").load(url,function(){
            $("#myModal1").modal("show");
        
        })

    }
</script>

# Partial View - (Partial2.cshtml)

Right click on your Shared folder(see inside views folder) and add a partial view named "Partial2". After that, add below content into this.

@model MVCTutorial.Models.EmployeeViewModel

<div>

    <form id="myForm">
        @Html.HiddenFor(m=>m.EmployeeId)

        @Html.DropDownListFor(model => model.DepartmentId, ViewBag.DepartmentList as SelectList, "--select--", new { @class = "form-control" })

        @Html.TextBoxFor(model => model.Name, new { @class = "form-control", @placeholder = "Name" })

        @Html.TextBoxFor(model => model.Address, new { @class = "form-control", @placeholder ="Address" })

        <a href="#" id="btnSubmit" class="btn btn-success btn-block">@if(Model.EmployeeId>0){<span>Update</span> }else{<span>Save</span>} </a>

    </form>

    <div style="text-align:center;display:none" id="loaderDiv">
        <img src="~/Content/InternetSlowdown_Day.gif" width="150" />
    </div>

</div>


<script>

    $(document).ready(function () {

        $("#btnSubmit").click(function () {

            $("#loaderDiv").show();

            var myformdata = $("#myForm").serialize();
           
            $.ajax({

                type: "POST",
                url: "/Test/Index",
                data: myformdata,
                success: function () {
                    $("#loaderDiv").hide();
                    $("#myModal").modal("hide");
                    window.location.href = "/Test/Index";

                }

            })
        })

    })


</script>

#Database Script

Add a database named "MVCTutorial" in your local db. Then execute below script.

USE [MVCTutorial]
GO
/****** Object:  Table [dbo].[Department]    Script Date: 06-12-2016 00:24:08 ******/
SET ANSI_NULLS ON
GO
SET QUOTED_IDENTIFIER ON
GO
CREATE TABLE [dbo].[Department](
 [DepartmentId] [int] IDENTITY(1,1) NOT NULL,
 [DepartmentName] [nvarchar](100) NULL,
 CONSTRAINT [PK_Department] PRIMARY KEY CLUSTERED 
(
 [DepartmentId] 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].[Employee]    Script Date: 06-12-2016 00:24:08 ******/
SET ANSI_NULLS ON
GO
SET QUOTED_IDENTIFIER ON
GO
SET ANSI_PADDING ON
GO
CREATE TABLE [dbo].[Employee](
 [EmployeeId] [int] IDENTITY(1,1) NOT NULL,
 [Name] [varchar](50) NULL,
 [DepartmentId] [int] NULL,
 [Address] [varchar](150) NULL,
 [IsDeleted] [bit] NULL,
 CONSTRAINT [PK_Employee] PRIMARY KEY CLUSTERED 
(
 [EmployeeId] 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
SET ANSI_PADDING OFF
GO
/****** Object:  Table [dbo].[Sites]    Script Date: 06-12-2016 00:24:08 ******/
SET ANSI_NULLS ON
GO
SET QUOTED_IDENTIFIER ON
GO
CREATE TABLE [dbo].[Sites](
 [SiteId] [int] IDENTITY(1,1) NOT NULL,
 [EmployeeId] [int] NULL,
 [SiteName] [nvarchar](150) NULL,
 CONSTRAINT [PK_Sites] PRIMARY KEY CLUSTERED 
(
 [SiteId] 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
SET IDENTITY_INSERT [dbo].[Department] ON 

GO
INSERT [dbo].[Department] ([DepartmentId], [DepartmentName]) VALUES (1, N'IT')
GO
INSERT [dbo].[Department] ([DepartmentId], [DepartmentName]) VALUES (2, N'QA')
GO
INSERT [dbo].[Department] ([DepartmentId], [DepartmentName]) VALUES (3, N'Development ')
GO
INSERT [dbo].[Department] ([DepartmentId], [DepartmentName]) VALUES (4, N'Marketing')
GO
SET IDENTITY_INSERT [dbo].[Department] OFF
GO
SET IDENTITY_INSERT [dbo].[Employee] ON 

GO
INSERT [dbo].[Employee] ([EmployeeId], [Name], [DepartmentId], [Address], [IsDeleted]) VALUES (1, N'Ashish', 1, N'India', 0)
GO
INSERT [dbo].[Employee] ([EmployeeId], [Name], [DepartmentId], [Address], [IsDeleted]) VALUES (2, N'John', 2, N'London', 0)
GO
INSERT [dbo].[Employee] ([EmployeeId], [Name], [DepartmentId], [Address], [IsDeleted]) VALUES (3, N'Methew', 3, N'NewYork', 0)
GO
INSERT [dbo].[Employee] ([EmployeeId], [Name], [DepartmentId], [Address], [IsDeleted]) VALUES (4, N'Brano', 4, N'France', 0)
GO
INSERT [dbo].[Employee] ([EmployeeId], [Name], [DepartmentId], [Address], [IsDeleted]) VALUES (5, N'Smith', 1, N'London', 0)
GO
INSERT [dbo].[Employee] ([EmployeeId], [Name], [DepartmentId], [Address], [IsDeleted]) VALUES (6, N'Sara', 4, N'New york', 0)
GO
SET IDENTITY_INSERT [dbo].[Employee] OFF
GO
SET IDENTITY_INSERT [dbo].[Sites] ON 

GO
INSERT [dbo].[Sites] ([SiteId], [EmployeeId], [SiteName]) VALUES (1, 1005, N'www.google.com')
GO
INSERT [dbo].[Sites] ([SiteId], [EmployeeId], [SiteName]) VALUES (2, 1006, N'www.facebook.com/technotipstutorial')
GO
INSERT [dbo].[Sites] ([SiteId], [EmployeeId], [SiteName]) VALUES (3, 1007, NULL)
GO
INSERT [dbo].[Sites] ([SiteId], [EmployeeId], [SiteName]) VALUES (4, 1008, N'www.youtube.com/user/aapkanigam')
GO
INSERT [dbo].[Sites] ([SiteId], [EmployeeId], [SiteName]) VALUES (5, 1009, N'www.google.com')
GO
INSERT [dbo].[Sites] ([SiteId], [EmployeeId], [SiteName]) VALUES (6, 1010, N'fb.com/technotipstutorial')
GO
SET IDENTITY_INSERT [dbo].[Sites] OFF
GO
ALTER TABLE [dbo].[Employee]  WITH CHECK ADD  CONSTRAINT [FK_Employee_Department] FOREIGN KEY([DepartmentId])
REFERENCES [dbo].[Department] ([DepartmentId])
GO
ALTER TABLE [dbo].[Employee] CHECK CONSTRAINT [FK_Employee_Department]
GO
ALTER TABLE [dbo].[Sites]  WITH CHECK ADD  CONSTRAINT [FK_Sites_Employee] FOREIGN KEY([EmployeeId])
REFERENCES [dbo].[Employee] ([EmployeeId])
GO
ALTER TABLE [dbo].[Sites] CHECK CONSTRAINT [FK_Sites_Employee]
GO

All Code Factory

• Part 11- Insert data into database
• Part 12- Server side and clientside validation
• Part 13- Insert data into multiple tables
• Part 14- Insert data into database using JQuery
• Part 15- How to create Bootstrap Popup
• Part 16- Delete operation in Asp.net MVC
• Part 17- What is Partial View in Asp.net MVC
• Part 18- How to call Partial View using JQuery
• Part 19- Difference between Html.Partial() and Html.RenderPartial()
• Part 20- AddEdit Record using Partial View
• Part 21- Layout View in Asp.net MVC
• Part 22- Style.Render and Script.Render
• Part 23 - RenderBody, RenderSection and RenderPage.
• Part 24- Divide Page into several component using Bootstrap
• Part 25- Refresh Entity framework after any modification in database table
• Part 26- Set foreign key relationnship in database tables
• Part 27- Create Rgistration Page
• Part 28- Create Login Page
• Part 29- Client Side Validation using JQuery
• Part 30- How to return multiple Model to a View (Interview)
• Part 31- How to create Dynamic Menu using Partial View
• Part 32- Preview Image Before Uploading
• Part 33- Upload and Display Image using JQuery
• Part 34-Upload Image to SQL Server and Display
• Part 35- Download Image from URL and Upload to SQL Server
• Part 36- Cascading DropdownList
• Part 37- Implement Search Functionality
• Part 38- Attribute Routing in MVC
• Part 39- How to display multiple checkbox checked data
• Part 40- How to send multiple checkbox checked value to Server
• Part 41- How to create responsive sortable Image Gallery
• Part 42 - How to implement JQuery Autocomplete Textbox
• Part 43 - How to send Emails in Asp.net MVC
• Part 44 - Integrate JQuery DataTables plugin
• Part 45 - Display record from database using JQuery Datatable
• Part 46- Add Edit Record using JQuery DataTable
• Part 47 - JQuery DataTables Server -side Processing
• Part 48 - JQuery server side processing -Search functionality
• Part 49 - Pagination using Skip and Take method
• Part 50 - Refresh DataTable After Performing Any Action
• Part 51 - Send OTP ( One Time Password ) to any mobile device
• Part 52 - How to use AutoMapper in Asp.net MVC
• Part 53 - How to use AutoMapper ForMember Method
• Part 54 - Repository Pattern - 1 - Adding Business Layer
• Part 55 - Repository Pattern - 2 - Adding Domain Layer
• Part 56 - Repository Pattern - 3 - Dependency Injection
• Part 57- Repository Pattern- 4 - Adding Data Access Layer
• Part 58 - Repository Pattern - 5 - Setting Up Generic Repository
• Part 59 - Display Record using repository pattern
• Part 60 - Add Edit Record using Repository Pattern