Wie Teilansicht von Anchor-Tag in ungeordneter HTML-Liste in MVC geladen?

Question

Ich habe eine Master-Ansicht, die eine ungeordnete Liste anzeigt. In jedem Element der Liste habe ich ein Anker-Tag platziert, um eine Teilansicht derselben Seite nur an einer anderen Stelle zu laden. Mein Ziel ist es, die Seite laden zu lassen, und wenn der Benutzer auf ein Element klickt, möchte ich, dass die Teilansicht geladen wird.

Master View: Index

<ul> 
 
    <li> 
 
     <a> 
 
      apples 
 
     </a> 
 
     
 
    </li> 
 
    <li> 
 
     <a> 
 
      oranges 
 
     </a> 
 

 
    </li> 
 

 
</ul>

Teilansicht: _partialView

<div id="rightside"> 
 
     <h1>Hello</h1> 
 
    </div>

Controller für Teilansicht: treeviewController

Ich möchte "Äpfel" und "Orangen" die Hyperlinks sein, um meine Teilansicht zu laden. Im weiteren Verlauf wird jeder Teil der Liste verschiedene Teilansichten laden, je nachdem, was der Benutzer ausgewählt hat.

Kann jemand den besten Weg vorschlagen, dies in meiner cshtml-Datei für meine Master-Ansicht zu tun?

Answer 1

Wenn Sie Ihre partielle Ansicht auf ein Ereignis wie einen Klick auf eine Schaltfläche oder einen Hyperlink klicken möchten, müssen Sie den ajax-Aufruf in jQuery verwenden. Erstellen Sie eine Aktionsmethode, die eine Teilansicht zurückgibt. Auf Knopfdruck rufen Sie diese Aktionsmethode auf und bei Erfolg von ajax wählen Sie einfach das div aus, wo Sie Ihre Teilansicht laden möchten, fügen Sie die Antwort als inneres html hinzu.

$('#btn').click(function (e) { 
e.preventDefault(); // <------------------ stop default behaviour of button(if button type is submit) 
var element = $("#YourDiv"); // <--------------Your div where you want to render the partial view. use # if id and . if class 
$.ajax({ 
    url: "/Home/YourAction",  
    success: function (data) { 
     if (data.status == "Success") { 
      $(element).html(data); //<------------ place the response in your div 
     } else { 
      alert("Error occurs!"); 
     } 
    }, 
    error: function() { 
     alert("An error has occured!!!"); 
    } 
}); 

Hoffe, das hilft.