Comment rendre dynamiquement une vue partielle dans ASP.NET MVC en cliquant sur un bouton ?

Rendu dynamique d'une vue partielle lors d'un clic sur un bouton dans ASP.NET MVC

Description du problème :

Dans ASP.NET MVC , vous souhaitez afficher une vue partielle à l'intérieur d'un div spécifique côté client lorsqu'un bouton est cliqué, et la vue partielle doit utiliser les données obtenues dynamiquement pendant l'événement du bouton.

Exemple de code :

Considérez le code de bouton suivant :

<button type="button"></button>

Ce bouton tente d'accéder à une URL distincte lorsqu'on clique dessus. Pour gérer l'événement de clic et restituer dynamiquement la vue partielle, nous devons modifier le code comme suit :

<button></button>

De plus, ajoutez le script suivant à la page :

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

Modifiez la méthode du contrôleur pour accepter le texte de recherche comme 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);
}

Explication :

• La méthode jQuery .load effectue un appel AJAX à l'URL spécifiée, en transmettant toutes les données fournies dans le paramètre data .
• La méthode du contrôleur est chargée de générer la vue partielle basée sur les données fournies dynamiquement.
• Le contenu mis à jour est chargé dans le div #searchResults, rendant dynamiquement la vue partielle.

Remarque : Si votre classe de modèle contient plusieurs propriétés avec des attributs de validation, remplacez la gestion onclick par le code suivant et utilisez plutôt un bouton de soumission :

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

Dans ce cas, la méthode du contrôleur doit gérer le SearchCriterionModel complet objet :

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

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!