Wie rendere ich Teilansichten dynamisch beim Klicken auf eine Schaltfläche in ASP.NET MVC?

Teilansichten beim Klicken auf eine Schaltfläche in ASP.NET MVC rendern

Einführung

Die Aufgabe, Teilansichten beim Klicken auf eine Schaltfläche dynamisch anzuzeigen, ist eine häufige Anforderung in der ASP.NET MVC-Entwicklung. Dieser Artikel befasst sich mit einer Lösung für dieses Problem und zeigt, wie diese Funktionalität mithilfe von jQuery und der richtigen Controller-Methode erreicht wird.

Problemübersicht

In ASP.NET MVC werden Teilansichten normalerweise als gerendert ein Ersatz für die gesamte Seite. In bestimmten Szenarien ist es jedoch wünschenswert, Teilansichten nur innerhalb bestimmter Bereiche der Seite darzustellen. Wenn ein Benutzer beispielsweise auf eine Schaltfläche klickt, möchten Sie möglicherweise eine Teilansicht mit Suchergebnissen in einem bestimmten Abschnitt der Seite laden und anzeigen.

Lösung

Um dies zu erreichen, folgen Sie den Anweisungen Schritte unten beschrieben:

1. Ändern Sie die Schaltfläche: Ersetzen Sie die serverseitige Schaltfläche durch ein HTML-Schaltflächenelement (z. B. ).
2. JQuery-Ereignishandler implementieren:Verwenden Sie den .click()-Ereignishandler von jQuery auf der Schaltfläche, um den AJAX-Aufruf zu initiieren.
3. Pass Modelldaten: Senden Sie die erforderlichen Modelldaten mithilfe der .load()-Methode von jQuery während des AJAX an den Controller Aufruf.
4. Daten im Controller empfangen: Definieren Sie eine Controller-Methode, um die Modelldaten zu empfangen und die entsprechende Teilansicht zurückzugeben.
5. Teilansicht rendern: Aktualisieren Sie den angegebenen Seitenbereich mit der Teilansicht mithilfe der .load()-Methode von jQuery.

Code Beispiel

Unten finden Sie eine Beispielcodeimplementierung zum Rendern einer Teilansicht beim Klicken auf eine Schaltfläche:

Razor View (Index.cshtml)

<button>

JavaScript

var url = '@Url.Action("DisplaySearchResults", "Search")';
$('#search').click(function() {
  var keyword = $('#Keyword').val();
  $('#searchResults').load(url, { searchText: keyword });
});

Controller (SearchController)

public ActionResult DisplaySearchResults(string searchText)
{
  var model = // Build list based on the searchText
  return PartialView("SearchResults", model);
}

Zusätzliche Überlegungen

• Deaktivieren Sie die Standardformularübermittlung für Schaltflächen innerhalb von Formularen mithilfe des Attributs type="button".
• Verwenden Der @Html.ValidationMessageFor()-Helfer nur, wenn das Modell an die Ansicht zurückgegeben wird.
• Verarbeitet die Formularübermittlung mit dem .submit()-Ereignis von jQuery für Modelle mit Validierungsattributen.

Das obige ist der detaillierte Inhalt vonWie rendere ich Teilansichten dynamisch beim Klicken auf eine Schaltfläche in ASP.NET MVC?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!