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

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

Introduction

La tâche consistant à afficher dynamiquement des vues partielles lors d'un clic sur un bouton est une exigence courante dans le développement ASP.NET MVC. Cet article explore une solution à ce problème, démontrant comment obtenir cette fonctionnalité à l'aide de jQuery et de la méthode de contrôleur appropriée.

Présentation du problème

Dans ASP.NET MVC, les vues partielles sont généralement rendues sous la forme un remplacement pour la page entière. Toutefois, dans certains scénarios, il est souhaitable d’afficher des vues partielles uniquement dans des régions spécifiques de la page. Par exemple, lorsqu'un utilisateur clique sur un bouton, vous souhaiterez peut-être charger et afficher une vue partielle contenant les résultats de recherche dans une section désignée de la page.

Solution

Pour ce faire, suivez les étapes décrites ci-dessous :

1. Modifier le bouton : Remplacez le bouton côté serveur par un élément de bouton HTML (par exemple, <button>).
2. Implémentez le gestionnaire d'événements jQuery : Utilisez le gestionnaire d'événements .click() de jQuery sur le bouton pour lancer l'appel AJAX.
3. Passer Données du modèle : Envoyez les données du modèle nécessaires au contrôleur à l'aide de la méthode .load() de jQuery pendant l'AJAX call.
4. Recevoir des données dans le contrôleur : Définissez une méthode de contrôleur pour recevoir les données du modèle et renvoyer la vue partielle appropriée.
5. Render la vue partielle : Mettez à jour la région de page désignée avec la vue partielle à l'aide de la méthode .load() de jQuery.

Code Exemple

Vous trouverez ci-dessous un exemple d'implémentation de code pour afficher une vue partielle en cliquant sur un bouton :

Razor View (Index.cshtml)

<button>

JavaScript

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

Contrôleur (SearchController)

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

Considérations supplémentaires

• Désactivez l'envoi de formulaire par défaut pour les boutons dans les formulaires à l'aide de l'attribut type="button".
• Utilisez l'assistant @Html.ValidationMessageFor() uniquement si le modèle est renvoyé à la vue.
• Gérer la soumission du formulaire avec Événement .submit() de jQuery pour les modèles avec des attributs de validation.

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!