Overview Of Partial View In ASP.NET MVC

In this article, you will come to know about following things.

What is View?
View explanation for WebForm User
What is Partial View?
Partial View explanation for WebForm User
What is Html.Partial?
What is Html.RenderPartial?
What is difference between Partial vs RenderPartial?
Step by step implementation

What is View?

In ASP.NET MVC, View is funtionable with the help of Controller. All the incoming browser requests first come to the Controller and then the Controller will decide which action or view execute.

View For WebForm Users

In ASP.NET webform, all the incoming browser requests come to ASPX file and file execute directly on browser very easily. That's why we know which file is currenly running.

Here you should keep in mind that all incoming browser requests knock the door of controller action and that action will decide which view should be executed on board.

To understand about view step by step go through these links,

http://www.c-sharpcorner.com/UploadFile/2f59d0/introduction-to-mvc/
https://docs.microsoft.com/en-us/aspnet/mvc/overview/older-versions-1/views/asp-net-mvc-views-overview-cs

What is Partial View?

This is useful for splitting the code and can be reused in different view(s). It helps to reduce duplicate coding.

There is no restriction to use partial view. We can create partial view with model without model attachement also. This help sus to work smarter and faster on project.

Partial View For WebForm User

In web form you know UserControl (ASCX file), yes this is similar kind of terminology. Partial view of MVC is the same thing as Usercontrol in WebForm. Which helps to reuse the code.

Example

In e-commerce sites we have to display products list and product details; in this scenario we can use this.
Club site mostly displays the member detail.

In this article we will create partial view for Member detail.

What is Html.Partial?

It generates a bunch of code of html with data or without data. It returns HTML encoded string which can be stored in variable.

What is Html.RenderPartial?

It also generates a bunch of code of html but cannot be stored in variable. It writes content directly to the response stream that's why we call this with complete line of C#.

What is the difference between Partial vs RenderPartial?

Html.Partial return a string.

Html.RenderPartial returns void and it directly writes to the response stream.

Html.Partial is not required in C# ; line terminator is at the end.

Html.RenderPartial is required C# ; line terminator is at the end.

Please, visit this link to learn more.

Step By Step Implementation

Before we start working on project first create table named “tblMembers”.

tblMembers Structure

ASP.NET

tblMembers table SQL script

/****** Object: Table [dbo].[tblMembers] Script Date: 07-Oct-17,Sat 4:51:48 PM ******/
SET ANSI_NULLS ON
GO
SET QUOTED_IDENTIFIER ON
GO
SET ANSI_PADDING ON
GO
CREATE TABLE [dbo].[tblMembers](
[MemberID] [int] IDENTITY(1,1) NOT NULL,
[MemberName] [varchar](50) NULL,
[MemberCity] [varchar](25) NULL,
[MemberPhone] [varchar](15) NULL
) ON [PRIMARY]
GO
SET ANSI_PADDING OFF
GO

Sample data of tblMembers

ASP.NET

Start Visual Studio click on File-->New Project

project named “PartialView”

ASP.NET

Select MVC

ASP.NET

Wait for project to get loaded on solution explorer.

ASP.NET

Now Double click on Web.Confing

Web.Confing file setting for ConnectionString

<configuration>
<connectionStrings>
<add name="ClubConnectionString" connectionString="Data Source=admin;Initial Catalog=MBkTest;Persist Security Info=True;User ID=sa;Password=clserver" providerName="System.Data.SqlClient"/>
</connectionStrings>
</configuration>

Right click on solution explorer -->Add-->New Item-->

ASP.NET

Named LinqToSql Classes as ClubHouseDataClasses.dbml

Click on add button. Open Server explorer and drag and drop tblMembers from server explorer to ClubHouseDataClasses DBML canvas.

ASP.NET

Double click on HomeController, create a new Method named: MemberList

This method will generate a list of members and give it to view.

public ActionResult MemberList()
{
var db = new ClubHouseDataClassesDataContext();
var memberList2 = db.tblMembers.ToList().AsEnumerable();
return View(memberList2);
}

After writing the above code, now it's time to create a view.

Right click on MemberList method select Add View…

ASP.NET

Fill in the details of dialog box as given below.

ASP.NET

MemberList.cshtml created inside following folder,

Views-->Home-->MemberList.cshtml

At bottom of MemberList check and correct code as given below,

<td>
@Html.ActionLink("Edit", "MemberEdit", new { id=item.MemberID }) |
@Html.ActionLink("Details", "MemberDetail", new { id=item.MemberID}) |
@Html.ActionLink("Delete", "MemberDelete", new { id=item.MemberID })
</td>

MemberList.cshtml Code

@model IEnumerable<PartialView.tblMember>
@{
ViewBag.Title = "MemberList";
Layout = "~/Views/Shared/_Layout.cshtml";
}
<h2>MemberList</h2>
<p>
@Html.ActionLink("Create New", "Create")
</p>
<table class="table">
<tr>
<th>
@Html.DisplayNameFor(model => model.MemberID)
</th>
<th>
@Html.DisplayNameFor(model => model.MemberName)
</th>
<th>
@Html.DisplayNameFor(model => model.MemberCity)
</th>
<th>
@Html.DisplayNameFor(model => model.MemberPhone)
</th>
<th></th>
</tr>
@foreach (var item in Model) {
<tr>
<td>
@Html.DisplayFor(modelItem => item.MemberID)
</td>
<td>
@Html.DisplayFor(modelItem => item.MemberName)
</td>
<td>
@Html.DisplayFor(modelItem => item.MemberCity)
</td>
<td>
@Html.DisplayFor(modelItem => item.MemberPhone)
</td>
<td>
@Html.ActionLink("Edit", "MemberEdit", new { id=item.MemberID }) |
@Html.ActionLink("Details", "MemberDetail", new { id=item.MemberID}) |
@Html.ActionLink("Delete", "MemberDelete", new { id=item.MemberID })
</td>
</tr>
}
</table>

Now you can run your code to view how member list is appearing on screen.

ASP.NET

Your output will look like the above screen.

Now switch back to HomeController for writing Member Detail functionality. Create a new ActionMethod named MemberDetail

public ActionResult MemberDetail(int id)
{
var db = new ClubHouseDataClassesDataContext();
var memberdetail = (from a in db.tblMembers where a.MemberID == id select a).FirstOrDefault();
return View(memberdetail);
}

After writing the above code, now it's time to create a view.

Right click on MemberDetail method select Add View…

ASP.NET

Fill in the details of dialog box as given below.

ASP.NET

MemberDetail.cshtml is created inside following folder,

Views-->Home-->MemberDetail.cshtml

Open MemberDeail.cshtml file and delete entire code and put the following code.

@model PartialView.tblMember
@{
ViewBag.Title = "MemberDetail";
Layout = "~/Views/Shared/_Layout.cshtml";
}
<h2>MemberDetail</h2>
<div>
<p><i>Start of Partial View</i></p>
@Html.Partial("_MemberDetailView",Model)
<p><i>End of Partial View</i></p>
@Html.ActionLink("Edit", "Edit", new { id = Model.MemberID }) |
@Html.ActionLink("Back to List", "MemberList")
</div>

ASP.NET

Now we are going to create PartialView. Right click on Shared folder

Select Add-->View

ASP.NET

After click on Add-->View

This dialog will appear

ASP.NET

Your Views folder should look like this image of Solution Explorer:

ASP.NET

_MemberDetailView.cshtml code

@model PartialView.tblMember
<div>
<hr />
<dl class="dl-horizontal">
<dt>
@Html.DisplayNameFor(model => model.MemberID)
</dt>
<dd>
@Html.DisplayFor(model => model.MemberID)
</dd>
<dt>
@Html.DisplayNameFor(model => model.MemberName)
</dt>
<dd>
@Html.DisplayFor(model => model.MemberName)
</dd>
<dt>
@Html.DisplayNameFor(model => model.MemberCity)
</dt>
<dd>
@Html.DisplayFor(model => model.MemberCity)
</dd>
<dt>
@Html.DisplayNameFor(model => model.MemberPhone)
</dt>
<dd>
@Html.DisplayFor(model => model.MemberPhone)
</dd>
</dl>
</div>

Now change the RouteConfig.Cs file which is located inside AppStart folder.

public static void RegisterRoutes(RouteCollection routes)
{
routes.IgnoreRoute("{resource}.axd/{*pathInfo}");
routes.MapRoute(
name: "Default",
url: "{controller}/{action}/{id}",
defaults: new { controller = "Home", action = "MemberList", id = UrlParameter.Optional }
);
}

I had made MemberList actionmethod as default action method of application.

Now it's time to Run Application by pressing F5.

Output

Screen 1

ASP.NET

Screen 2

ASP.NET

Thank you… Happy Coding…Enjoy