MVC 3 Razor And Partial View

MVC 3 Razor And Partial View

How do I use 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 searching for good articles on MVC 3 & Partial views. But, I failed to get it.
So, Let us go in dept on MVC3 & Partial Views.
Partial view and User Controls are somewhat same in purpose of usage. But the way in which they is totally different. I will explain about these in detail.

Step 1
Create ASP.Net MVC 3 project using VS 2010. I have named it as ARVPartialView.
Add one partiaview and name it as PartialIndex

Step2
I have created one module like PartialModel as given bellow.
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 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!";
///

/// TODO:To get data and returning result to the index view..
///

///
return View(new PartialModel() { lstPartialModel = GetSampleData() });

}

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


///

/// TODO:Function to add some data to list.
///

///
private List GetSampleData()
{
List model = new List();

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.

Step 5
Render partial view on Index view.

Step 6

Run the application.



Have a nice time & enjoy..
aravindbenator@gmail.com
http://silverlightarvind.blogspot.com

Please watch and subscribe to my channel: 

https://www.youtube.com/playlist?list=UUN09Z5u6ypUvdxQkp6y2oFg