Introduction:

In this article we will learn how to use PartialView in mvc or how to  create reusable view in mvc with example.

Description:

In mvc Partial view is just like a web User Control in ASP.NET web form technology.

Partial views are used to componentize Razor views and make them easier to build and update. Partial views can also be returned directly from controller methods. In this case, the browser still receives text/html content but not necessarily HTML content that makes up an entire page.

To create the reusable components we will use the Partial Views. There are two types of Partial Views:

1. Static Partial View: Static Partial View is used to render the static data.

  • @{Html.RenderPartial(“_PartialView”);} - It will return the void. Displays the output on your view page.
  • @Html.Partial(“_PartialView”); - It will return MVC HTML string, you can store it in a particular variable.

2. Dynamic Partial View: Dynamic Partial Views are used to implement the dynamic data.

  • @{Html.RenderAction(“_PartialView”);} 
  • @Html.Action(“_PartialView”);- It will return MVC HTML string.

Open Visual Studio and click on New Project link.

using partial views in asp.net mvc 4

In the following figure select “Templates”, Visual C#, then ASP.NET Web Application, and here I give the name of project “partial”.
You can give the project name as you wish.
And then click on “OK” button.

using partial views in asp.net mvc 4

In the following figure as you can see the default MVC will be selected, select MVC and then click “OK” button.

using partial views in asp.net mvc 4

In the following  right click on the shared folder and click on the Add =>View.

using partial views in asp.net mvc 4

Here in the view name I have used (_), because it is a naming convention. Whenever you are going to add a partial view you must use (_).
Check the “Create as a partial view".
Click on “Add” button.
 

using partial views in asp.net mvc 4

Now write the following code in  “_LoginPartial” View.

@model
partial.Models.LoginModel
@{
    ViewBag.Title = "Log in";
}
 
<hgroup class="title">
    <h1>@ViewBag.Title.</h1>
</hgroup>
 
<section id="loginForm">
    <h2>Use a local account to log in.</h2>
    @using (Html.BeginForm(new { ReturnUrl =ViewBag.ReturnUrl }))
    {
        @Html.AntiForgeryToken()
        @Html.ValidationSummary(true)
 
        <fieldset>
            <legend>Log in Form</legend>
            <ol>
                <li>
                    @Html.LabelFor(m =>m.UserName)
                    @Html.TextBoxFor(m => m.UserName)
                    @Html.ValidationMessageFor(m=> m.UserName)
                </li>
                <li>
                    @Html.LabelFor(m =>m.Password)
                    @Html.PasswordFor(m =>m.Password)
                    @Html.ValidationMessageFor(m=> m.Password)
                </li>
                <li>
                    @Html.CheckBoxFor(m =>m.RememberMe)
                    @Html.LabelFor(m =>m.RememberMe, new { @class = "checkbox" })
                </li>
            </ol>
            <input type="submit" value="Log in" />
        </fieldset>
        <p>
            @Html.ActionLink("Register", "Register") if you don't have an account.
        </p>
    }
</section>
 
<section class="social" id="socialLoginForm">
    <h2>Use another service to log in.</h2>
  
</section>
 
@section Scripts {
    @Scripts.Render("~/bundles/jqueryval")
}

 

In the following figure, we have an Index(),, so to add a view, right click on Index() and click on "Add View"

using partial views in asp.net mvc 4

Now write the following code in index view:

@{
    ViewBag.Title = "Index";
}
 
@Html.Partial("_LoginPartial")

Press F5 to run the application.

So here is the following output: 

 using partial views in asp.net mvc 4

I hope it will good for you.

comments


Leave a comment

Make sure you enter the (*) required information where indicated. HTML code is not allowed.

You may also like