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

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

Présentation

Cet article traite du rendu d'une vue partielle côté client après une cliquez sur le bouton, résolvant un problème courant dans les applications ASP.NET MVC. Nous allons explorer comment :

• Capturer l'événement de clic sur le bouton
• Envoyer des données au contrôleur
• Rendre la vue partielle à l'intérieur d'un div désigné

Description du problème

Dans une application ASP.NET MVC simplifiée, nous cherchons à afficher dynamiquement les résultats de recherche dans un div sur un clic de bouton. Le défi réside dans la récupération des données via l'accès à la base de données, puis dans le rendu de la vue partielle à l'aide de ces données, sans recharger la page entière.

Solution

1. Gestion des événements :

Remplacez le bouton par :

<button>

2. JavaScript :

Ajoutez le script suivant :

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

• Ce script capture l'événement de clic et envoie le texte de recherche au contrôleur à l'aide de la méthode .load() de jQuery.

3. Méthode du contrôleur :

Modifiez la méthode du contrôleur pour accepter le texte de recherche :

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

• Cette méthode récupère les données de la base de données et renvoie la vue partielle.

Supplémentaire Considérations

• Validation : Si le SearchCriterionModel contient plusieurs propriétés avec des attributs de validation, utilisez un bouton de soumission et gérez plutôt l'événement .submit() du formulaire.
• Signature de la méthode du contrôleur : Mettez à jour la méthode du contrôleur pour recevoir l'intégralité du SearchCriterionModel object :

public ActionResult DisplaySearchResults(SearchCriterionModel criteria)

Conseils pour afficher la vue partielle à l'intérieur de la div

• Assurez-vous que la div possède un identifiant unique, tel que "searchResults".
• La vue partielle elle-même doit avoir sa propre classe de modèle et ses propres données.
• La méthode .load() mettra à jour le contenu de le div avec le HTML généré à partir de la vue partielle.

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!