Thursday, December 15, 2016

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

14 comments:

Unknown said...

I am cheerful to see this you tube video at this web site, so right now I am also going to add all my video clips about JQuery and Bootstrap Modal at YouTube web site.

The Healthcare Website Design & Marketing Solutions 4 General Practitioners by Optimized360.Com

Kale Co Jakim said...

Hi, Great.. Tutorial is just awesome..It is really helpful for a newbie like me.. I am a regular follower of your blog. Really very informative post you shared here. Kindly keep blogging. If anyone wants to become a .Net developer learn from Dot Net Training in Chennai. or learn thru ASP.NET Essential Training Online . Nowadays Dot Net has tons of job opportunities on various vertical industry.
or Javascript Training in Chennai. Nowadays JavaScript has tons of job opportunities on various vertical industry.

Ishu Sathya said...

Excellent blog on Web technology!!! Have gained more information related to website development. Thank admin for this wonderful content.
web designing institute in chennai
web designing training institutes in chennai

Anoushka Sakthi said...

I am very much impressed in the way of your writing. Thanks for updating Hadoop domain. I would like to share your blog to my friends who is in Big Data Domain.
Regards:
Big Data Course in Chennai
Big Data Training Chennai

radha said...

Nice post. Keep sharing UI online course hyderabad

Mathi said...

It's to a great degree valuable information for learning web arranging. Thankful to you for giving the steady information. This blog is particularly useful for novices.
Web Designing Institute in Chennai | Web Designing Training Institutes in Chennai | Web Designing Training Centers in Chennai

Unknown said...

Hi Ashish,

I'm just new with MVC 5. I would like to ask how would you handle the validation error in modal popup partial view? I would like to show the error messages next to the control just like when the error displays in normal view page.

Rajesh Dhoni said...

Hey Nice Blog!! Thanks For Sharing!!!Wonderful blog & good post.Its really helpful for me, waiting for a more new post. Keep Blogging!
dot net course training in coimbatore
php training in coimbatore

nikitha josh said...

Thank you so much for providing information on this. It was very useful.
Aviation Courses in Chennai
air hostess course in Chennai
airport courses in Chennai
Ground staff training in Chennai
Aviation Academy in Chennai
air hostess training in Chennai
airport management courses in Chennai
ground staff training in Chennai

M Umar said...

Waoooooooooo . Sir really that's a Very nice link for everyone , if we follow this link , we will be able for development ..

Unknown said...
This comment has been removed by the author.
Unknown said...


Although am not new to programming am new to c# . But with ur tutorials i just fell in love with c#. I now love to write in c#. u are the best programming instructor I have ever seen so far. You write clean and very understandable codes. You are the best. Many thanks
Pls keep up d good work Arshish you got fans here in Nigeria. I am a fan.

Augustine Christian said...

Updating with the current trend is strictly advisable and the content furnished here also states the same.

Thanks for sharing this wonderful and worth able article in here. The way to expressed is simply awesome.

Keep doing this job. Thanks :)


seo training institute
seo training
seo services
seo company
seo digital marketing course
seo training institute
seo course online
seo services
seo course fees
seo course near me
seo course in chennai
seo training in chennai
seo training institute
seo training course
seo training institute in chennai
seo training institute
seo training institute enar me
seo training fees in chennai
best seo training in chennai
seo training fees in chennai
seo training center in chennai
seo training and placement in chennai
best seo training center in chennai
best seo training center in chennai
best seo training institute in chennai

Unknown said...

Every day I always visit sites to obtain the best information for materials research I was doing.......

Big Data Hadoop Training In Chennai | Big Data Hadoop Training In anna nagar | Big Data Hadoop Training In omr | Big Data Hadoop Training In porur | Big Data Hadoop Training In tambaram | Big Data Hadoop Training In velachery