Question

In an ASP.NET MVC 3 application, we have a bunch of data that needs to be displayed on a page but because not all the data will be used by the user on every page view, we have added a bunch of empty divs to the page and when the user clicks on the title above the div, it is then loaded with the appropriate data via and AJAX request.

Example:

<h3>@Ajax.ActionLink("Contact Information", 
                     "ContactInformation", 
                     "Customer", 
                     new { id = Model.Id}, 
                     new AjaxOptions { UpdateTargetId = "ContactInformationContainer" })</h3> 
<div id="ContactInformationContainer"></div>

The problem with the code above is that every time the link is clicked, the data is reloaded. How can we make it so that the link or text can still be visible after a click but any subsequent clicks will not submit another AJAX request.

Thanks

Answer 1

You need to add javascript handlers to the AjaxOptions events OnBegin and OnComplete. Set a flag when the tab is loaded (e.g. OnComplete) or maintain a list of loaded links. You just need something to maintain link state for the current page. Before the link is loaded, return false in the OnBegin if the link has previously been loaded.