Creating a Partial View in MVC

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

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>