Dynamic header and side menu on MVC 3 - asp.net-mvc

Question

I would like to know how I can render a custom header (based on customerid) and a side menu (again, based on the customerid) + the main content.
On a search page, I have a list of customers. When I select a customer, it will take me to another page passing the id of that customer (/controller/action/id). However, on this new page, I would like to list customer details on the header (name, email, phone, etc), on the side menu, I would like to list the pets that this customer owns (dog1, cat2, etc) and on the main content I want to show details of the first pet on the list (side menu). The list of pets on the side menu should be links. For instance, the dog1 should be a link to its own details shown on the main content. Cat2 should be a link to show details on the main content, etc
I just don't know how I am going to pass the id to the header, side menu and content page, all at once!
I have seen the mvcMusicStore where we have a list of the genres on the left menu, but that does not change! In my case, the side menu should change according to the customer selected on the previous page! Make sense?

Answer 1

You have multiple choices. At first, you can use partial views:
in layout.cshtml [or in your usecase, search page]:
#Html.Partial(your-partial-view-name)
view: headerPartial.cshtml as an example:
#if(User.Identity.IsAuthenticated) {
<span>Welcome</span> #User.Identity.Name
} else {
<span>Login or Register</span>
}
This is the base logic. For your situation, you need something like this. But, if you have to load some data from for example database, I would suggest you using partial actions:
// in layout or search or any page you want to render partial views:
// For example you have a controller named MyPartials:
// Put this line where you want to render header:
#Html.Action("HeaderInfo", "MyPartials")
and action:
public class MyPartialsController : Controller {
public ActionResult HeaderInfo() {
var model = retrive header needed info from db
return Partial(model);
}
}
Let me know more about your problem in details, to suggest you a good solution
UPDATE:
Suppose:
Controller: CustomerController
Action: SeletedCustomer
Solution:
1. Models:
public class HeaderInfoModel { } // contains header data: name, email, phone, etc
public class SideInfoModel { } // dog1, cat2, etc
public class MainContentModel { } // holding main content data
// bringing all together
public class CustomerModel {
public HeaderInfoModel HeaderInfo { get; set; }
public SideInfoModel SideInfo { get; set; }
public MainContentModel MainContent { get; set; }
}
2. Controller
public class CustomerController : Controller {
public ActionResult SeletedCustomer(int id) {
// use id and retrieve data you want, from db or anywhere else you want
var model = new CustomerModel {
HeaderInfo = SomeMethodToFetchHeaderData(id),
SideInfo = SomeMethodToFetchSideData(id),
MainContent = SomeMethodToFetchMainContent(id)
};
return View(model);
}
}
3. Main View: Customer/SeletedCustomer.cshtml
#model CustomerModel
<div id="header">
<!-- put this where you want to render header -->
#Html.DisplayFor(model => model.HeaderInfo)
</div>
<div id="side">
<!-- put this where you want to render side -->
#Html.DisplayFor(model => model.SideInfo)
</div>
<div id="main">
<!-- put this where you want to render main content -->
#Html.DisplayFor(model => model.MainContent)
</div>
4. In your situation, using Display Templates is the easiest way. Create a folder named DisplayTemplates in one of these places: ~/Views/Customer/ or ~/Views/Shared. It depends on where and how you want to use provided models. Again, in your case, I suggest create this: ~/Views/Customer/DisplayTemplates/. And then add some views in that folder, which are described below:
4.1. Create HeaderInfoModel.cshtml in ~/Views/Customer/DisplayTemplates/:
#model HeaderInfoModel
<div>
implement your model presentation, I mean, show the data how you want
</div>
4.2. Create SideInfoModel.cshtml in ~/Views/Customer/DisplayTemplates/:
#model SideInfoModel
<div>
implement your model presentation, I mean, show the data how you want
</div>
4.3. Create MainContentModel.cshtml in ~/Views/Customer/DisplayTemplates/:
#model MainContentModel
<div>
implement your model presentation, I mean, show the data how you want
</div>
That is it. Done! With your situation, the best way I can suggest is that. However, you have multiple choices; It's completely depended on your project.

Answer 2

You probably need to use some kind of partial view with condition like it shown below inside razor
if(this is correct page && CustomerID is available) { show the view }
You can pass parameters in ViewBag and use them inside your view.
If you are new to ASP.NET MVC, here are some cool tutorials http://www.asp.net/mvc.
And here is tutorial of building partial views http://mvc4beginner.com/Tutorial/MVC-Partial-Views.html for beginners.
Hope this helps