Day 16 of 100: ASP.NET MVC (9)
Partial Views
Partial views allow you to put HTML and C# code into a file that can be reused across multiple views or can be used to simply a view that has a complex model. It has all the same features as any other view.
Making a Partial View
1. Right-click on the folder of views you want the partial view to be accessible for and click Add > View. (Note that you can add the view to the Views/Shared folder for it to be available anywhere in the app for any view.) 2. Place an underscore at the front of the partial view's name to follow convention (ex. _Review). 3. Choose the Razor Engine option. 4. Create a strongly-typed view against the appropriate model class. 5. Choose any type of scaffold template such as Empty. 6. Choose the Create as a partial view option. 7. Place HTML and C# code in the partial view.
Using a Partial View Inside a View
Format: Note that the file extension is not needed. @Html.Partial("_NameOfPartialView", "modelItNeedsToRender")
You can only pass in model data into Html.Partial() that is already available inside of the view you're using it in. You can pass in the model or a subset of the model.
Example
_Review.cshtml is a partial view used to display properties of a review. It is used inside Index.cshtml to simplify the view and output review information for each review in its model.
// (_Review.cshtml) @model OdeToFood.Models.RestaurantReview <div class="review"> <h4>@Model.Name</h4> <span>@Model.Rating</span> <p>@Model.City, @Model.Country</p> <span> @Html.ActionLink("Edit", "Edit", new { id = Model.Id }) </span> </div>
// (Index.cshtml) ... @foreach(var item in Model) { @Html.Partial("_Review", item) }
Another Use for Partial Views
What if you want to display model information on every page of the application? The _Layout.cshtml view would be a good place to start, but that view is not tied to a particular model. You can use an HTML helper to solve this problem.
@Html.Action("Action", "Controller", [optionalObject])
This HTML helper enables you to set up something like a sub request that can go out and call another controller action that builds its own model, independent of what the main controller is doing, and render a partial view wherever this method is called.
The output of the specified action method in the specified controller will be placed in the location of where the HTML helper is called. This method can be placed in the _Layout.cshtml view to display model information on all pages of the application.
Example
Below is an example of displaying the best review on every page. It uses the partial view, _Review.cshtml, from the previous example.
// (ReviewController.cs) ... public class ReviewsController : Controller { [ChildActionOnly] public ActionResult BestReview() { // Somehow find the best review var bestReview = ...; // Return a partial view return PartialView("_Review", bestReview); } }
// (_Layout.cshtml) ... <div> @Html.Action("BestReview", "Reviews"); </div> ...