MVC 3 Razor And Partial View

How do I use a partial view in MVC 3?

Great!! Sometime, I don't know why, I stuck for small things. I was trying to load two partial views(MVC 3). But, after spending 6 hours I got to know how to load.

This retards my brain. I have been searching for good articles on MVC 3 & Partial views. But, I failed to find any.

So, Let us go in dept on MVC3 & Partial Views.

Partial views and User Controls are somewhat similar in purpose of usage. But the way in which they are used is totally different. I will explain about these in detail.

Step 1:

Create an ASP.NET MVC 3 project using VS 2010. I have named it as ARVPartialView.

Add one partiaview and name it as PartialIndex



Step 2:

I have created one module like PartialModel as given below.

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

namespace ARVPartialView.Models
{
    public partial class PartialModel
    {
        public string Name { get; set; }
        public int Actual { get; set; }
        public int Target { get; set; }
        public int Score { get; set; }
    }

    public partial class PartialModel
    {
        public List<PartialModel> lstPartialModel { get; set; }
 
    }
}

Step 3:

Now the time to add some values to this list. The solution structure looks like as given bellow.

Since I like render partial view over Home/Index, So, I have written one function in HomeController.

   public class HomeController : Controller
    {
        public ActionResult Index()
        {
            ViewBag.Message = "Welcome to ASP.NET MVC!";
            /// <summary>
            /// TODO:To get data and returning result to the index view..
            /// </summary>
            /// <returns></returns>
            return View(new PartialModel() { lstPartialModel = GetSampleData() });

        }

        public ActionResult About()
        {
            return View();
        }

        /// <summary>
        /// TODO:Function to add some data to list.
        /// </summary>
        /// <returns></returns>
        private List<PartialModel> GetSampleData()
        {
            List<PartialModel> model = new List<PartialModel>();

            model.Add(new PartialModel()
            {

                Name = "Aravind",
                Actual = 10000,
                Target = 12000,
                Score = 83
            });

            model.Add(new PartialModel()
            {
 
                Name = "Ram",
                Actual = 8000,
                Target = 14000,
                Score = 57
            });
            model.Add(new PartialModel()
            {
                Name = "Ajay",
                Actual = 50000,
                Target = 35000,
                Score = 143
            });

            return model;
        }
    }

Step 4:

In Index view, I have included partial view as given bellow. As like web usercontrol, partial view doest initiate any events while loading Just like initializecomponet etc. So, we have to pass the list to partial view in the parent page.

<!--
Author:Aravind
Module:PartialView.
Created On:07/12/2011
Modified By:
Modified On:

-->
@model IEnumerable<ARVPartialView.Models.PartialModel>
@using ARVPartialView.Models
    ViewBag.Title = "Aravind' PartialView Test !!";
}
<div data-role="page" data-title="Aravind's Partial View Test" data-add-back-btn="true" data-back-btn-text="Back">
    <div class="grid" style="margin-left: 5px;" id="grid">
        @if (Model != null)
        {
            <div class="grid">
                <table cellspacing="0" width="80%">
                    <thead>
                        <tr>
                            <th>
                                Name
                            </th>
                            <th>
                                Actual
                            </th>
                            <th>
                                Target
                            </th>
                            <th>
                                Score
                            </th>
                        </tr>
                    </thead>
                    <tbody>
                        @foreach (var itm in Model)
                        {
                            <tr>
                                <td align="center">
                                    @itm.Name
                                </td>
                                <td align="center">
                                    @itm.Actual
                                </td>
                                <td align="center">
                                    @itm.Target
                                </td>
                                <td align="center">
                                    @itm.Score
                                </td>
                            </tr>
                        }
                    </tbody>
                </table>
                <br />
                <br />
                <br />
                <br />
            </div>

        }
    </div>
</div>

Step 5:

Render partial view on Index view.

<!--
Author:Aravind
Module:PartialView.
Created On:07/12/2011
Modified By:
Modified On:

-->
@model ARVPartialView.Models.PartialModel
@{
    ViewBag.Title = "Home Page";
}
<h2>@ViewBag.Message</h2>
<p>
    To learn more about Hot Topics <a href="http://silverlightarvind.blogspot.com" title="Enjoy the Concept(Aravind)" />
    <a href="http://www.c-sharpcorner.com/Authors/aravindbenator/aravind-bs.aspx." title="About Me" />
    <div>
        @Html.Partial("IndexPartial", Model.lstPartialModel)
    </div>
</p>

Step 6:

Run the application.