Update a partial view from another partial view in ASP.NET MVC without updating all the views

StackOverflow https://stackoverflow.com/questions/23218389

Question

I have two partial views displaying, for the left one, the menu, and for the right one, the content.

enter image description here

When I click on "Link 1", I want to switch the "Content" area from the partial view "PartialViewContent1" to "PartialViewContent2".

In terms of code, I actually manage to do this :

File Index.vbhtml

<body>
<article>
      <section>
           <p>@Html.Action("Menu", "Menu")</p>
      </section>
 </article>
<aside>

 @Select Case Convert.ToString(Model)
     Case "Menu2"
         @Html.Action("PartialViewContent2", "PartialViewContent2")
     Case "Menu3"
         @Html.Action("PartialViewContent3", "PartialViewContent3")
     Case Else
         @Html.Action("PartialViewContent1", "PartialViewContent1")
 End Select

 </aside>

File PartialViewMenu.vbhtml

<ul>
<li>
@Html.ActionLink("Link 1", "Link1", "Home")
</li>
<li>
@Html.ActionLink("Link 2", "Link2", "Home")
</li>
<li>
@Html.ActionLink("Link 3", "Link3", "Home")
</li>

With this architecture, every view (and partial view displayed) is refreshed.

I'm afraid this behavior not ergonomic and not very efficient in terms of performance. Is there a method to update the Content and not the menu (or the rest of the view if there is a footer or a header) ?

Was it helpful?

Solution

I finally found how to do this.

A simple jQuery code using Ajax does the trick :

$(function() {

  $('#link1').click(function(){
    $.ajax({
      url: this.href,
      dataType: "script",
      success: function(result) {
        $("#container").html(result);
      }
    });
  });     

  e.preventDefault();
  return false;
});


});
Licensed under: CC-BY-SA with attribution
Not affiliated with StackOverflow
scroll top