Home > DeveloperSection > Beginner > Working with Partial View in ASP.NET MVC

Working with Partial View in ASP.NET MVC


ASP.NET MVC View 
Ratings:
0 Comment(s)
 1639  View(s)
Rate this:

Working with Partial View in ASP.NET MVC

Hi everyone in this article I’m explaining about partial view.

Introduction:

ASP.NET MVC consists of three main parts - Model, View and Controller. Model represents the business entity or domain object and it manages the state of View. Controller controls the application logic and communication between Model and View. A view represents the user interface, which receives input from user and sends to controller for further action. In this article, I explain about ASP.NET MVC special views like Partial Views and Layouts.

If you want to reuse a view in your web application, you can go for the partial view concept. Partial view is like a regular view with a file extension .cshtml. We can use partial views in a situation where we need a header, footer reused for an MVC web application. We can say that it’s like a user control concept in ASP.NET.

Partial Views:

A partial view enables you to define a view that will be rendered inside a parent view. Partial views are implemented as ASP.NET user controls (.ascx).

When a partial view is instantiated, it gets its own copy of the ViewDataDictionary object that is available to the parent view. The partial view therefore has access to the data of the parent view. However, if the partial view updates the data, those updates affect only the partial view's ViewData object. The parent view's data is not changed.

By using partial view we can render a view inside a parental view and to create reusable content in the project

Follow this example:

Create a Model class for partial view Named it as Student.cs

Student.cs:

using System;

using System.Collections.Generic;

using System.Linq;

using System.Web;

 

namespace MVCRouting.Models

{

    Public partial class Student

    {

        public string Name { get; set; }

        public int Age { get; set; }

        public string Address { get; set; }

    }

    public partial class Student

    {

        public List<Student> partialModel { get; set; }

    }

}

 

Add HomeController with following methods:

 

using MVCRouting.Models;

using System;

using System.Collections.Generic;

using System.Linq;

using System.Web;

using System.Web.Mvc;

 

namespace MVCRouting.Controllers

{

    public class HomeController : Controller

    {

        //

        // GET: /Home/

 

        public ActionResult Index()

        {

            ViewBag.Message = "Welcome to ASP.NET MVC!";

 

            return View(new Student() { partialModel = Sampledetails() });

        }

        private List<Student> Sampledetails()

        {

            List<Student> model = new List<Student>();

 

            model.Add(new Student()

            {

 

                Name = "Kamlakar",

                Age = 20,

                Address = "Allahabad"

            });

 

            model.Add(new Student()

            {

 

                Name = "Rohit",

                Age = 23,

                Address = "Goa"

            });

            model.Add(new Student()

            {

                Name = "Pawan",

                Age = 22,

                Address = "Delhi"

            });

 

            return model;

        }

 

    }

}

 

Add Partial View

Views>>Right click on ‘Shared’>>Add>>View

Name the View as'_Details' and Check on the checkbox 'Create as a partial view',the click on 'Add' button.

 

 

@model IEnumerable<MVCRouting.Models.Student>

@using MVCRouting.Models

 

<link href="~/Content/bootstrap/css/bootstrap.min.css" rel="stylesheet" />

<br /><br />

<div class="container">

    @if (Model != null)

    {

        <div class="table-responsive">

            <table class="table table-bordered table-striped">

                <thead>

                    <tr>

                        <th>Name

                        </th>

                        <th>Age

                        </th>

                        <th>Address

                        </th>

 

                    </tr>

                </thead>

                <tbody>

                    @foreach (var item in Model)

                    {

                        <tr>

                            <td align="left">

                                @item.Name

                            </td>

                            <td align="left">

                                @item.Age

                            </td>

                            <td align="left">

                                @item.Address

                            </td>

 

                        </tr>

                    }

                </tbody>

            </table>

 

        </div>

 

    }

</div>

 

Render the partial view into Index(parental) view.

Index.cshtml

 

@model MVCRouting .Models.Student

@{

    ViewBag.Title = "Home Page";

}

 

<p>

   

    <div>

        @Html.Partial("_Details", Model.partialModel)

      

    </div>

</p>

 

Output:


Don't want to miss updates? Please click the below button!

Follow MindStick