MVC 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.