ASP.Net MVC Partial View
I have a menu (jquery-ui accordion with Html.ActionLink
as menu options). How do I make a partial view of the <div>
parent view's main content when a menu option is selected?
I can display a partial view, but not inside the main content <div>
. Should I use Html.ActionLink
the menu in my settings?
source to share
I don't believe action links will help you, but this is a step in the right direction.
The template you have supplied to play so far:
link: /articles/sports Main Area
link: /articles/local_news
The two links along the left edge are your ActionLinks, displayed on the page as normal links. When you click, they will just go back to the server and your entire page will be destroyed.
What you want to do is push to the server for content and just use that content in a container somewhere on your page. To do this, you can display regular links with onclick handlers that go asynchronously to the server to get the partial content, which can then be used to set the main content of the DIV.
For example, this could be declared in your view:
<a href="javascript:{Load('<%= Url.Action("Sports", "Articles") %>');}">
Sports
</a>
Note the use of the helper method Url.Action
to use the route data to correctly render outgoing URLs.
On the client (this is using jQuery, although any other library or JavaScript will do):
function Load(url)
{
$.post
(
url,
null,
function(data)
{
$("#mainDIV").html(data);
},
"html"
);
}
I am using $.post
instead $.get
to get around browser caching issues.
source to share