CODEWITHSUNDEEP
asp.net-mvc
Edgar Blount
Edgar Blount

Reputation: 23

ASP.Net MVC partial views

I have a menu (jquery-ui accordion with Html.ActionLink as menu options). How can I render a partial view in the main content <div> of the parent view, when selecting a menu option?

I can render the partial view, but not inside the main content <div>. Should I use Html.ActionLink in my menu options?

Upvotes: 2

Views: 329

Answers (1)

David Andres
David Andres

Reputation: 31811

I don't believe action links will help you, but they are a step in the right direction.

The pattern you've put to play thus far:

link: /articles/sports           Main Area
link: /articles/local_news

The two links along the left edge are your ActionLinks rendered to the page as normal links. When clicked, they'll simply post back to the server and your entire page will be wiped out.

What you want to do is to hit the server for content and simply use that content within a container somewhere on your page. To do this, you can render ordinary links with onclick handlers that post asynchronously to the server to retrieve partial content, which can then be used to set the main DIV's content.

For example, this can be declared in your View:

<a href="javascript:{Load('<%= Url.Action("Sports", "Articles") %>');}">
  Sports
</a>

Note the use of the Url.Action helper method to leverage route data to properly form outbound urls.

On the client (this uses jQuery, though any other library or JavaScript will do):

function Load(url)
{
  $.post
  (
    url, 
    null, 
    function(data)
    {
      $("#mainDIV").html(data);
    },
    "html"
  );
}

I'm using $.post instead of $.get to sidestep browser caching issues.

Upvotes: 2

Related Questions