comment ajouter des données dans une liste déroulante?

Question

Salut les amis Je veux développer une page d'enregistrement int cette page deux champs 1.state 2.district (les deux sont des listes déroulantes). maintenant ma question est de savoir comment obtenir des données de façon dynamique, c'est-à-dire si sélectionner le champ d'état, il affichera tous les états disponibles. par exemple, il y a trois états 1.A 2.B 3.C chaque état contient 4 districts

state  district1 district1  district1 district1 
A   AAA1  AAA2   AAA3   AAA4  
B   BBB1  BBB2   BBB3   BBB4 
c   CCC1  CCC2   CCC3   CCC4 

si je sélectionne l'état A, il doit afficher un seul état districts

pls me disent clairement comment le faire en asp.net

Answer 1

Comme toujours, vous commencez par définir un modèle de vue:

public class MyViewModel 
{ 
    [Required] 
    [DisplayName("Select a state:")] 
    public string SelectedState { get; set; } 
    public IEnumerable<SelectListItem> States { get; set; } 

    [Required] 
    [DisplayName("Select a district:")] 
    public string SelectedDistrict { get; set; } 
    public IEnumerable<SelectListItem> Districts { get; set; } 
} 

puis un contrôleur:

public class HomeController : Controller 
{ 
    public ActionResult Index() 
    { 
     var model = new MyViewModel 
     { 
      // TODO: load the states initially 
      States = new[] { "A", "B", "C" }.Select(x => new SelectListItem 
      { 
       Value = x, 
       Text = x 
      }), 
      // Initially we don't have districts 
      Districts = Enumerable.Empty<SelectListItem>() 
     }; 
     return View(model); 
    } 

    public ActionResult Districts(string state) 
    { 
     // TODO: given a state select its districts 
     var districts = Enumerable 
      .Range(1, 4) 
      .Select(x => string.Format("district {0} of state {1}", x, state)); 
     return Json(districts, JsonRequestBehavior.AllowGet); 
    } 
} 

alors une vue:

@model MyViewModel 

<div> 
    @Html.LabelFor(x => x.SelectedState) 
    @Html.DropDownListFor(
     x => x.SelectedState, 
     Model.States, 
     "-- State --", 
     new { 
      id = "states", 
      data_url = Url.Action("districts") 
     } 
    ) 
</div> 

<div> 
    @Html.LabelFor(x => x.SelectedDistrict) 
    @Html.DropDownListFor(
     x => x.SelectedDistrict, 
     Model.Districts, 
     "-- District --", 
     new { id = "districts" } 
    ) 
</div> 

et enfin javascript en cascade le menu déroulant States:

$(function() { 
    $('#states').change(function() { 
     var url = $(this).data('url'); 
     var selectedState = $(this).val(); 
     $.get(url, { state: selectedState }, function (districts) { 
      var districtsDdl = $('#districts'); 
      districtsDdl.empty(); 
      $.each(districts, function (index, district) { 
       districtsDdl.append(
        $('<option/>', { 
         value: district, 
         text: district 
        }) 
       ); 
      }); 
     }); 
    }); 
});