How to populate mvc razor partial view - asp.net-mvc

I need to create a view that displays Order Header information and I need to add a patial view that displays a grid of Line Items. The partial view will be strongly typed from a viewmodel. I understand that I should use the html helper #Html.Partial("Path/view"). I have only used controllers up til now to open a view, populating the viewmodel before sending it to the view. Since the partial view is being called form the html helper, I would like to know is what would be the best way to populate the parital view with the model data.

Option 1: Inherit from parent page
By default, any partial view rendered by calling #Html.Partial("PartialViewName") will get the view model passed to the parent view.
So if you have:
View Model
namespace MyNamesapce
{
public OrderInfoViewModel
{
public string OrderTitle { get; set; }
public IEnumerable<OrderItem> OrderItems { get; set; }
}
}
OrderInfo.cshtml
#model MyNamespace.OrderInfoViewModel
<h1>#Model.OrderTitle</h1>
#Html.Partial("OrderLineItems")
The OrderLineItems page should get a MyNamespace.OrderViewModel passed to it... so your partial view should look like this:
OrderLineItems.cshtml
#model MyNamespace.OrderInfoViewModel
foreach (var orderItem in Model.OrderItems)
{
//Do stuff
}
Option 2: Specify model
You can use the second parameter to specify the view model to be passed. I.e.
OrderInfo.cshtml
#model MyNamespace.OrderInfoViewModel
<h1>#Model.OrderTitle</h1>
#Html.Partial("OrderLineItems", Model.OrderItems)
OrderLineItems.cshtml
#model IEnumerable<OrderItem>
foreach (var orderItem in Model)
{
//Do stuff
}
Option 3: Use partial actions
If you need to reuse a partial view over multiple pages, it could be a good idea to use a partial view to eliminate having to populate different view models with the same info just because the page is going to be using the same partial.
E.g.
View Model
namespace MyNamesapce
{
public OrderInfoViewModel
{
public string OrderTitle { get; set; }
}
}
Controller
public class OrderController : Controller
{
public ActionResult OrderInfo(int orderId)
{
OrderInfoViewModel viewModel = GetViewModel(orderId);
return View(viewModel);
}
public PartialViewResult OrderLineItems(int orderId)
{
IEnumerable<OrderItem> orderItems = GetOrderItems(orderId);
return Partial(orderItems);
}
}
OrderInfo.cshtml
#model MyNamespace.OrderInfoViewModel
<h1>#Model.OrderTitle</h1>
#Html.Action("OrderLineItems")
OrderLineItems.cshtml
#model IEnumerable<OrderItem>
foreach (var orderItem in Model.OrderItems)
{
//Do stuff
}

With a partial view, you are just sending in a Model just like you would with a normal View. For example, if your Model has a property of LineItem objects named 'LineItems' you simply would do this:
#Html.Partial("_PartialName", Model.LineItems)
Now if your Model does not have that property, you can either add it, or pass it another way, like ViewBag (I prefer a strongly typed method, but that is my opnion:
#Html.Partial("_PartialName", (List<LineItem>)ViewBag.LineItems)
These are not the only ways, but they are my preferred methods.

Related

Is there a way to share data between instances of razor display templates?

I have a Razor view that iterates over a collection property on the view model, and a display template for a single item on that collection. In that single item, I then do the same thing again, so that under the hood I have nested loops that render instances of the same type a number of times on the page.
In the display template for the leaf type, I'd like to find out how many similar items have already been rendered to the page.
I tried to add a property to the ViewBag and increment it on each iteration, but that didn't work.
Model
public class FooViewModel
{
public IEnumerable<Bar> Bars { get; set; }
}
public class BarViewModel
{
public IEnumerable<Baz> Bazes { get; set; } // how do you pluralize baz?
}
public class BazViewModel
{
}
Index.cshtml
#model FooViewModel
#{
ViewBag.RenderCount = 0;
}
#Html.DisplayFor(m => m.Bars);
DisplayTemplates/BarViewModel.cshtml
#model BarViewModel
#Html.DisplayFor(m => m.Bazes);
DisplayTemplates/BazViewModel.cshtml
#model BazViewModel
// how many BazViewModels have been rendered before this one?
#ViewBag.RenderCount // is 0 every time
#{
ViewBag.RenderCount++;
}
As suggested by Liam in the comments, I ended up moving this processing into the Controller (or, actually, into the mapping from my data entities into view models). This entailed adding a property to the view model where I needed the count, and setting that property as part of the mapping process.

What's the best regarded way to organize multiple ASP .Net MVC View models within a single view?

My app has a main dashboard which is comprised of 8 different partial views; each backed by their own view model and in my controller I'm just calling
public ActionResult mainDashboard(){
return View()
}
to return the dashboard. My question is would it be recommended to create a dashboard view model that also contains references to the view models of the partial views? What's considered a recommended best practice in this situation?
Ohkk here is a good idea as well to use html.Action instead of html.partial
This would look more like this:
public ActionResult Dashboard()
{
return View();
}
public PartialViewResult Clubs()
{
....
return PartialView(db.Clubs.ToList());//this assumes the partial view is named Clubs.cshtml, otherwise you'll need to use the overload where you pass the view name
}
public PartialViewResult Alerts()
{
....
return PartialView(db.Alerts.ToList());
}
Dashboard.cshtml
<div class="dashboard_alerts">
#Html.Action("Alerts")
<div class="dashboard_pending_clubs">
#Html.Action("Clubs")
</div>
<div class="dashboard_verified_members">
#Html.Action("Members")
</div>
OR
You would need to create a ViewModel specific for the Dashboard page precisely this would be more efficient way
public class DashboardViewModel
{
public IEnumerable<GMC.Models.Clubs> Clubs { get; set; }
public IEnumerable<GMC.Models.MemberUsers> Users { get; set; }
public IEnumerable<GMC.Models.Alerts> Alerts { get; set; }
}
Then, in the Dashboard action method, you would populate each list:
myModel.Users = db.MemberUsers.ToList();
...
You would then need to update the view to take in this new ViewModel
#model DashboardViewModel
Finally, from within the view, you would need to pass in the data to each partial:
#Html.Partial("DashboardAlerts", Model.Alerts)
#Html.Partial("DashboardClubs", Model.Clubs)

How to provide a model to a nested view in MVC (Razor)

Suppose I'm rendering another page(view) to a page (view).
Now the nested view has its separate model. How to provide the model to the nested view.
Here is the example.
my Index Controller:
public ActionResult Index()
{
ViewBag.CreateModel = new Todo();
return View(db.Todos.ToList());
}
my Index View:
IEnumerable<ToDoMVC.Models.Todo>
#RenderPage("~/Views/Todo/Create.cshtml",ViewBag.CreateModel)
my Create View:
#model ToDoMVC.Models.Todo
// does operations with this model
Now, if I run the program it gives me some model type mismatch error for create view.
So, how to solve this? How to provide another model to a nested view from a view?
In your model you would have a seperate model as a variable.
For example
class Todo {
public CreateModel create {get;set}
}
Then when you pass through to the second view you would do something like this:
#RenderPage("~/Views/Todo/Create.cshtml",Model.create)
That will pass that second model to your create page
Edit
Re-reading your question.
The mismatch will be because you are passing the whole model through and you want to pass an individual list item in.
So you need too loop through the model like this:
foreach(var item in Model)
{
#RenderPage("~/Views/Todo/Create.cshtml", item)
}
Simply create a view model class like this:
public class ToDoViewModel
{
public IEnumerable<ToDo> Todos{ get; set; }
public ToDo NewToDoItem { get; set; }
}
Then change your contoller's action:
public ActionResult Index()
{
var todoViewModel = new ToDoViewModel();
todoViewModel.NewToDoItem = new Todo();
todoViewModel.Todos= db.Todos.ToList();
return View(todoViewModel);
}
And then adjust your Index view:
#model ToDoMVC.Models.ToDoViewModel
#RenderPage("~/Views/Todo/Create.cshtml",Model.NewToDoItem)
A view inside a view or inother words, a nested view is not viable as far as my affair with MVC goes. You create a view and bind it to a model to show data relevant to that model on the browser. Now if you want data from other multiple models / business entities to be rendered on the view then you use ViewModels (Reference 1,Reference 2) and for that matter, the answers above remain valid. You can also customize / define sections on your layout to render specific information aswell. Partial views also make an option depending on the kind of info you want delivered to the view.
You can create a MasterModel and refer it to index view
public Class MasterModel
{
Public IEnumerable<ToDo> TodoList { get; set; }
Public ToDo CreateModel { get; set; }
}
Controller
public ActionResult Index()
{
MasterModel model = new MasterModel();
model.CreateModel = new Todo();
model.TodoList = db.Todos.ToList();
return View(model );
}
Refer this to Index model
#model MasterModel
#RenderPage("~/Views/Todo/Create.cshtml",Model.CreateModel)

Passing Data From View back to the HttpPost method in MVC

Alright so i want to pass data from the view back to Post Method in the controller.
The View :
#model IEnumerable< MvcMobile.Models.Trips>
<p>Time : #ViewBag.titi</p>
<p>ID :#ViewBag.iid </p>
<p>From : #ViewBag.From</p>
<p>To :#ViewBag.To </p>
Avaibliabe Trips :
#foreach (var item in Model)
{
if ( item.Time==ViewBag.titi)
{
<p>#item.TripID</p>
}
}
My HttpGet Method in the controller :
[HttpGet]
public ActionResult Book2(MvcMobile.Models.TicketsBooked tik)
{
ViewBag.titi = tik.Time;
ViewBag.iid = tik.TicketID;
ViewBag.from = tik.From;
ViewBag.To = tik.To;
var TripsList = db.Trips.ToList();
return View(TripsList);
}
In This case i cant use a dynamic object to pass variable since the model is IEnumerable
i want to pass one or two textBoxes back to the controller, how can i do that ?
an alternative question would be how can i do the same functionality in the view without making the model IEnumberable ?
and thanks alot.
You should read up on using view models. Basically it's best practice to only pass relevant data to the view. So instead on passing a model of IEnumerable you would have a view model with a property of IEnumerable plus the extra properties you want to post back to your controller.
So for example:
public class ViewModel
{
public IEnumerable<MvcMobile.Models.Trips> Trips { get; set; }
public string ExtraValue { get; set; }
}
and your view would be:
#foreach(var trip in Model.Trips)
{
<p>Do stuff</p>
}
#Html.TextBoxFor(m => m.ExtraValue)
Your post method would then accept a ViewModel.
[HttpPost]
public ActionResult Book2(ViewModel viewModel)
{
}
You can read up more on view models here or by searching Google / SO. There are many, many examples.

Best way to handle Categories Partial View in ASP.NET MVC 3 application

I have a list of blog post categories(~20) in a look up table.
I want to display them on multiple pages as list of hyperlinks that user can click.
I also want to display them in a dropdown list in 2 or more places(different view pages)
The follow works & I see categories as a menu/list of hyperlinks.
But this will cause me modify multiple controller where I need to show the categories.
What is the best practice to handle this so that I have minimal code change?
//#1 I added new class in one of my model:
namespace MyApp.Models
{
...
public class ShowPostModel
{
public Post Post { get; set; }
public IEnumerable<Category> Categories { get; set; }
}
public class Category
{
public string _id { get; set; }
public string Name { get; set; }
}
}
//#2 Populating the controller
namespace MyApp.Controllers
{
public class BlogController : Controller
{
public ActionResult ShowPost()
{
ShowPostModel viewModel = new ShowPostModel();
viewModel.Post = ReadBlogPostFromDB();
viewModel.Categories = ReadCategoriesFromDB();
return View(viewModel);
}
}
}
//#3 This is from my main view for showing the Post:
#Html.Partial("_Categories", Model.Categories)
//#4 This is my _Categories partial view:
#model IEnumerable<MyApp.Models.Category>
<section>
<header><b>Categories</b></header>
<ul style="padding:0;margin:0;">
#foreach (var cat in Model)
{
<li>
#cat.Name
</li>
}
</ul>
</section>
Thanks for reading
Edit:
I made these changes and it seems working as well.
Any comments or improvements I can make here?
//#1 deleted this line from public class ShowPostModel (model is now DRY)
public IEnumerable<Category> Categories { get; set; }//deleted
//#2 created a base controller and inherit from it
public abstract class BlogBaseController : Controller
{
public BlogBaseController()
{
ViewBag.Categories = ReadCategoriesFromDB();
}
}
//#3 force all controller where I need categories to inherit from base controller
public class BlogController : BlogBaseController
//#4 change how I read in my views
#Html.Partial("_Categories", (IEnumerable<MyApp.Models.Category>)#ViewBag.Categories)
If you use the categories in enough places, you can encapsulate this into a base controller class, and override OnActionExecuted.
I would then put the Categories into a property on the ViewBag and pass it into your partial view from there, and leave your view's model alone.
i wonder why no one has suggested using RenderAction. you can write this Action method in you base controller. this will make it available in all derived controller. this way you can have your categories view strongly typed. Moreover, you should put your Categeories view in Views/Shared directory so every controller has access to this view. Doing so will keep you DRY and you still have the benefits of having strongly typed view.
EDIT By the way you don't have to have base controller to use renderaction. Although above approach is valid and i prefer doing like this but you can also have a nvaigation controller like
Public NavigationController:Controller()
{
public ActionResult Categories()
{
var Categories = FetchFromDB();
return View(Categoires);
}
}
Now you can call this action method using renderAction on anywhere in your application
You might want to try creating 2 display for templates, one to display in link and one to display in dropdown. Depending on the page you tell the view to use the specific template.
You can create a Filter that populates your categories and adds it to ViewData/ViewBag. You can then apply this filter to the controllers/actions that require the categories.
For displaying, you can use EditorTemplates or Partials to keep your UI code DRY...
HTH.

Resources