Comment restituer des vues partielles dans ASP.NET MVC en cliquant sur un bouton ?

Rendu de vues partielles lors d'un clic sur un bouton dans ASP.NET MVC

Un scénario courant dans ASP.NET MVC est la nécessité de charger dynamiquement des vues partielles vues dans une section spécifique d'une page, généralement en réponse à une action de l'utilisateur telle que cliquer sur un bouton. Cette technique permet l'affichage modulaire et flexible du contenu sans avoir besoin d'actualiser la page entière.

Énoncé du problème

Supposons que vous disposiez d'une application ASP.NET MVC avec un formulaire de recherche qui nécessite d’afficher les résultats de la recherche dans une section distincte de la page. En cliquant sur le bouton de recherche, vous souhaitez récupérer les résultats de la recherche et les afficher en utilisant une vue partielle, mais pas en remplacement de l'intégralité du contenu de la page.

Solution

Pour y parvenir, vous pouvez mettre en œuvre les étapes suivantes :

1. Créer une vue partielle : Définir une vue partielle avec le modèle qui affichera les résultats de la recherche.
2. Modifiez le bouton de recherche : Remplacez le bouton dans le formulaire de recherche par un bouton HTML normal et attribuez-lui un identifiant.
3. Implémentez JavaScript : Ajoutez un gestionnaire d'événements JavaScript à l'événement de clic du bouton de recherche. Dans ce gestionnaire, exécutez un appel AJAX à l'aide de la fonction jQuery load().
4. Configurez la méthode du contrôleur : La méthode du contrôleur gérant le clic sur le bouton de recherche doit accepter les paramètres de recherche et renvoyer la partie vue avec les résultats comme modèle.

Exemple Implémentation

HTML :

<button>

JavaScript :

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

Méthode du contrôleur :

public ActionResult DisplaySearchResults(string searchText)
{
  var model = // Build the model based on the searchText parameter

  return PartialView("SearchResults", model);
}

Cette approche permet à la vue partielle d'être rendue dynamiquement dans le div spécifié sans recharger la page entière, offrant un moyen convivial et efficace d'afficher les résultats de recherche.

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!