Wie kann ich eine Teilansicht in ASP.NET MVC beim Klicken auf eine Schaltfläche dynamisch rendern?

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

Problembeschreibung:

In ASP.NET MVC möchten Sie eine Teilansicht innerhalb eines bestimmten Div auf der Clientseite rendern, wenn auf eine Schaltfläche geklickt wird, und die Teilansicht sollte Daten verwenden, die während der Schaltfläche dynamisch abgerufen werden Ereignis.

Codebeispiel:

Beachten Sie den folgenden Schaltflächencode:

<button type="button">

Diese Schaltfläche versucht, beim Klicken zu einer separaten URL zu navigieren. Um stattdessen das Klickereignis zu verarbeiten und die Teilansicht dynamisch zu rendern, müssen wir den Code wie folgt ändern:

<button>

Zusätzlich fügen Sie der Seite das folgende Skript hinzu:

var url = '@Url.Action("DisplaySearchResults", "Search")';
$('#search').click(function() {
  var keyWord = $('#Keyword').val(); // Retrieve the user-entered search text
  $('#searchResults').load(url, { searchText: keyWord });
});

Ändern Sie die Controller-Methode, um den Suchtext als zu akzeptieren Argument:

public ActionResult DisplaySearchResults(string searchText)
{
  // Build list based on the provided searchText and return the partial view
  var model = // To be implemented
  return PartialView("SearchResults", model);
}

Erklärung:

• Die jQuery .load-Methode führt einen AJAX-Aufruf an die angegebene URL durch und übergibt alle im Datenparameter bereitgestellten Daten .
• Die Controller-Methode ist für die Generierung der Teilansicht basierend auf den dynamisch bereitgestellten Daten verantwortlich.
• Der aktualisierte Inhalt wird in das #searchResults-Div geladen und rendert die Teilansicht dynamisch.

Hinweis: Wenn Ihre Modellklasse mehrere Eigenschaften mit Validierungsattributen enthält, ersetzen Sie die Onclick-Behandlung durch den folgenden Code und verwenden Sie stattdessen eine Senden-Schaltfläche:

$('form').submit(function() {
  if (!$(this).valid()) { return false; }
  var url = '@Url.Action("DisplaySearchResults", "Search")';
  var form = $(this).serialize();
  $('#searchResults').load(url, form);
  return false;

In diesem Fall sollte die Controller-Methode das vollständige SearchCriterionModel verarbeiten Objekt:

public ActionResult DisplaySearchResults(SearchCriterionModel criteria)
{
  var model = // Build list based on the properties of criteria and return the partial view
  return PartialView("SearchResults", model);
}

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