Click here to Skip to main content
65,938 articles
CodeProject is changing. Read more.
Articles
(untagged)

Creating a Partial View in MVC

0.00/5 (No votes)
10 Sep 2014 1  
In this tip, we will learn how to create a partial view and use that view in the parent view.

What is Partial View

A partial view is a view that can be rendered inside any other view, called the parent view. Partial view in MVC basically does the same job that user control does in web forms. Both are used for code reusability, so, a partial view can be called as a reusable view.

Partial view is generally used if we have reusable content in the page like header, footer, menu bar, left navigation bar, etc. It also divides the large page into smaller view so it is easy to code and maintain.

Create a View

Creating a view is as simple as adding a new page in the current web application.

Views-->Right click on module Add-->View

Creating a view

Create a Partial View

Creating a partial view is the same as creating a generally view. Here is how we can create a view.

Pass Data to the View

This is the important part. Rendering a view means showing data in the UI.

The partial view has access to the same ViewData dictionary which is used by the view page. So, most of the time, we do not need to pass all the entities to the partial view. We can directly access the ViewData dictionary and show that in the partial view. But some time, if the viewData dictionary is empty, we need to fetch the data and pass that to the view.

For that, we need to define a controller and a model.

Create a Model

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;

namespace PartialViewDemo.Models
{
    public partial class Book
    {
        public string BookName { get; set; }
        public int AuthorName { get; set; }
        public string ISBN { get; set; }       
    }
    public partial class Book
    {
        public List<Book> Books { get; set; }
    }
}

Create a Controller

Then, we have to define the Controller:

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.Mvc;
using PartialViewDemo.Models;

namespace PartialViewDemo.Controllers
{
    public class BookController : Controller
    {
        public ActionResult Index()
        {            
            ViewBag.Message = "Here are the Book Details!";

            return View(new Book() { Books = GetDetails() });
        }
    private List<Book> Sampledetails()
        {
            List<Book> model = new List<Book>();

            model.Add(new Book()
            {
                BookName = "C#",
                AuthorName = "C#",
                ISBN = "1"
            });

            model.Add(new PartialModel2()
            {
                BookName = "Java",
                AuthorName = "Java",
                ISBN = "1"
            });
            model.Add(new PartialModel2()
            {
                BookName = "C++",
                AuthorName = "C++",
                ISBN = "1"
            });

            return model;
        }       
    }
}

We need to define the structure of the view here.

@model IEnumerable<PartialViewDemo.Models.Books>
@using PartialViewDemo.Models
   
        @if (Model != null)
        {
            <div class="grid">
                <table cellspacing="0" width="80%">
                    <thead>
                        <tr>
                            <th>
                                BookName
                            </th>
                            <th>
                                AuthorName
                            </th>
                            <th>
                                ISBN
                            </th>
                           
                        </tr>
                    </thead>
                    <tbody>
                        @foreach (var item in Model)
                        {
                            <tr>
                                <td align="left">
                                    @item.BookName
                                </td>
                                <td align="left">
                                    @item.AuthorName
                                </td>
                                <td align="left">
                                    @item.ISBN
                                </td>
                                
                            </tr>
                        }
                    </tbody>
                </table>
                
            </div>
        }

If we will check the create a strongly typed view from the add view window while creating the view, then we do not need to define the view. In that case, automatically index, Edit, Details, Delete, Create view will be added to the project.

Finally, we need to render the partial view in the parent view:

<div>
        @Html.Partial("PartialView1", Model.partialModel)
</div>

License

This article has no explicit license attached to it but may contain usage terms in the article text or the download files themselves. If in doubt please contact the author via the discussion board below.

A list of licenses authors might use can be found here