wie ausgewählte Teilansicht in einer Ansicht in asp mvc geladen?

Question

Ich arbeite an ASP.NET Mvc-Projekt. Ich habe eine ähnliche Ansicht wie Bild:

enter image description here

ich rechtes Bild in dem Layout entwerfen. mein Layout-Code:

 <div class="col-md-3 panel panel-info" style="margin-top:20px;"> 
     <div class="panel panel-primary" style="margin-top:8px;"> 
      <div class="panel-heading">Setting</div> 
      <div class="panel-body"> 

       <div class="list-group"> 

        <a href="#" class="list-group-item active text-center">Lists</a> 
        <hr /> 
        <a href="#" class="list-group-item">Add Users - Partialview 1</a> 

        <a href="~/Areas/Admin/Views/Shared/_AddUser.cshtml" class="list-group-item">Edit Users - Partialview 2</a> 

        <a href="~/Areas/Admin/Views/Shared/_UserList.cshtml" class="list-group-item">User List - Partialview 3</a> 

        <a href="#" class="list-group-item">Set Password - Partialview 4</a> 

        <a href="#" class="list-group-item">User Details - Partialview 5</a> 

        <a href="#" class="list-group-item">Send Message - Partialview 6</a> 

       </div> 
      </div> 
     </div> 
    </div> 

Ich habe mehrere Modi in rechtes Feld enthält: Hinzufügen, Bearbeiten, List und ... Jeder Modus hat eine besondere PartialView. Ich möchte, wenn ich auf jeden Modus auf der rechten Seite klicke, spezielle Teilansicht auf der linken Seite laden. Wie kann ich dynamisch Teilansicht in asp mvc laden?

dank

Answer 1

Methode 1

Zuerst müssen Sie eine Aktion an den Controller wie dies in der Ansicht Teilansicht zurückzukehren, den Sie machen, wie

 @{Html.RenderAction("youractionname", "controllername");} 

und dann auf Controller benötigen diese

public ActionResult youractionname() 
     { 
      return PartialView("~/Areas/Admin/Views/Shared/_AddUser.cshtml"); 
     } 

Mit dieser Methode wird Ihre Teilansicht in Ihrer Ansicht geladen.

Methode 2

Sie Ajax verwenden können die partialview zu laden, ohne den Browser zu aktualisieren.

Zuerst müssen Sie ein Div mit einer ID hinzufügen, wo Sie die Teilansicht laden müssen.

<div id="PartialId"></div> 

dann müssen Sie die Aktion Link hinzufügen (auf Klick auf den Link Teilansicht wird geladen)

<a href="javascript:Details()">Select</a> 

Ihre Ajax-Methode sieht benötigen Sie unter

wie

<script> 
    function Details() { 
     jQuery.ajax({ 
      url: '@Url.Action("index", "Home")', // your action method 
      method: "POST", // your method 
      cache: false, 
      data: { } 
     }).done(function (result) { 
      $('#PartialId').html(result); 
     }); 
    } 
</script> 

Hinweis Fügen Sie Ihrem Projekt ein Unobtrusive-Ajax-jquery-Skript hinzu.

können Sie diese here