Traditionnellement, le chargement du menu de drop-down de l'état et urbain dans l'application MVC nécessite la combinaison de l'opération de contrôleur et du code JavaScript. Bien que cette méthode soit efficace, elle peut être fastidieuse et facile de faire des erreurs. Explorons un moyen plus efficace et plus puissant de gérer cette tâche.
Utilisation de modèles de vue et javascript non invasif
Au lieu de coder le menu Drop -Down dans la vue, il est préférable d'introduire un modèle de vue pour contenir toutes les données nécessaires. De plus, nous utiliserons JavaScript non invasif pour améliorer l'expérience utilisateur sans marquage de pollution.
Affichage du modèle
Fonctionnement du contrôleur
public class PersonViewModel { public int StateID { get; set; } public int CityID { get; set; } public List<SelectListItem> States { get; set; } public List<SelectListItem> Cities { get; set; } }
<图> Voir
Dans la vue, nous utiliserons l'assistance
public ActionResult Index() { var states = GetStates().Select(s => new SelectListItem { Value = s.Id.ToString(), Text = s.Name }).ToList(); var cities = GetCities().Select(c => new SelectListItem { Value = c.Id.ToString(), Text = c.Name }).ToList(); var model = new PersonViewModel { States = states, Cities = cities }; return View(model); }
<侵> JavaScript non invasif
@Html.DropDownList
En utilisant jQuery, nous pouvons améliorer le comportement du menu Drop -Down et charger dynamiquement la ville.
@model PersonViewModel ... @Html.DropDownListFor(m => m.StateID, Model.States, "请选择州") @Html.DropDownListFor(m => m.CityID, Model.Cities, "请选择城市") ...
<势> Avantages
Cette méthode offre les avantages suivants:
$(document).ready(function() { $("#StateID").change(function() { var stateId = $(this).val(); $.ajax({ url: '@Url.Action("GetCities", "Home")', data: { stateId: stateId }, success: function(response) { var citiesDropdown = $('#CityID'); citiesDropdown.empty(); citiesDropdown.append($("<option></option>").attr("value", "").text("请选择城市")); // 添加默认选项 $.each(response, function(index, city) { citiesDropdown.append($("<option></option>").attr("value", city.Id).text(city.Name)); }); } }); }); });
En raison de la séparation de la mise au point entre les modèles de vue, les contrôleurs et les vues, il améliore la maintenance.
en améliorant l'expérience utilisateur en chargeant des villes à l'état sélectionné.Demandes essables uniquement lorsque cela est nécessaire pour réduire la charge du serveur.
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!