Post
Ask Question

Benefits Of Partial View In MVC 5

Today, in this article you will learn to use Partial View in a different manner in any MVC application. As you know, Partial View is a view that will be rendered on a parent view. So, I will show you with the help of this article that how we can render partial view in a different way on a parent view.

Partial View can be a parent view and we can use it as a parent view of any partial view. We can simply pass Model to show data in the partial view or we can send the data in the partial view with the help of AJAX call.

We will use Partial View to show the data as in jQuery UI dialogue and we will put Partial View in a div to show the data. In my Previous article on Paging, Searching, Filtering in MVC 5 with Partial View , we saw that how we can use Partial View to show the data in MVC Grid.

So, let’s get started and learn to use Partial View in MVC Application with the help of following structure:

  • Creating ASP.NET MVC Application
  • Performing Database Operation
  • Working with Web Application

Creating ASP.NET MVC Application

In this section, we will create the MVC application. I am creating MVC 5 application and you can use it on MVC 3 or MVC 4. MVC 5 application can be created through Visual Studio 2013 or Visual Studio 2015. Let’s begin with the following steps:

Step 1: In the Visual Studio 2013, click on “New Project”,

new
                              Figure 1: Creating New Project in VS 2013

Step 2: Select the Web from the left pane and click on “ASP.NET Web Application” and enter the app name as “BestMovies”,

BestMovies
                              Figure 2: Creating Web App in VS 2013

Step 3: Select the MVC Project Template in the next “One ASP.Net” Wizard,

Wizard
                                       Figure 3: MVC Template in VS 2013

Performing Database Operation

In this section we will create the database and table for performing data operation so that web application can fetch the data from the database. Start with the following steps:

Step 1: Just Create the database from the following code:

  1. CREATE DATABASE BestMovies   

Step 2: Now run the following script to perform the database operations:

  1. USE [BestMovies]  
  2. GO  
  3. /****** Object:  Table [dbo].[Actor]    Script Date: 4/29/2016 2:47:20 PM ******/  
  4. SET ANSI_NULLS ON  
  5. GO  
  6. SET QUOTED_IDENTIFIER ON  
  7. GO  
  8. SET ANSI_PADDING ON  
  9. GO  
  10. CREATE TABLE [dbo].[Actor](  
  11.     [ActorInfoId] [int] IDENTITY(1,1) NOT NULL,  
  12.     [Name] [varchar](50) NULL,  
  13.     [Age] [int] NULL,  
  14.     [DOB] [datetime] NULL,  
  15.  CONSTRAINT [PK_Actor] PRIMARY KEY CLUSTERED   
  16. (  
  17.     [ActorInfoId] ASC  
  18. )WITH (PAD_INDEX = OFF, STATISTICS_NORECOMPUTE = OFF, IGNORE_DUP_KEY = OFF, ALLOW_ROW_LOCKS = ON, ALLOW_PAGE_LOCKS = ON) ON [PRIMARY]  
  19. ) ON [PRIMARY]  
  20.   
  21. GO  
  22. SET ANSI_PADDING OFF  
  23. GO  
  24. /****** Object:  Table [dbo].[Movie]    Script Date: 4/29/2016 2:47:20 PM ******/  
  25. SET ANSI_NULLS ON  
  26. GO  
  27. SET QUOTED_IDENTIFIER ON  
  28. GO  
  29. SET ANSI_PADDING ON  
  30. GO  
  31. CREATE TABLE [dbo].[Movie](  
  32.     [ID] [int] IDENTITY(1,1) NOT NULL,  
  33.     [Name] [varchar](50) NULL,  
  34.     [Genre] [varchar](50) NULL,  
  35.     [ReleasedDate] [datetime] NULL,  
  36.     [Actor] [varchar](50) NULL,  
  37.     [Actress] [varchar](50) NULL,  
  38.  CONSTRAINT [PK_Movie] PRIMARY KEY CLUSTERED   
  39. (  
  40.     [ID] ASC  
  41. )WITH (PAD_INDEX = OFF, STATISTICS_NORECOMPUTE = OFF, IGNORE_DUP_KEY = OFF, ALLOW_ROW_LOCKS = ON, ALLOW_PAGE_LOCKS = ON) ON [PRIMARY]  
  42. ) ON [PRIMARY]  
  43.   
  44. GO  
  45. SET ANSI_PADDING OFF  
  46. GO  
  47. /****** Object:  Table [dbo].[MovieInfo]    Script Date: 4/29/2016 2:47:20 PM ******/  
  48. SET ANSI_NULLS ON  
  49. GO  
  50. SET QUOTED_IDENTIFIER ON  
  51. GO  
  52. SET ANSI_PADDING ON  
  53. GO  
  54. CREATE TABLE [dbo].[MovieInfo](  
  55.     [MovieInfoId] [int] IDENTITY(1,1) NOT NULL,  
  56.     [MovieId] [int] NULL,  
  57.     [Director] [varchar](150) NULL,  
  58.     [Production] [nvarchar](150) NULL,  
  59.     [ImdbRating] [decimal](2, 1) NULL,  
  60.     [FilmfareAward] [int] NULL,  
  61.     [LeadRole] [varchar](50) NULL,  
  62.  CONSTRAINT [PK_MovieInfo] PRIMARY KEY CLUSTERED   
  63. (  
  64.     [MovieInfoId] ASC  
  65. )WITH (PAD_INDEX = OFF, STATISTICS_NORECOMPUTE = OFF, IGNORE_DUP_KEY = OFF, ALLOW_ROW_LOCKS = ON, ALLOW_PAGE_LOCKS = ON) ON [PRIMARY]  
  66. ) ON [PRIMARY]  
  67.   
  68. GO  
  69. SET ANSI_PADDING OFF  
  70. GO  
  71. SET IDENTITY_INSERT [dbo].[Actor] ON   
  72.   
  73. GO  
  74. INSERT [dbo].[Actor] ([ActorInfoId], [Name], [Age], [DOB]) VALUES (1, N'Amitabh Bachhan', 73, CAST(N'1942-11-10 00:00:00.000' AS DateTime))  
  75. GO  
  76. INSERT [dbo].[Actor] ([ActorInfoId], [Name], [Age], [DOB]) VALUES (2, N'Rajesh Khanna', 73, CAST(N'1942-12-29 00:00:00.000' AS DateTime))  
  77. GO  
  78. INSERT [dbo].[Actor] ([ActorInfoId], [Name], [Age], [DOB]) VALUES (3, N'Shahrukh Khan', 50, CAST(N'1965-02-12 00:00:00.000' AS DateTime))  
  79. GO  
  80. INSERT [dbo].[Actor] ([ActorInfoId], [Name], [Age], [DOB]) VALUES (4, N'Anil Kapoor', 59, CAST(N'1956-12-24 00:00:00.000' AS DateTime))  
  81. GO  
  82. INSERT [dbo].[Actor] ([ActorInfoId], [Name], [Age], [DOB]) VALUES (5, N'Aishwarya', 42, CAST(N'1973-12-01 00:00:00.000' AS DateTime))  
  83. GO  
  84. INSERT [dbo].[Actor] ([ActorInfoId], [Name], [Age], [DOB]) VALUES (6, N'Akshay Kumar', 48, CAST(N'1967-09-09 00:00:00.000' AS DateTime))  
  85. GO  
  86. INSERT [dbo].[Actor] ([ActorInfoId], [Name], [Age], [DOB]) VALUES (7, N'Dilip Kumar', 93, CAST(N'1922-12-11 00:00:00.000' AS DateTime))  
  87. GO  
  88. INSERT [dbo].[Actor] ([ActorInfoId], [Name], [Age], [DOB]) VALUES (8, N'Amir Khan', 51, CAST(N'1965-03-14 00:00:00.000' AS DateTime))  
  89. GO  
  90. INSERT [dbo].[Actor] ([ActorInfoId], [Name], [Age], [DOB]) VALUES (9, N'Farhan Akhtar', 42, CAST(N'1942-01-09 00:00:00.000' AS DateTime))  
  91. GO  
  92. INSERT [dbo].[Actor] ([ActorInfoId], [Name], [Age], [DOB]) VALUES (10, N'Saif Ali Khan', 45, CAST(N'1970-08-16 00:00:00.000' AS DateTime))  
  93. GO  
  94. INSERT [dbo].[Actor] ([ActorInfoId], [Name], [Age], [DOB]) VALUES (11, N'Prabhas', 36, CAST(N'1979-10-23 00:00:00.000' AS DateTime))  
  95. GO  
  96. SET IDENTITY_INSERT [dbo].[Actor] OFF  
  97. GO  
  98. SET IDENTITY_INSERT [dbo].[Movie] ON   
  99.   
  100. GO  
  101. INSERT [dbo].[Movie] ([ID], [Name], [Genre], [ReleasedDate], [Actor], [Actress]) VALUES (1, N'Sholay', N'Action', CAST(N'1975-08-15 00:00:00.000' AS DateTime), N'Amitabh, Dharmendar', N'Hema Malini')  
  102. GO  
  103. INSERT [dbo].[Movie] ([ID], [Name], [Genre], [ReleasedDate], [Actor], [Actress]) VALUES (2, N'Deewar', N'Action', CAST(N'1979-05-14 00:00:00.000' AS DateTime), N'Amitabh, Shashi', N'Parveen Boby')  
  104. GO  
  105. INSERT [dbo].[Movie] ([ID], [Name], [Genre], [ReleasedDate], [Actor], [Actress]) VALUES (3, N'Zanzeer', N'Action', CAST(N'1973-05-11 00:00:00.000' AS DateTime), N'Amitabh', N'Jaya Bhaduri')  
  106. GO  
  107. INSERT [dbo].[Movie] ([ID], [Name], [Genre], [ReleasedDate], [Actor], [Actress]) VALUES (4, N'Don', N'Action', CAST(N'1978-04-20 00:00:00.000' AS DateTime), N'Amitabh', N'Zeenat Aman')  
  108. GO  
  109. INSERT [dbo].[Movie] ([ID], [Name], [Genre], [ReleasedDate], [Actor], [Actress]) VALUES (5, N'Anand', N'Drama', CAST(N'1971-04-03 00:00:00.000' AS DateTime), N'Rajesh Khanna', N'Sumita Snyal')  
  110. GO  
  111. INSERT [dbo].[Movie] ([ID], [Name], [Genre], [ReleasedDate], [Actor], [Actress]) VALUES (6, N'Bawarchi', N'Drama', CAST(N'1972-06-10 00:00:00.000' AS DateTime), N'Rajesh Khanna', N'Jaya Bhaduri')  
  112. GO  
  113. INSERT [dbo].[Movie] ([ID], [Name], [Genre], [ReleasedDate], [Actor], [Actress]) VALUES (7, N'D D L J', N'Romantic', CAST(N'1995-08-19 00:00:00.000' AS DateTime), N'Shahrukh Khan', N'Kajol')  
  114. GO  
  115. INSERT [dbo].[Movie] ([ID], [Name], [Genre], [ReleasedDate], [Actor], [Actress]) VALUES (8, N'Kuch Kuch Hota Hai', N'Romantic', CAST(N'1998-08-16 00:00:00.000' AS DateTime), N'Shahrukh Khan', N'Kajol')  
  116. GO  
  117. INSERT [dbo].[Movie] ([ID], [Name], [Genre], [ReleasedDate], [Actor], [Actress]) VALUES (9, N'Nayak', N'Action', CAST(N'2001-07-07 00:00:00.000' AS DateTime), N'Anil Kapoor', N'Rani Mukharjee')  
  118. GO  
  119. INSERT [dbo].[Movie] ([ID], [Name], [Genre], [ReleasedDate], [Actor], [Actress]) VALUES (10, N'Taal', N'Drama', CAST(N'1999-08-13 00:00:00.000' AS DateTime), N'Anil Kapoor', N'Aishwarya Rai')  
  120. GO  
  121. INSERT [dbo].[Movie] ([ID], [Name], [Genre], [ReleasedDate], [Actor], [Actress]) VALUES (11, N'Sainik', N'Action', CAST(N'1993-07-10 00:00:00.000' AS DateTime), N'Akshay Kumar', N'Ashwini Bhave')  
  122. GO  
  123. INSERT [dbo].[Movie] ([ID], [Name], [Genre], [ReleasedDate], [Actor], [Actress]) VALUES (12, N'Karma', N'Action', CAST(N'1986-08-08 00:00:00.000' AS DateTime), N'Dilip Kumar', N'Nutan')  
  124. GO  
  125. INSERT [dbo].[Movie] ([ID], [Name], [Genre], [ReleasedDate], [Actor], [Actress]) VALUES (13, N'Sarfarosh', N'Action', CAST(N'1995-08-08 00:00:00.000' AS DateTime), N'Amir Khan', N'Sonali Bendre')  
  126. GO  
  127. INSERT [dbo].[Movie] ([ID], [Name], [Genre], [ReleasedDate], [Actor], [Actress]) VALUES (14, N'Saudagar', N'Action', CAST(N'1999-09-12 00:00:00.000' AS DateTime), N'Dilip Kumar, Raj Kumar', N'Manish Koirala')  
  128. GO  
  129. INSERT [dbo].[Movie] ([ID], [Name], [Genre], [ReleasedDate], [Actor], [Actress]) VALUES (15, N'Three Idiots', N'Drama', CAST(N'2012-09-09 00:00:00.000' AS DateTime), N'Amir Khan', N'Kareena Kapoor')  
  130. GO  
  131. INSERT [dbo].[Movie] ([ID], [Name], [Genre], [ReleasedDate], [Actor], [Actress]) VALUES (16, N'Rowdy Rathore', N'Action', CAST(N'2013-09-10 00:00:00.000' AS DateTime), N'Akshay Kumar', N'Sonakshi Sinha')  
  132. GO  
  133. INSERT [dbo].[Movie] ([ID], [Name], [Genre], [ReleasedDate], [Actor], [Actress]) VALUES (17, N'Baby', N'Action', CAST(N'2015-12-12 00:00:00.000' AS DateTime), N'Akshay Kumar', N'Tapsi')  
  134. GO  
  135. INSERT [dbo].[Movie] ([ID], [Name], [Genre], [ReleasedDate], [Actor], [Actress]) VALUES (18, N'Bhaag Milka Bhaag', N'Biographic', CAST(N'2014-10-10 00:00:00.000' AS DateTime), N'Farhan Akhtar', N'Sonam Kapoor')  
  136. GO  
  137. INSERT [dbo].[Movie] ([ID], [Name], [Genre], [ReleasedDate], [Actor], [Actress]) VALUES (19, N'Phantom', N'Action', CAST(N'2015-08-12 00:00:00.000' AS DateTime), N'Saif Ali Khan', N'Kareena Kapoor')  
  138. GO  
  139. INSERT [dbo].[Movie] ([ID], [Name], [Genre], [ReleasedDate], [Actor], [Actress]) VALUES (20, N'Airlift', N'Action', CAST(N'2016-05-06 00:00:00.000' AS DateTime), N'Akshay Kumar', N'Nimrat Kaur')  
  140. GO  
  141. INSERT [dbo].[Movie] ([ID], [Name], [Genre], [ReleasedDate], [Actor], [Actress]) VALUES (21, N'Bahubali', N'Action', CAST(N'2015-08-12 00:00:00.000' AS DateTime), N'Prabhas', N'Tamannah Bhatiya')  
  142. GO  
  143. SET IDENTITY_INSERT [dbo].[Movie] OFF  
  144. GO  
  145. SET IDENTITY_INSERT [dbo].[MovieInfo] ON   
  146.   
  147. GO  
  148. INSERT [dbo].[MovieInfo] ([MovieInfoId], [MovieId], [Director], [Production], [ImdbRating], [FilmfareAward], [LeadRole]) VALUES (1, 1, N'Ramesh Sippy', N'United Producers  
  149. Sippy Films', CAST(8.5 AS Decimal(2, 1)), 5, N'Amitabh Bachhan')  
  150. GO  
  151. INSERT [dbo].[MovieInfo] ([MovieInfoId], [MovieId], [Director], [Production], [ImdbRating], [FilmfareAward], [LeadRole]) VALUES (2, 2, N'Yash Chopra', N'Trimurti Films', CAST(8.2 AS Decimal(2, 1)), 3, N'Amitabh Bachhan')  
  152. GO  
  153. INSERT [dbo].[MovieInfo] ([MovieInfoId], [MovieId], [Director], [Production], [ImdbRating], [FilmfareAward], [LeadRole]) VALUES (3, 3, N'Prakash Meshra', N'Asha Studios', CAST(7.0 AS Decimal(2, 1)), 2, N'Amitabh Bachhan')  
  154. GO  
  155. INSERT [dbo].[MovieInfo] ([MovieInfoId], [MovieId], [Director], [Production], [ImdbRating], [FilmfareAward], [LeadRole]) VALUES (4, 4, N'Chandra Barot', N'Nariman Films', CAST(7.9 AS Decimal(2, 1)), 3, N'Amitabh Bachhan')  
  156. GO  
  157. INSERT [dbo].[MovieInfo] ([MovieInfoId], [MovieId], [Director], [Production], [ImdbRating], [FilmfareAward], [LeadRole]) VALUES (5, 5, N'Hrishikesh Mukherjee', N'Digital Entertainment', CAST(8.9 AS Decimal(2, 1)), 5, N'Rajesh Khanna')  
  158. GO  
  159. INSERT [dbo].[MovieInfo] ([MovieInfoId], [MovieId], [Director], [Production], [ImdbRating], [FilmfareAward], [LeadRole]) VALUES (6, 6, N'Hrishikesh Mukherjee', N'Digital Entertainment', CAST(8.0 AS Decimal(2, 1)), 1, N'Rajesh Khanna')  
  160. GO  
  161. INSERT [dbo].[MovieInfo] ([MovieInfoId], [MovieId], [Director], [Production], [ImdbRating], [FilmfareAward], [LeadRole]) VALUES (7, 7, N'Aditya Chopra', N'Yash Raj Films', CAST(8.3 AS Decimal(2, 1)), 3, N'Shahrukh Khan')  
  162. GO  
  163. INSERT [dbo].[MovieInfo] ([MovieInfoId], [MovieId], [Director], [Production], [ImdbRating], [FilmfareAward], [LeadRole]) VALUES (8, 8, N'Karan Johar', N'Dharma Productions', CAST(7.8 AS Decimal(2, 1)), 1, N'Shahrukh Khan')  
  164. GO  
  165. INSERT [dbo].[MovieInfo] ([MovieInfoId], [MovieId], [Director], [Production], [ImdbRating], [FilmfareAward], [LeadRole]) VALUES (9, 9, N'S. Shankar', N'Sri Surya Movies', CAST(7.8 AS Decimal(2, 1)), NULL, N'Anil Kapoor')  
  166. GO  
  167. INSERT [dbo].[MovieInfo] ([MovieInfoId], [MovieId], [Director], [Production], [ImdbRating], [FilmfareAward], [LeadRole]) VALUES (10, 10, N'Subhash Ghai', N'Mukta Arts', CAST(6.8 AS Decimal(2, 1)), NULL, N'Aishwarya')  
  168. GO  
  169. INSERT [dbo].[MovieInfo] ([MovieInfoId], [MovieId], [Director], [Production], [ImdbRating], [FilmfareAward], [LeadRole]) VALUES (11, 11, N'Sikander Bharti', N'Manish Arts', CAST(6.6 AS Decimal(2, 1)), NULL, N'Akshay Kumar')  
  170. GO  
  171. INSERT [dbo].[MovieInfo] ([MovieInfoId], [MovieId], [Director], [Production], [ImdbRating], [FilmfareAward], [LeadRole]) VALUES (12, 12, N'Sikander Bharti', N'Mukta Arts', CAST(7.4 AS Decimal(2, 1)), NULL, N'Dilip Kumar')  
  172. GO  
  173. INSERT [dbo].[MovieInfo] ([MovieInfoId], [MovieId], [Director], [Production], [ImdbRating], [FilmfareAward], [LeadRole]) VALUES (13, 13, N'John Matthew Matthan', N'Cinematt Pictures', CAST(8.2 AS Decimal(2, 1)), 2, N'Amir Khan')  
  174. GO  
  175. INSERT [dbo].[MovieInfo] ([MovieInfoId], [MovieId], [Director], [Production], [ImdbRating], [FilmfareAward], [LeadRole]) VALUES (14, 14, N'Subhash Ghai', N'Mukta Arts', CAST(6.7 AS Decimal(2, 1)), NULL, N'Dilip Kumar')  
  176. GO  
  177. INSERT [dbo].[MovieInfo] ([MovieInfoId], [MovieId], [Director], [Production], [ImdbRating], [FilmfareAward], [LeadRole]) VALUES (15, 15, N'Rajkumar Hirani', N'Vinod Chopra Films', CAST(8.4 AS Decimal(2, 1)), 3, N'Amir Khan')  
  178. GO  
  179. INSERT [dbo].[MovieInfo] ([MovieInfoId], [MovieId], [Director], [Production], [ImdbRating], [FilmfareAward], [LeadRole]) VALUES (16, 16, N'Prabhu Deva', N'SLB Films', CAST(5.8 AS Decimal(2, 1)), NULL, N'Akshay Kumar')  
  180. GO  
  181. INSERT [dbo].[MovieInfo] ([MovieInfoId], [MovieId], [Director], [Production], [ImdbRating], [FilmfareAward], [LeadRole]) VALUES (17, 17, N'Neeraj Pandey', N'T-Series', CAST(8.2 AS Decimal(2, 1)), 2, N'Akshay Kumar')  
  182. GO  
  183. INSERT [dbo].[MovieInfo] ([MovieInfoId], [MovieId], [Director], [Production], [ImdbRating], [FilmfareAward], [LeadRole]) VALUES (18, 18, N'Rakeysh Omprakash Mehra', N'ROMP Pictures', CAST(8.3 AS Decimal(2, 1)), 3, N'Farhan Akhtar')  
  184. GO  
  185. INSERT [dbo].[MovieInfo] ([MovieInfoId], [MovieId], [Director], [Production], [ImdbRating], [FilmfareAward], [LeadRole]) VALUES (19, 19, N'Kabir Khan', N'Nadiadwala Grandson Entertainment', CAST(5.6 AS Decimal(2, 1)), NULL, N'Saif Ali Khan')  
  186. GO  
  187. INSERT [dbo].[MovieInfo] ([MovieInfoId], [MovieId], [Director], [Production], [ImdbRating], [FilmfareAward], [LeadRole]) VALUES (20, 20, N'Raja Krishna Menon', N'Abundantia Entertainment', CAST(9.1 AS Decimal(2, 1)), 2, N'Akshay Kumar')  
  188. GO  
  189. INSERT [dbo].[MovieInfo] ([MovieInfoId], [MovieId], [Director], [Production], [ImdbRating], [FilmfareAward], [LeadRole]) VALUES (21, 21, N'S. S. Rajamouli', N'   
  190. Arka Media Works', CAST(8.6 AS Decimal(2, 1)), NULL, N'Prabhas')  
  191. GO  
  192. SET IDENTITY_INSERT [dbo].[MovieInfo] OFF  
  193. GO  
  194. ALTER TABLE [dbo].[MovieInfo]  WITH CHECK ADD  CONSTRAINT [FK_MovieInfo_Movie] FOREIGN KEY([MovieId])  
  195. REFERENCES [dbo].[Movie] ([ID])  
  196. GO  
  197. ALTER TABLE [dbo].[MovieInfo] CHECK CONSTRAINT [FK_MovieInfo_Movie]  
  198. GO  
  199. /****** Object:  StoredProcedure [dbo].[BM_GetActorDetails]    Script Date: 4/29/2016 2:47:20 PM ******/  
  200. SET ANSI_NULLS ON  
  201. GO  
  202. SET QUOTED_IDENTIFIER ON  
  203. GO  
  204. -- =============================================  
  205. -- Author:      Nimit  
  206. -- Create date: 04/29/2016  
  207. -- Description: get actor info  
  208. -- =============================================  
  209. CREATE PROCEDURE [dbo].[BM_GetActorDetails]   
  210.     -- Add the parameters for the stored procedure here  
  211.     @Name varchar(50)   
  212. AS  
  213. BEGIN  
  214.     -- SET NOCOUNT ON added to prevent extra result sets from  
  215.     -- interfering with SELECT statements.  
  216.     SET NOCOUNT ON;  
  217.   
  218.     -- Insert statements for procedure here  
  219.     SELECT * FROM Actor WHERE Name = @Name  
  220. END  
  221.   
  222. GO  
  223. /****** Object:  StoredProcedure [dbo].[BM_GetMovies]    Script Date: 4/29/2016 2:47:20 PM ******/  
  224. SET ANSI_NULLS ON  
  225. GO  
  226. SET QUOTED_IDENTIFIER ON  
  227. GO  
  228. -- =============================================  
  229. -- Author:      Nimit Joshi  
  230. -- Create date: 02/19/2016  
  231. -- Description: This sp is used to get data  
  232. -- =============================================  
  233. CREATE PROCEDURE [dbo].[BM_GetMovies]   
  234.     -- Add the parameters for the stored procedure here  
  235.     @PageNumber INT ,   
  236.     @PageSize INT    
  237. AS  
  238. BEGIN  
  239.     -- SET NOCOUNT ON added to prevent extra result sets from  
  240.     -- interfering with SELECT statements.  
  241.     SET NOCOUNT ON;  
  242.   
  243.     -- Insert statements for procedure here  
  244.     SELECT * FROM dbo.Movie (NOLOCK) ORDER BY ID  
  245.       
  246. END  
  247.   
  248.   
  249. GO  
  250. /****** Object:  StoredProcedure [dbo].[BM_GetMoviesInfo]    Script Date: 4/29/2016 2:47:20 PM ******/  
  251. SET ANSI_NULLS ON  
  252. GO  
  253. SET QUOTED_IDENTIFIER ON  
  254. GO  
  255. -- =============================================  
  256. -- Author:      Nimit Joshi  
  257. -- Create date: 04/29/2016  
  258. -- Description: This sp is used to get movie info  
  259. -- =============================================  
  260. CREATE PROCEDURE [dbo].[BM_GetMoviesInfo]  
  261.     -- Add the parameters for the stored procedure here  
  262.     @MovieId INT  
  263. AS  
  264.     BEGIN  
  265.     -- SET NOCOUNT ON added to prevent extra result sets from  
  266.     -- interfering with SELECT statements.  
  267.         SET NOCOUNT ON;  
  268.   
  269.     -- Insert statements for procedure here  
  270.         SELECT  m.Name ,  
  271.                 m.Genre ,  
  272.                 mi.Director ,  
  273.                 mi.Production ,  
  274.                 mi.ImdbRating ,  
  275.                 mi.FilmfareAward ,  
  276.                 mi.LeadRole  
  277.         FROM    Movie m ( NOLOCK )  
  278.                 INNER JOIN dbo.MovieInfo mi ON m.ID = mi.MovieId  
  279.         WHERE   m.ID = @MovieId  
  280.     END  
  281. GO  

That’s it for the database section.

Working with Web Application

In this section, we will create the architecture of web application and fetch the data from the database and view the data in Razor View and in the Partial View. We will display the data in the Partial view with the help of jQuery UI dialogue or in any simple div.

So, let’s begin with the following procedure:

Adding Model:

Step 1: In the Solution Explorer, right click on the solution and click on “Add New Project”,

Add
                                             Figure 4: Adding New Project

Step 2: Select the “Class Library” and enter the name as “BestMoviesModel”,

BestMoviesModel
                              Figure 5: Adding Class Library Project

Step 3: Now add a class in this project as named “Movie”,

Movie
                                             Figure 6: Adding Class

Step 4: Update the class code with the help of following code:

  1. namespace BestMoviesModel  
  2. {  
  3.     public class Movie  
  4.     {  
  5.         #region Properties  
  6.         public int Id { get; set; }  
  7.         public string Name { get; set; }  
  8.         public string Genre { get; set; }  
  9.         public DateTime ReleasedDate { get; set; }  
  10.         public string Actor { get; set; }  
  11.         public string Actress { get; set; }  
  12.         #endregion  
  13.     }  
  14.   
  15.     public class MovieInfo  
  16.     {  
  17.         #region Properties  
  18.         public int MovieInfoId { get; set; }  
  19.         public string Director { get; set; }  
  20.         public string Production { get; set; }  
  21.         public decimal ImdbRating { get; set; }  
  22.         public int FilmfareAward { get; set; }  
  23.         public string LeadRole { get; set; }  
  24.         #endregion  
  25.     }  
  26.   
  27.     public class Actor  
  28.     {  
  29.         #region Properties  
  30.         public int ActorInfoId { get; set; }  
  31.         public string Name { get; set; }  
  32.         public int Age { get; set; }  
  33.         public DateTime DOB { get; set; }  
  34.         #endregion  
  35.     }  
  36. }  

Step 5: Just build the solution.

Adding Core

In this section, we will add the project which will handle the database. Follow the steps below:

Step 1: In the Solution Explorer, right click on the solution and click on “Add New Project” and select “Class Library” as named “BestMoviesCore”

Step 2: Now add a reference of “BestMoviesModel” solution in this project,

reference
                                                Figure 7: Adding Reference

Step 3: Now in the “BestMoviesCore” project, right click on the References and click on “Manage NuGet Packages” and search for “Enterprise Library” and install it in the project,

Packages
                                    Figure 8: Adding Enterprise Library

Step 4: Now just create two folders as named “BL” and “DAL”.

Step 5: Now add a class in the DAL folder as named “MovieDAL” and replace the code with the following code:

  1. namespace BestMoviesCore.DAL  
  2. {  
  3.     public class MovieDAL  
  4.     {  
  5.         #region Variable  
  6.         ///<summary>    
  7.         /// Specify the Database variable      
  8.         ///</summary>    
  9.         Database objDB;  
  10.         ///<summary>    
  11.         /// Specify the static variable      
  12.         ///</summary>    
  13.         static string ConnectionString;  
  14.         #endregion  
  15.  
  16.         #region Constructor  
  17.         ///<summary>    
  18.         /// This constructor is used to get the connectionstring from the config file        
  19.         ///</summary>    
  20.         public MovieDAL()  
  21.         {  
  22.             ConnectionString = ConfigurationManager.ConnectionStrings["BestMovieConnectionString"].ToString();  
  23.         }  
  24.         #endregion  
  25.  
  26.         #region Database Method  
  27.         public List<T> ConvertTo<T>(DataTable datatable) where T : new()  
  28.         {  
  29.             List<T> Temp = new List<T>();  
  30.             try  
  31.             {  
  32.                 List<string> columnsNames = new List<string>();  
  33.                 foreach (DataColumn DataColumn in datatable.Columns)  
  34.                     columnsNames.Add(DataColumn.ColumnName);  
  35.                 Temp = datatable.AsEnumerable().ToList().ConvertAll<T>(row => getObject<T>(row, columnsNames));  
  36.                 return Temp;  
  37.             }  
  38.             catch  
  39.             {  
  40.                 return Temp;  
  41.             }  
  42.         }  
  43.         public T getObject<T>(DataRow row, List<string> columnsName) where T : new()  
  44.         {  
  45.             T obj = new T();  
  46.             try  
  47.             {  
  48.                 string columnname = "";  
  49.                 string value = "";  
  50.                 PropertyInfo[] Properties;  
  51.                 Properties = typeof(T).GetProperties();  
  52.                 foreach (PropertyInfo objProperty in Properties)  
  53.                 {  
  54.                     columnname = columnsName.Find(name => name.ToLower() == objProperty.Name.ToLower());  
  55.                     if (!string.IsNullOrEmpty(columnname))  
  56.                     {  
  57.                         value = row[columnname].ToString();  
  58.                         if (!string.IsNullOrEmpty(value))  
  59.                         {  
  60.                             if (Nullable.GetUnderlyingType(objProperty.PropertyType) != null)  
  61.                             {  
  62.                                 value = row[columnname].ToString().Replace("$", "").Replace(",", "");  
  63.                                 objProperty.SetValue(obj, Convert.ChangeType(value, Type.GetType(Nullable.GetUnderlyingType(objProperty.PropertyType).ToString())), null);  
  64.                             }  
  65.                             else  
  66.                             {  
  67.                                 value = row[columnname].ToString();  
  68.                                 objProperty.SetValue(obj, Convert.ChangeType(value, Type.GetType(objProperty.PropertyType.ToString())), null);  
  69.                             }  
  70.                         }  
  71.                     }  
  72.                 }  
  73.                 return obj;  
  74.             }  
  75.             catch (Exception ex)  
  76.             {  
  77.                 return obj;  
  78.             }  
  79.         }  
  80.         #endregion  
  81.  
  82.         #region Movie Details  
  83.         /// <summary>  
  84.         /// This method is used to get the movie data    
  85.         /// </summary>  
  86.         /// <param name="PageNumber"></param>  
  87.         /// <param name="PageSize"></param>  
  88.         /// <returns></returns>  
  89.         public List<Movie> GetMovieList(int? PageNumber, int? PageSize)  
  90.         {  
  91.             List<Movie> objGetMovie = null;  
  92.             objDB = new SqlDatabase(ConnectionString);  
  93.             using (DbCommand objcmd = objDB.GetStoredProcCommand("BM_GetMovies"))  
  94.             {  
  95.                 try  
  96.                 {  
  97.                     objDB.AddInParameter(objcmd, "@PageNumber", DbType.Int32, PageNumber);  
  98.                     objDB.AddInParameter(objcmd, "@PageSize", DbType.Int32, PageSize);    
  99.   
  100.                     using (DataTable dataTable = objDB.ExecuteDataSet(objcmd).Tables[0])  
  101.                     {  
  102.                         objGetMovie = ConvertTo<Movie>(dataTable);  
  103.                     }  
  104.                 }  
  105.                 catch (Exception ex)  
  106.                 {  
  107.                     throw ex;  
  108.                     return null;  
  109.                 }  
  110.             }  
  111.             return objGetMovie;  
  112.         }  
  113.   
  114.         ///<summary>    
  115.         /// This method is used to get movie details by movie id      
  116.         ///</summary>    
  117.         ///<returns></returns>    
  118.         public List<MovieInfo> GetMovieInfoById(int Id)  
  119.         {  
  120.             List<MovieInfo> objMovieDetails = null;  
  121.             objDB = new SqlDatabase(ConnectionString);  
  122.             using (DbCommand objcmd = objDB.GetStoredProcCommand("BM_GetMoviesInfo"))  
  123.             {  
  124.                 try  
  125.                 {  
  126.                     objDB.AddInParameter(objcmd, "@MovieId", DbType.Int32, Id);  
  127.                     using (DataTable dataTable = objDB.ExecuteDataSet(objcmd).Tables[0])  
  128.                     {  
  129.                         objMovieDetails = ConvertTo<MovieInfo>(dataTable);  
  130.                     }  
  131.                 }  
  132.                 catch (Exception ex)  
  133.                 {  
  134.                     throw ex;  
  135.                     return null;  
  136.                 }  
  137.             }  
  138.             return objMovieDetails;  
  139.         }  
  140.         #endregion  
  141.  
  142.         #region LeardRole Details  
  143.         ///<summary>    
  144.         /// This method is used to get the movie data        
  145.         ///</summary>    
  146.         ///<returns></returns>    
  147.         public List<Actor> GetLeadRoleDetails(string Name)  
  148.         {  
  149.             List<Actor> objGetLeadRoleActor = null;  
  150.             objDB = new SqlDatabase(ConnectionString);  
  151.             using (DbCommand objcmd = objDB.GetStoredProcCommand("BM_GetActorDetails"))  
  152.             {  
  153.                 try  
  154.                 {  
  155.                     objDB.AddInParameter(objcmd, "@Name", DbType.String, Name);  
  156.                     using (DataTable dataTable = objDB.ExecuteDataSet(objcmd).Tables[0])  
  157.                     {  
  158.                         objGetLeadRoleActor = ConvertTo<Actor>(dataTable);  
  159.                     }  
  160.                 }  
  161.                 catch (Exception ex)  
  162.                 {  
  163.                     throw ex;  
  164.                     return null;  
  165.                 }  
  166.             }  
  167.             return objGetLeadRoleActor;  
  168.         }  
  169.         #endregion  
  170.     }  
  171. }  

Step 6: Now add a class in the “BL” folder as named “MovieBL” and replace the code with the following code:

  1. namespace BestMoviesCore.BL  
  2. {  
  3.     public class MovieBL  
  4.     {  
  5.         /// <summary>  
  6.         /// This method is used to get the movie data    
  7.         /// </summary>  
  8.         /// <param name="PageNumber"></param>  
  9.         /// <param name="PageSize"></param>  
  10.         /// <returns></returns>  
  11.         public List<Movie> GetMovieList(int? PageNumber, int? PageSize)  
  12.         {  
  13.             List<Movie> objGetMovie = null;  
  14.             try  
  15.             {  
  16.                 objGetMovie = new MovieDAL().GetMovieList(PageNumber, PageSize);  
  17.             }  
  18.             catch (Exception)  
  19.             {  
  20.                 throw;  
  21.             }  
  22.             return objGetMovie;  
  23.         }  
  24.   
  25.         ///<summary>    
  26.         /// This method is used to get movie details by movie id      
  27.         ///</summary>    
  28.         ///<returns></returns>    
  29.         public List<MovieInfo> GetMovieInfoById(int Id)  
  30.         {  
  31.             List<MovieInfo> objMovieDetails = null;  
  32.             try  
  33.             {  
  34.                 objMovieDetails = new MovieDAL().GetMovieInfoById(Id);  
  35.             }  
  36.             catch (Exception)  
  37.             {                  
  38.                 throw;  
  39.             }  
  40.             return objMovieDetails;  
  41.         }  
  42.   
  43.         ///<summary>    
  44.         /// This method is used to get the movie data        
  45.         ///</summary>    
  46.         ///<returns></returns>    
  47.         public List<Actor> GetLeadRoleDetails(string Name)  
  48.         {  
  49.             List<Actor> objGetLeadRoleActor = null;  
  50.             try  
  51.             {  
  52.                 objGetLeadRoleActor = new MovieDAL().GetLeadRoleDetails(Name);  
  53.             }  
  54.             catch (Exception)  
  55.             {                  
  56.                 throw;  
  57.             }  
  58.             return objGetLeadRoleActor;  
  59.         }  
  60.     }  
  61. }  

Step 7: That’s it with this section. Now build the solution.

Working with Web Application

Now in this section, we will work with the MVC web application and view the data. Start with the following steps:

Step 1: At first, we will add the reference of “BestMoviesModel” and “BestMoviesCore” projects reference in this project.

reference
                                         Figure 9: Adding Reference in Web

Step 2: Right click on the Models folder and add a class as named “MovieDetails”,

MovieDetails
                                       Figure 10: Adding Class in Models

Step 3: Replace the code with the following code:

  1. using BestMoviesModel;  
  2. using System.Collections.Generic;  
  3.   
  4. namespace BestMovies.Models  
  5. {  
  6.     public class MovieDetails  
  7.     {  
  8.         /// <summary>  
  9.         /// get and set the Movies  
  10.         /// </summary>  
  11.         public List<Movie> Movies { get; set; }  
  12.     }  
  13. }  

Step 4: Now right click on the Controllers folder and click on Add-> New -> Controller.

Step 5: Now in the wizard select the “MVC 5 Empty Controller”,

Controller
                                       Figure 11: Add Scaffold in MVC 5

Step 6: Enter the controller name as “MovieController”,

MovieController
                                       Figure 12: Add Controller in MVC 5

Step 7: Add the following method in the MovieController,

  1. /// <summary>  
  2. /// This method is used to get all movies  
  3. /// </summary>  
  4. /// <param name="PageNumber"></param>  
  5. /// <param name="PageSize"></param>  
  6. /// <returns></returns>  
  7. [HttpGet, ActionName("GetAllMovies")]  
  8. public ActionResult GetAllMovies(int? PageNumber, int? PageSize)  
  9. {  
  10.     List<Movie> objMovie = new List<Movie>();  
  11.     MovieBL objMovieBL = new MovieBL();  
  12.   
  13.     if (object.Equals(PageNumber, null))  
  14.     {  
  15.         PageNumber = 1;  
  16.     }  
  17.     if (object.Equals(PageSize, null))  
  18.     {  
  19.         PageSize = Convert.ToInt32(ConfigurationManager.AppSettings["DefaultPageSize"]);  
  20.   
  21.     }  
  22.     objMovie = objMovieBL.GetMovieList(PageNumber, PageSize);  
  23.   
  24.     return View("~/Views/Movie/BestMovies.cshtml", new MovieDetails() { Movies = objMovie });  
  25. }   

Step 8: Now goto Views-> Movie, right click on it and add view,

add
                                       Figure 13: Adding View in MVC 5

Step 9: Enter the view name as “BestMovies”,

BestMovies
                                             Figure 14: Add View Wizard

Step 10: Add the following code in the view,

  1. @model BestMovies.Models.MovieDetails  
  2. @{  
  3.     ViewBag.Title = "BestMovies";  
  4. }  
  5.   
  6. <h2>Best Movies</h2>  
  7.   
  8. <div class="MovieList">  
  9.     <div id="MoviesGrid">  
  10.         @Html.Partial("~/Views/Movie/_BestMoviesPartial.cshtml", Model.Movies)  
  11.     </div>  
  12. </div>  

Note: We are passing data to the Partial view to load the Movie data.

Step 11: Now add a Partial View as named “_BestMoviesPartial” in the View-> Movie folder,

View
                                    Figure 15: Addding Partial View in MVC 5

Step 12: Now add the following code in this view:

  1. @model List<BestMoviesModel.Movie>  
  2.   
  3. <table class="table-responsive table">  
  4.     <thead>  
  5.         <tr>  
  6.             <th>Name</th>  
  7.             <th>Genre</th>  
  8.             <th>Released Date</th>  
  9.             <th>Actor</th>  
  10.             <th>Actress</th>  
  11.         </tr>  
  12.     </thead>  
  13.     <tbody>  
  14.         @if (Model.Count > 0)  
  15.         {  
  16.             foreach (var movieItem in Model)  
  17.             {  
  18.                 <tr>  
  19.                     <td>@movieItem.Name</td>                      
  20.                     <td>@movieItem.Genre</td>   
  21.                     <td>@movieItem.ReleasedDate.ToShortDateString()</td>   
  22.                     <td>@movieItem.Actor</td>   
  23.                     <td>@movieItem.Actress</td>   
  24.                 </tr>  
  25.             }  
  26.         }  
  27.         else  
  28.         {  
  29.             <tr>  
  30.                 <td>  
  31.                     No Data Found  
  32.                 </td>  
  33.             </tr>  
  34.         }  
  35.     </tbody>  
  36. </table>  

Step 13: Now build the solution and open the Views-> Shared-> _Layout.cshtml and replace the code with the highlighted code below:

  1. <head>  
  2.     <meta charset="utf-8" />  
  3.     <meta name="viewport" content="width=device-width, initial-scale=1.0">  
  4.     <title>@ViewBag.Title - My Movies Application</title>  
  5.     @Styles.Render("~/Content/css")  
  6.     @Scripts.Render("~/bundles/modernizr")  
  7.   
  8. </head>  
  9. <body>  
  10.     <div class="navbar navbar-inverse navbar-fixed-top">  
  11.         <div class="container">  
  12.             <div class="navbar-header">  
  13.                 <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">  
  14.                     <span class="icon-bar"></span>  
  15.                     <span class="icon-bar"></span>  
  16.                     <span class="icon-bar"></span>  
  17.                 </button>  
  18.                 @Html.ActionLink("Best Movies", "Index", "Home", new { area = "" }, new { @class = "navbar-brand" })  
  19.             </div>  
  20.             <div class="navbar-collapse collapse">  
  21.                 <ul class="nav navbar-nav">  
  22.                     <li>@Html.ActionLink("Home", "Index", "Home")</li>  
  23.                     <li>@Html.ActionLink("About", "About", "Home")</li>  
  24.                     <li>@Html.ActionLink("Contact", "Contact", "Home")</li>  
  25.                     <li>@Html.ActionLink("Movies", "GetAllMovies", "Movie")</li>  
  26.                 </ul>  
  27.                 @Html.Partial("_LoginPartial")  
  28.             </div>  
  29.         </div>  
  30.     </div>  
  31.     <div class="container body-content">  
  32.         @RenderBody()  
  33.         <hr />  
  34.         <footer>  
  35.             <p>&copy; @DateTime.Now.Year - Best Movies Application</p>  
  36.         </footer>  
  37.     </div>  
  38.   
  39.     @Scripts.Render("~/bundles/jquery")  
  40.     @Scripts.Render("~/bundles/bootstrap")  
  41.     @RenderSection("scripts", required: false)  
  42. </body>  
  43. </html>  

Step 14: Now open the “Web.config” file of Web application and add the following two lines in your file:

Adding Key:

  1. <add key="DefaultPageSize" value="25" />  
Adding ConnectionString: 
  1. <add name="BestMovieConnectionString" connectionString="Data Source=MCNDESKTOP07;Initial Catalog=BestMovies;User Id = “UserID”;Password=”UserPassword”"  
  2.   
  3. roviderName="System.Data.SqlClient" />  

Step 15: Now run the application and click on the “Movies”,

application
                                    Figure 16: Main Page View of MVC

In the next page you will see Movies data,

Partial View
                                       Figure 17: Partial View in MVC 5

Partial View with jQuery UI Dialogue

In this section, we will pass the Partial View in the jQuery UI Dialogue. For this please follow the steps below:

Step 1: Add the following method in the “MovieController”

  1. /// <summary>  
  2. /// This method is used to get movie information  
  3. /// </summary>  
  4. /// <param name="MovieId"></param>  
  5. /// <returns></returns>  
  6. [HttpGet, ActionName("GetMovieInfo")]  
  7. public ActionResult GetMovieInfo(string MovieId)  
  8. {  
  9.     List<MovieInfo> ObjMovieInfo = new List<MovieInfo>();  
  10.     MovieBL objMovieBL = new MovieBL();  
  11.   
  12.     ObjMovieInfo = objMovieBL.GetMovieInfoById(Convert.ToInt32(MovieId));  
  13.   
  14.     return PartialView("~/Views/Movie/_MovieDetailsPartial.cshtml", new List<MovieInfo>(ObjMovieInfo));  
  15. }  

Step 2: Add another Partial View as named “_MovieDetailsPartial” in the Views->Movie folder and add the following code in it:

  1. @model List<BestMoviesModel.MovieInfo>  
  2.   
  3. <ul class="responsive-MovieDetails">  
  4.     @if (Model.Count > 0)  
  5.     {  
  6.         foreach (var item in Model)  
  7.         {  
  8.             <li class="UserDetailList"><span class="UserDetailHeader">Director</span><span>@item.Director</span></li>  
  9.             <li class="UserDetailList"><span class="UserDetailHeader">IMDB Rating</span><span>@item.ImdbRating</span></li>  
  10.             <li class="UserDetailList"><span class="UserDetailHeader">Production</span><span>@item.Production</span></li>  
  11.             <li class="UserDetailList"><span class="UserDetailHeader">Filmfare Awards</span><span>@item.FilmfareAward</span></li>  
  12.             <li class="UserDetailList"><span class="UserDetailHeader">Lead Role</span><span>@item.LeadRole</span></li>             
  13.         }  
  14.     }  
  15.     else  
  16.     {  
  17.         <li class="NoData">No data found</li>  
  18.     }  
  19. </ul>  

Step 3: Add the reference of jQueryUI from the NuGet Package Manager

reference
                                 Figure 18: Adding jQuery UI NuGet Package

Step 4: Now open “BestMovies.cshtml” and add the following code at the end:

  1. <div class="popupcntr" id="movieInfo_content" style="display: none;" title="Movie Information">  
  2.     <div class="innerBox">  
  3.         <div id="MovieDetails"></div>  
  4.     </div>  
  5. </div>  

Step 5: Now open “_BestMoviesPartial.cshtml” and update the code with the highlighted code below:

  1. @model List<BestMoviesModel.Movie>  
  2.   
  3.   
  4. <table class="table-responsive table">  
  5.     <thead>  
  6.         <tr>  
  7.             <th>Name</th>  
  8.             <th>Genre</th>  
  9.             <th>Released Date</th>  
  10.             <th>Actor</th>  
  11.             <th>Actress</th>  
  12.         </tr>  
  13.     </thead>  
  14.     <tbody>  
  15.         @if (Model.Count > 0)  
  16.         {  
  17.             foreach (var movieItem in Model)  
  18.             {  
  19.                 <tr>  
  20.                     <td><a href="javascript:void(0)" onclick="GetMovieDetails('@movieItem.Id')">@movieItem.Name</a></td>                      
  21.                     <td>@movieItem.Genre</td>   
  22.                     <td>@movieItem.ReleasedDate.ToShortDateString()</td>   
  23.                     <td>@movieItem.Actor</td>   
  24.                     <td>@movieItem.Actress</td>   
  25.                 </tr>  
  26.             }  
  27.         }  
  28.         else  
  29.         {  
  30.             <tr>  
  31.                 <td>  
  32.                     No Data Found  
  33.                 </td>  
  34.             </tr>  
  35.         }  
  36.     </tbody>  
  37. </table>  
  38.   
  39. <script type="text/javascript">  
  40.     function GetMovieDetails(MovieId)  
  41.     {  
  42.         $('#movieInfo_content').dialog({  
  43.             dialogClass: 'moviedetail_dialog',  
  44.             modal: true,  
  45.             open: function (event, ui) {  
  46.                 $.ajax({  
  47.                     url: '@Url.Action("GetMovieInfo", "Movie")',  
  48.                     dataType: "html",  
  49.                     data: { MovieId: MovieId },  
  50.                     type: "GET",  
  51.                     error: function (xhr, status, error) {  
  52.                         var err = eval("(" + xhr.responseText + ")");  
  53.                         toastr.error(err.message);  
  54.                     },  
  55.                     success: function (data) {  
  56.                         $("#divProcessing").hide();  
  57.                         $('#MovieDetails').html(data);  
  58.                     },  
  59.                     beforeSend: function () {  
  60.                         $("#divProcessing").show();  
  61.                     }  
  62.                 });  
  63.             },  
  64.             close: function (event, ui) { $('#movieInfo_content').dialog("destroy"); $('#MovieDetails').html(""); },  
  65.         });  
  66.     }  
  67. </script>  

Step 6: Now add the following css code in the “Site.css”,

  1. .moviedetail_dialog {  
  2.     padding: 20PX;  
  3.     background-color: #fbfbfb;  
  4.     border: 1px solid rgba(0,0,0,0.2);  
  5.     box-shadow: 0 0 6px black;  
  6. }  
  7.   
  8. .ui-widget-header {  
  9.     display: inline-block;  
  10.     font-weight: bold;  
  11.     margin-right: 20px;  
  12. }  
  13.   
  14. .moviedetail_dialog button {  
  15.     display: inline-block;  
  16.     margin-left: 20px;  
  17. }  
  18.   
  19. .responsive-MovieDetails {  
  20.     list-style: none;  
  21.     margin-left: -41px;  
  22.     margin-top: 20px;  
  23. }  
  24.   
  25. .responsive-MovieDetails:after {  
  26.     content: "";  
  27.     display: table;  
  28.     clear: both;  
  29. }  
  30.   
  31. .UserDetailList {  
  32.     margin-bottom: 5px;  
  33.     margin: 0;  
  34.   
  35. }  
  36.   
  37. .UserDetailList:after {  
  38.     content: "";  
  39.     display: table;  
  40.     clear: both;  
  41. }  
  42.   
  43. .UserDetailHeader {  
  44.     width: 118px;  
  45.     float: left;  
  46.     font-weight: bold;  
  47. }  
  48.   
  49.   
  50. .UserDetailHeader + span:before {  
  51.     content: ":";  
  52.     margin-right: 15px;  
  53.     position: absolute;  
  54.     left: -5px;  
  55. }  
  56.   
  57. .UserDetailHeader + span {  
  58.     float: left;  
  59.     width: calc(100% - 118px);  
  60.     padding-left: 10px;  
  61.     position: relative;  
  62. }  
  63.  
  64. #ActorContent .responsive-MovieDetails{  
  65.     border: 1px solid black; padding:2px;  
  66.     margin-left:0;  
  67. }  

Step 7: Now build the solution and run the application. Open the “Movies” page and just click on any Movie Name as shown below:

Movies
                                             Figure 19: View in MVC 5

Step 8: You will show the popup in the main view as shown below:

popup
                                       Figure 20: Partial View in UI dialogue

Now you can see that we have easily implemented and passed the Partial View in the jQuery UI dialogue.

Note: You have to add script tag of jQuery UI in the _Layout page.

Partial View with DIV Element

In this section we will load the Partial View in a div element. Start with the following steps:

Step 1: Add the following method in the “MovieController”,

  1. /// <summary>  
  2. /// This method is used to get actor information  
  3. /// </summary>  
  4. /// <param name="MovieId"></param>  
  5. /// <returns></returns>  
  6. [HttpGet, ActionName("GetLeadRoleDetails")]  
  7. public ActionResult GetLeadRoleDetails(string Name)  
  8. {  
  9.     List<Actor> ObjActorInfo = new List<Actor>();  
  10.     MovieBL objMovieBL = new MovieBL();  
  11.   
  12.     ObjActorInfo = objMovieBL.GetLeadRoleDetails(Name);  
  13.   
  14.     return PartialView("~/Views/Movie/_ActorDetailsPartial.cshtml", new List<Actor>(ObjActorInfo));  
  15. }  

Step 2: Add another Partial View as named “_ActorDetailsPartial” and add the following code:

  1. @model List<BestMoviesModel.Actor>  
  2.   
  3. <ul class="responsive-MovieDetails">  
  4.     @if (Model.Count > 0)  
  5.     {  
  6.         foreach (var item in Model)  
  7.         {  
  8.             <li class="UserDetailList"><span class="UserDetailHeader">Name</span><span>@item.Name</span></li>  
  9.             <li class="UserDetailList"><span class="UserDetailHeader">Age</span><span>@item.Age</span></li>  
  10.             <li class="UserDetailList"><span class="UserDetailHeader">DOB</span><span>@item.DOB.ToShortDateString()</span></li>              
  11.         }  
  12.     }  
  13.     else  
  14.     {  
  15.         <li class="NoData">No data found</li>  
  16.     }  
  17. </ul>  

Step 3: Now change the “_MovieDetailsPartial.cshtml” page code with the highlighted code below:

  1. @model List<BestMoviesModel.MovieInfo>  
  2.   
  3. <ul class="responsive-MovieDetails">  
  4.     @if (Model.Count > 0)  
  5.     {  
  6.         foreach (var item in Model)  
  7.         {  
  8.             <li class="UserDetailList"><span class="UserDetailHeader">Director</span><span>@item.Director</span></li>  
  9.             <li class="UserDetailList"><span class="UserDetailHeader">IMDB Rating</span><span>@item.ImdbRating</span></li>  
  10.             <li class="UserDetailList"><span class="UserDetailHeader">Production</span><span>@item.Production</span></li>  
  11.             <li class="UserDetailList"><span class="UserDetailHeader">Filmfare Awards</span><span>@item.FilmfareAward</span></li>  
  12.             <li class="UserDetailList">  
  13.                 <span class="UserDetailHeader">Lead Role</span><span id="MovieLeadRole">@item.LeadRole <a href="javascript:void(0)" onclick="GetActorDetails('@item.LeadRole')"><img src="~/Images/movie_Info.png" /></a></span>  
  14.                 <div id="ActorContent"></div>  
  15.             </li>  
  16.         }  
  17.     }  
  18.     else  
  19.     {  
  20.         <li class="NoData">No data found</li>  
  21.     }  
  22. </ul>  
  23. <script>  
  24.     //This method is used to edit user location  
  25.     function GetActorDetails(name) {  
  26.         $.ajax({  
  27.             url: '@Url.Action("GetLeadRoleDetails", "Movie")',  
  28.             dataType: "html",  
  29.             data: { Name: name },  
  30.             type: "GET",  
  31.             error: function (xhr, status, error) {  
  32.                 var err = eval("(" + xhr.responseText + ")");  
  33.                 toastr.error(err.message);  
  34.             },  
  35.             success: function (data) {  
  36.                 $("#MovieLeadRole").css("visibility", "hidden");  
  37.                 $('#ActorContent').html("");  
  38.                 $('#ActorContent').html(data);  
  39.                 $('#ActorContent').show();  
  40.             }  
  41.         });  
  42.     }  
  43. </script>  

Step 4: Now run the application and click on the Movie Name to show the information,

application
                           Figure 21: Loading Partial View in Div Element

Step 5: Now click on the info icon and the newly added Partial View will load in the Div element as shown below:

Partial View in Div Element
                                       Figure 22: Partial View in Div Element

That’s it.

Summary

So far this article describes how to show the data in the Partial View and how we can load Partial View in different manner as in jQuery UI Dialogue or in Div Element. Thanks for reading the article. Happy Coding!!

Read more articles on ASP.NET:


Similar Articles