Let’s assume you have a page which has a small section that should update its content based on a tab clicked by the user, just like the image below.
We could solve it the traditional way, but re-rendering the entire page each time a tab is clicked. Or better yet, we could use Ajax to only re-render that section.
This is how you could accomplish that if you’re using ASP.NET MVC.
Create a new Controller/Action
For simplicity’s sake, let’s assume we already have the code for the main page. All we need to do now is build the logic for the Ajax section. In that case, the first thing we’ll need is a controller/action to handle our Ajax requests. Here’s an example:
public class MyController : Controller
{
// Other code
[HttpGet]
public PartialViewResult TabSection(int tabId)
{
var model = buildViewModel(tabId) // logic to build viewModel based on tabId
return PartialView("_TabSection", model);
}
}
As you can see, our action will just be expecting an http get request with a tabId param. Notice the PartialViewResult return type as opposed to the more common ViewResult. This is because we don’t want to render a full View (with optional master page and complete html markup); instead, we want a partial view (i.e., a sub-section of an entire html page).
Create a partial to render your Ajax section
This is the partial that will render the viewModel returned by our MyController.TabSection() action. As you can see in our action implementation, we decided to call it _TabSection.cshtml (assuming you’re using razor). I won’t show the code to implement this partial here, since there’s nothing special about it – it is just like any other ASP.NET MVC partial in your project. In fact, there’s nothing that stops you from using this partial in any other (non-Ajax) operation in your website, as long as you pass the correct ViewModel type to it.
Wire up the code in your main View
This is the last step to hook up your Ajax control. Using jquery, we can take advantage of its jQuery.get(). We’ll end up with something like this:
<!-- meta data -->
<script type="text/javascript">
$(function(){
$("#tabs a").click(function(){
var tabId = $(this).attr("tabId");
var ajaxUrl = "/MyController/TabSection?tabId=" + tabId;
$.get(ajaxUrl, "",
function(data){
$("#tab_content").html(data);
}, "html");
});
});
</script>
<!-- left nav bar html -->
<div id="tabs">
<a href="javascript:void(0)" tabid="1">One</a>
<a href="javascript:void(0)" tabid="2">Two</a>
<a href="javascript:void(0)" tabid="3">Three</a>
</div>
<div id="tab_content">
<!-- Tab content: to be updated by the Ajax call -->
</div>
<!-- image and other stuff's html -->
Notice the tabId attribute in the tab’s anchor tags. This is not a valid html attribute, but we can use this as a trick to have our jquery code figure out the clicked tab when generating our Ajax request. The jquery.get() abstracts all the logic to generate the Ajax call and process its response. In this example, once the response is received, it updates the html within the tab_content div.
As you may have realized, besides the jquery magic, the beauty is that the tab html content is returned by the MVC framework. In other words, by us just setting a controller action that calls a partial view (which is practically the same process we’d follow to create a new page in our MVC project), we are able to implement an Ajax control in ASP.NET MVC.
