Wie rendere ich eine Teilansicht in ASP.NET MVC beim Klicken auf eine Schaltfläche, ohne die Seite neu zu laden?

Rendern einer Teilansicht beim Klicken auf eine Schaltfläche in ASP.NET MVC

Rendern einer Teilansicht in ASP.NET MVC als Reaktion auf a Das Klicken auf eine Schaltfläche ist eine häufige Aufgabe. Dadurch können Sie einen bestimmten Abschnitt der Seite dynamisch aktualisieren, ohne die gesamte Seite neu laden zu müssen.

Problembeschreibung:

Der bereitgestellte Code versucht, eine Teilansicht in einem anzuzeigen spezifisches Div auf der Seite nach einem Klick auf die Schaltfläche. Die Schaltfläche navigiert jedoch zu einer anderen URL, wodurch die gesamte Seite neu geladen wird. Das Ziel besteht darin, die Teilansicht innerhalb des Div auf der Clientseite zu rendern.

Lösung:

Um dies zu erreichen, ist es notwendig, den Schaltflächenklick mit JavaScript zu verarbeiten und führen Sie eine AJAX-Anfrage an den Server durch. Die folgenden Schritte beschreiben, wie Sie dies erreichen:

1. Ändern Sie den Schaltflächentyp:Ändern Sie die HTML-Schaltfläche, um ein Schaltflächenelement anstelle eines Ankertags zu verwenden.

<button></button>

2. JavaScript-Code hinzufügen: Fügen Sie den folgenden JavaScript-Code zu Ihrem hinzu Seite:

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

3. Controller-Methode ändern: Ändern Sie im Controller die DisplaySearchResults-Aktion, um den Suchtext als Parameter zu akzeptieren.

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

Der JavaScript-Code verarbeitet den Klick auf die Schaltfläche, ruft den Suchtext von der Seite ab und verwendet zur Erstellung die .load-Methode von jQuery eine AJAX-Anfrage an die DisplaySearchResults-Aktion. Der Server generiert die Teilansicht und sendet sie an den Client, der dann den Inhalt des #searchResults-Div aktualisiert.

Hinweis:

Wenn das Modell für den Index Da die Ansicht Eigenschaften mit Validierungsattributen enthält, wird empfohlen, anstelle einer Schaltfläche eine Senden-Schaltfläche hinzuzufügen. Der JavaScript-Code sollte das .submit-Ereignis des Formulars verarbeiten und eine Validierung durchführen, bevor die AJAX-Anfrage gestellt wird.

Das obige ist der detaillierte Inhalt vonWie rendere ich eine Teilansicht in ASP.NET MVC beim Klicken auf eine Schaltfläche, ohne die Seite neu zu laden?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!