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

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

Dans ASP.NET MVC, rendu d'une vue partielle en réponse à un le clic sur un bouton est une tâche courante. Cela vous permet de mettre à jour dynamiquement une section spécifique de la page sans recharger la page entière.

Description du problème :

Le code fourni tente d'afficher une vue partielle dans un div spécifique sur la page après un clic sur un bouton. Cependant, le bouton redirige vers une URL différente, ce qui entraîne le rechargement de la page entière. Le but est de restituer la vue partielle au sein du div côté client.

Solution :

Pour y parvenir, il est nécessaire de gérer le clic sur le bouton en utilisant JavaScript et effectuez une requête AJAX au serveur. Les étapes suivantes décrivent comment y parvenir :

1. Modifiez le type de bouton : Modifiez le bouton HTML pour utiliser un élément de bouton au lieu d'une balise d'ancrage.

<button></button>

2. Ajouter du code JavaScript : Ajoutez le code JavaScript suivant à votre page :

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

3. Modifier la méthode du contrôleur : Dans le contrôleur, modifiez l'action DisplaySearchResults pour accepter le texte de recherche en tant que paramètre.

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

Le code JavaScript gère le clic sur le bouton, récupère le texte de recherche de la page et utilise la méthode .load de jQuery pour créer un Requête AJAX à l’action DisplaySearchResults. Le serveur génère la vue partielle et l'envoie au client, qui met ensuite à jour le contenu du div #searchResults.

Remarque :

Si le modèle de l'index La vue contient des propriétés avec des attributs de validation, il est recommandé d'ajouter un bouton de soumission au lieu d'un bouton. Le code JavaScript doit gérer l'événement .submit du formulaire et effectuer une validation avant de faire la requête AJAX.

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!