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

By at 11 comments:
Labels: , , , , ,

Part 19 - Difference between Html.Partial and Html.RenderPartial in asp.net MVC



#Html.Partial 

a)@Html.Partial(“PartialViewName”, new { id = 1} );
b)Renders the partial view as an HTML-encoded string.
c)This method result can be stored in a variable, since it returns string type value

d)Simple to use and no need to create any action.

# Html.RenderPartial 

a)@{ Html.RenderPartial(“PartialViewName”, object);}
b)This method result will be directly written to the HTTP response stream means it uses the same TextWriter object as used in the current webpage/template
c)This method returns void
d)This method is faster than Partial method since its result is directly written to the response stream which makes it fast



All Code Factory

By at 1 comment:
Labels: , , ,

Part 18 - How to call a Partial View using JQuery in Asp.net MVC





#Controller Code

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();
        }



        public ActionResult ShowEmployee(int EmployeeId)
        {
            MVCTutorialEntities db = new MVCTutorialEntities();

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

            ViewBag.EmployeeList = listEmp;

            return PartialView("Partial1");
        }

       
    }
}
  
#Model code (EmployeeViewModel)

 
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; }
       
    }
}

#Partial View (PartialView1.cshtml)

 
 @if (ViewBag.EmployeeList != null)
    {

        foreach (var item in ViewBag.EmployeeList)
        {
            <tr>
                <td><b>Name</b></td>
                <td>@item.Name</td>
            </tr>
            <tr>
                <td><b>DepartmentName</b></td>
                <td>@item.DepartmentName</td>
            </tr>
            <tr>
                <td><b>Address</b></td>
                <td>@item.Address</td>
            </tr>
        }
    }
    
    

</table>

 # View Page (Index.cshtml)

 
@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="ShowEmployee(@item.EmployeeId)"><i class="glyphicon glyphicon-eye-open"></i> </a> </td>

                    </tr>

                }
            }
        </tbody>
    </table>

    <div class="modal fade" id="myModal">
        <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">Partial View Example</h3>
                </div>
                <div class="modal-body" id="myModalBodyDiv">
                    

                </div>
                <div class="modal-footer">
                    <a href="#" class="btn btn-default" data-dismiss="modal">Cancel</a>
                    
                </div>

            </div>

        </div>

    </div>

   


</div>

<script>



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

        $("#myModalBodyDiv").load(url,function(){
            $("#myModal").modal("show");
        
        })

//Or
        //$.ajax({

        //    type: "POST",
        //    url: "/Test/ShowEmployee",
        //    data: { EmployeeId: employeeId },
        //    success: function (response) {
               
        //        $("#myModalBodyDiv").html(response);

        //        $("#myModal").modal("show");
         

        //    }

        //})
    }
</script>

#Database 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

By at 5 comments:
Labels: , ,

Part 17 - What is Partial View in Asp.net MVC




What is Partial View?
        The partial view is the reusable view .It can reduce duplication of view content and allow view elements to be reused.Partial views also have the .cshtml extension
How to call a partial view
@Html.Partial(“PartialViewName”, new { id = 1} );
@{ Html.RenderPartial(“PartialViewName”, viewModel);}
@{ Html.RenderAction(“Method", "Controller”, customViewData);}

 Example 
#Partial View - (Partial1.cshtml)

<div>
    <h3>I am in Partial 1</h3>
</div>
  
#Controller code - TestController

 
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()
        {         

            return View();
        }


        public ActionResult ShowPartial()
        {        

            return PartialView("Partial1");
        }
       
    }
}

 # View Page- (Index.cshtml)

 
@{
    ViewBag.Title = "Index";
    Layout = null;
}

<div class="container" style="width:40%;margin-top:2%">
    @Html.Partial("Partial1", new { id = 1} );
    @{ Html.RenderPartial("Partial1");}
    @{ Html.RenderAction("ShowPartial");}
</div>
   


All Code Factory

By at 2 comments:
Labels: ,

Monday, December 5, 2016

Part 16 - Delete operation in Asp.net MVC using JQuery and Bootstrap Modal (Alert message) | 5 steps





In this video you will find an example of deleting records  bootstrap modal (see also Create a popup using bootstrap) and Jquery. The concept is much straight forward- First you click on delete record button then, a popup  asking your confirmation to delete is being displayed, If you choose okay then your record gets deleted. First step is to Insert data using JQuery or Insert data by directly submitting a form then copy below code and try deleting records as shown in above video.

 Note: 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 two methods
a) Index () : This method will return all employees records.
b) DeleteEmployee(int EmployeeId): This method will delete that employee whose ID get passed through parameter.

 It is notable that, here we are actually not deleting employee record. Instead, we have taken a IsDeleted column into database and updating the same with 1.  If IsDeleted==true then the employee is considered to be deleted. We did this because employee table is has connectivity with other table by means of foreign key relationship which would not allow to delete employee table. It will throw an error. 

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

namespace MVCTutorial.Controllers
{
    public class TestController : Controller
    {

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

            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();
        }
            

        public JsonResult DeleteEmployee(int EmployeeId)
        {
            MVCTutorialEntities db = new MVCTutorialEntities();

            bool result = false;
            Employee emp = db.Employees.SingleOrDefault(x => x.IsDeleted == false && x.EmployeeId == EmployeeId);
            if (emp != null)
            {
                emp.IsDeleted = true;
                db.SaveChanges();
                result = true;
            }

            return Json(result, JsonRequestBehavior.AllowGet);
        }



    }
}
  
#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. 

 Here, when we click on delete button, we pass the employeeId and save it into hidden field. Then, we open a popup(Modal) asking confirmation "Yes"/ "No". If Yes is selcted then we call the delete method though ajax call by passing employeeId which was stored in hidden field. After deleting user we refresh content of the page.

@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-danger" onclick="ConfirmDelete(@item.EmployeeId)"><i class="glyphicon glyphicon-trash"></i> </a> </td>
                    </tr>
                }
            }
        </tbody>
    </table>

    <div class="modal fade" id="myModal">
        <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">Delete Employee</h3>
                </div>
                <div class="modal-body">
                    <h4>Are you sure ? You want to delete this. </h4>

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

                </div>
                <div class="modal-footer">
                    <a href="#" class="btn btn-default" data-dismiss="modal">Cancel</a>
                    <a href="#" class="btn btn-success" onclick="DeleteEmployee()">Confirm</a>
                </div>

            </div>

        </div>

    </div>


    @*hidden field for storing current employeeId*@
    <input type="hidden" id="hiddenEmployeeId" />

</div>

<script>

    var ConfirmDelete = function (EmployeeId) {

        $("#hiddenEmployeeId").val(EmployeeId);
        $("#myModal").modal('show');

    }

    var DeleteEmployee = function () {

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

        var empId = $("#hiddenEmployeeId").val();

        $.ajax({

            type: "POST",
            url: "/Test/DeleteEmployee",
            data: { EmployeeId: empId },
            success: function (result) {
                $("#loaderDiv").hide();
                $("#myModal").modal("hide");
                $("#row_" + empId).remove();

            }

        })

    }
</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

By at 2 comments:
Labels: , , , , , ,
Subscribe to: Posts (Atom)