Comment récupérer l'objet sélectionné dans un DropDownList
Bonjour,
j'ai développé un formulaire dans lequel l'utilisateur sélectionne d'abord un continent dans un DropDownList. Une fois le continent sélectionné, les pays correspondant sont chargés en base et affichés dans un second DropDownList.
Comment puis-je récupérer l'objet bindé que l'utilisateur a sélectionné dans le DropDownList ?
Tout d'abord, je possède une classe AtlasVM exposant une propriété pour l'identifiant du continent sélectionné, une autre pour l'identifiant du pays sélectionné et les 2 listes de continents et de pays.
Code:
1
2
3
4
5
6
7
8
9
10
| public class AtlasVM
{
[Display(Description="Continent:")]
public int? SelectedContinentId { get; set; }
[Display(Description = "Pays:")]
public int? SelectedCountryId { get; set; }
public IEnumerable<Continent> Continents { get; set; }
public IEnumerable<Country> Countries { get; set; }
} |
Le code du formulaire est le suivant:
Code:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
| <fieldset>
<legend>Atlas</legend>
<% using (Html.BeginForm()) %>
<% { %>
<div>
<label>
Continent</label>
<%= Html.DropDownListFor(m => m.SelectedContinentId, new SelectList(Model.Continents, "Id", "Name"), "[Sélectionnez un continent]")%>
</div>
<div>
<label>
Pays</label>
<%= Html.DropDownListFor(m => m.SelectedCountryId, new SelectList(Model.Countries, "Id", "Name"), "[Sélectionnez un pays]") %>
</div>
<input type="submit" value="Select" />
<% } %>
</fieldset> |
Je charge les continents dans l'action:
Code:
1
2
3
4
5
6
7
8
|
public ActionResult Index()
{
AtlasVM a = new AtlasVM();
a.Continents = ContinentRepository.Default.GetContinents();
a.Countries = new List<Country>();
return View(a);
} |
Enfin, j'utilise jQuery pour détecter une sélection du continent et charger les pays correspondants:
Code:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
| <script type="text/javascript">
$(document).ready(function () {
$("#SelectedContinentId").change(function () {
var url = '<%= Url.Content("~/") %>' + "Home/SelectContinent";
var ddlsource = "#SelectedContinentId";
var ddltarget = "#SelectedCountryId";
$.getJSON(url, { selectedContinent: $(ddlsource).val() }, function (data) {
$(ddltarget).empty();
$(ddltarget).append("<option value=''>[Sélectionnez un pays]</option>");
$.each(data, function (index, optionData) {
$(ddltarget).append("<option value='" + optionData.Id + "'>" + optionData.Name + "</option>");
});
});
});
});
</script> |
Donc sur sélection du continent, l'action SelectContinent du contrôleur est appelée:
Code:
1
2
3
4
5
6
7
| public JsonResult SelectContinent(int selectedContinent)
{
JsonResult result = new JsonResult();
result.JsonRequestBehavior = JsonRequestBehavior.AllowGet;
result.Data = CountryRepository.Default.GetCountries(selectedContinent);
return result;
} |
Et enfin sur validation du formulaire,
Code:
1
2
3
4
5
6
7
8
9
10
| [AcceptVerbs(HttpVerbs.Post)]
public ActionResult Index(AtlasVM c)
{
Atlas a = new Atlas();
a.SelectedContinent = c.Continents.FirstOrDefault(cont => cont.Id == c.SelectedContinentId);
a.SelectedCountry = c.Countries.FirstOrDefault(count => count.Id == c.SelectedCountryId);
AtlasRepository.Default.Save(a);
return View("Valid");
} |
Comment puis-je procéder svp ?
Merci d'avance,
Etienne
