Thursday, December 15, 2016

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

5 comments:

Pavel Co Ebele 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 .Net Training in Chennai.

sai said...

Great Article… I love to read your articles because your writing style is too good, its is very very helpful for all of us and I never get bored while reading your article because, they are becomes a more and more interesting from the starting lines until the end.
python training institute in marathahalli
python training institute in btm
Python training course in Chennai

haripriya said...

I believe there are many more pleasurable opportunities ahead for individuals that looked at your site.
Data Science Training in Indira nagar
Data Science training in marathahalli
Data Science Interview questions and answers
Data Science training in btm layout
Data Science Training in BTM Layout
Data science training in kalyan nagar


SRI said...

I found your blog while searching for the updates, I am happy to be here. Very useful content and also easily understandable providing.. Believe me I did wrote an post about tutorials for beginners with reference of your blog. 
rpa training in bangalore
best rpa training in bangalore
rpa training in pune | rpa course in bangalore
rpa training in chennai

Erick Hernandez said...

Hi, i have some questions

1- what version of Bootstrap is?
2- what version of JQUERY is?

becasuse i have this error when i publish the project

xhr.send( ( options.hascontent && options.data ) null ) 404 error

but in localhost working good, what is the reason about this? i think is for the incorrect versions there i have

appreciate your answer

best regards