In this article, we are going to learn all about:
- Partial Views in .NET 6 MVC
- Partial Page Refreshes using Partial Views
What are Partial Views
- As the name suggests, partial views are incomplete views.
- They usually do not have layouts.
- A partial view is often rendered on another view.
- A partial view introduces code reusability.
- Let’s visualize an example – suppose we need to display a little comment information posted by online readers (name, email id, comment, IP address) on a couple of web pages in an admin app – we would make use of a partial view to facilitate this functionality.
Let’s code up the above requirement and understand partial views in a granular way.
Approach
- We will create a new controller namely – AdminController.
- The Index view would display the number of pages, number of posts, total page views, and a list of comments.
- This list of comments would be rendered via a partial view.
Setting up context – ViewModels, Action Methods
Let’s create a view model CommentViewModel to hold the comments-related properties.
public class CommentViewModel
{
public int Id { get; set; }
public string Name { get; set; }
public string Email { get; set; }
public string IpAddress { get; set; }
public string Comment { get; set; }
public DateTime? CommentedDateTime { get; set; }
}Let’s also create a separate AdminDashboardViewModel to hold the pages, posts, etc types of properties.
public class AdminDashboardViewModel
{
public int NoOfPages { get; set; }
public int NoOfPosts { get; set; }
public int TotalViews { get; set; }
public IReadOnlyList<CommentViewModel> Comments { get; set; }
}Let’s create the Index action method and return an appropriate model to the view.
public class AdminController : Controller
{
public IActionResult Index()
{
var model = new AdminDashboardViewModel
{
NoOfPages = 5,
NoOfPosts = 20,
TotalViews = 585,
Comments = Repository.GetComments()
};
return View(model);
}
}Partial View Creation and Render
Let us now design/create the partial view, let’s name it as _CommentsDetailPartial.cshtml.
It’s a good practice to start the partial view name with an underscore and end it with a Partial.
@{
Layout = null;
}
@model IEnumerable<CommentViewModel>
<h3>Comments Information</h3>
@foreach (var item in Model)
{
<div class="comments-container">
<div class="comments-item">
@item.Name
</div>
<div class="comments-item">
@item.Email
</div>
<div class="comments-item">
@item.Comment
</div>
<div class="comments-item">
@item.IpAddress
</div>
<div class="comments-item">
@item.CommentedDateTime.Value.ToShortDateString()
</div>
<br/>
<div class="text-center">
<button class="btn btn-primary">Approve</button>
<button class="btn btn-dark">Mark as Spam</button>
</div>
</div>
}The partial view usually does not have a Layout, hence if we return a PartialViewResult() from an action method, we would get the HTML view without the styles and other scripts.
Let’s see it in action.
public IActionResult CommentsPartial()
{
var comments = Repository.GetComments();
return PartialView("_CommentsDetailsPartial", comments);
}
Usage of partial views within main views
Let us now design/create the Admin Index view and render the comments info as a partial view.
@model AdminDashboardViewModel
<h3>Page Stats</h3>
<div class="stats-container">
<div class="comments-item">
Number of Pages : @Model.NoOfPages
</div>
<div class="comments-item">
Number of Posts : @Model.NoOfPosts
</div>
<div class="comments-item">
Page Views : @Model.TotalViews
</div>
<br/>
<div class="text-center">
<button class="btn btn-primary">Export to Excel</button>
<button class="btn btn-primary">Export to PDF</button>
</div>
</div>
<br/>
<partial name="_CommentsDetailsPartial" model="@Model.Comments" />- We use the partial tag helper to render the partial view.
- The name attribute corresponds to the view name.
- The model attribute corresponds to the type of model which the partial view expects.
Let us now browse the Index view and observe.
We are able to view the comments and their details with the help of the partial view.
When I say that partial views assist in code reusability, yes they do, let’s see it in action.
Let’s create an admin moderation page with some dummy data and use the _CommentsDetailsPartial to populate the comments.
AdminModerationViewModel
public class AdminModerationViewModel
{
public int NoOfPageUpdates { get; set; }
public DateTime LastUpdatedOn { get; set; }
public IReadOnlyList<CommentViewModel> Comments { get; set; }
}Moderation action method
public IActionResult Moderation()
{
var model = new AdminModerationViewModel
{
NoOfPageUpdates = 167,
LastUpdatedOn = DateTime.UtcNow,
Comments = Repository.GetComments()
};
return View(model);
}Moderation view
@model AdminModerationViewModel
<h2>Admin Moderation Page</h2>
<table border="1" width="50%" style="text-align:center; background-color:aliceblue">
<tr>
<td>No of Page Updates</td>
<td>@Model.NoOfPageUpdates</td>
</tr>
<tr>
<td>Last Moderated On</td>
<td>@Model.LastUpdatedOn.ToShortDateString()</td>
</tr>
</table>
<partial name="_CommentsDetailsPartial" model="@Model.Comments" />Let’s run the app and observe the Moderation view.
Partial page refresh using AJAX and partial views
- At times, we have a requirement at hand that we need to update a section of a page partially and display some information, on the basis of an event (button click or dropdown change, etc).
- This is easily achievable using a partial view and jQuery AJAX.
- Let’s see a use case.
- Suppose there’s a button – GetProducts on a view and we need to fetch a list of product details on the button click and display it in a div or table.
- Let’s code the above requirement.
- We already have a list of dummy products in our repo, let’s use that.
- Let’s create a new view and add a button over there.
<h2>Products Page</h2>
<div class="text-center">
<button class="btn btn-info">Get Products</button>
</div>
<div id="products-container"></div> public IActionResult Products()
{
return View();
}
Create Products Partial view and render via AJAX
Let us create a products partial view which will display a list of products in a tabular format.
@{
Layout = null;
}
@model IEnumerable<ProductViewModel>
<table border="1" width="100%" style="background-color:bisque;text-align:center">
<thead>
<tr>
<th>Id</th>
<th>Product Name</th>
<th>Product Category</th>
<th>Product Price</th>
<th>Imported Date</th>
</tr>
</thead>
<tbody>
@foreach (var product in Model)
{
<tr>
<td>@product.Id</td>
<td>@product.ProductName</td>
<td>@product.ProductCategory</td>
<td>@product.Price.ToString("C")</td>
<td>@product.ImportedDate.ToShortDateString()</td>
</tr>
}
</tbody>
</table>Let us now create a GetProducts method, which would return the above partial view.
public IActionResult GetProducts()
{
var model = Repository.GetProducts();
return PartialView("_ProductsPartial", model);
}Let us now hook up the button click with the jQuery AJAX handler.
$('#btnGetProducts').on('click', () => {
$.ajax(
{
url: '/Product/GetProducts',
type: 'GET',
success: function (response) {
$('#products-container').html('');
$('#products-container').html(response);
},
error: function (xhr) {
console.log(xhr);
}
});
});We call the /GetProducts action method via AJAX which returns a partial view, since a partial view is nothing but an HTML structure with dynamic data, we just use jQuery’s .html() method to attach it to the div.
- We could have approached the above problem by just returning a JSON collection of products and creating a dynamic table in the success callback of the AJAX handler.
- But using a partial view approach provides us with static type checking and less code on the jQuery side – hence less prone to run time errors.
- We can easily add a gif as a loader so that the user understands that there is a network/data call in progress.
Github Link
The code is available here.
Conclusion
We have learned about partial views, partial tag helper, and refreshing a page partially using a partial view and jQuery AJAX.
Stay tuned for the next article.
Thx.