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

• 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