ASP partielle sur les bas de chute sont en train de changer

Question

En utilisant ASP.Net MVC base

Le site contient plusieurs menus déroulants contenant des hôtels, une fois que l'utilisateur sélectionne un hôtel un appel Ajax renvoie les chambres d'hôtel pour l'hôtel sélectionné. L'utilisateur peut sélectionner jusqu'à 10 combinaisons d'hôtels et de chambres d'hôtel, de sorte que chaque partie des listes déroulantes de l'hôtel et de la chambre d'hôtel affiche une vue partielle séparée.

Lorsque je sélectionne un hôtel parmi l'une des vues partielles, tous les hôtels déroulent dans le même hôtel.

Je pensais que c'était quelque chose dans mon javascript, donc j'ai commenté tous les javascript connexes, sauf pour l'appel d'obtenir des hôtels. Voici mon code:

Vue partielle

@model Cfv3.Models.Vacation.SelectHotelRoom 
<select class="hotel-dropdown" name="hotel"></select> 
<select class="hotelroom-dropdown" name="hotel"></select> 

Appeler la vue

<div class="form-horizontal"> 
    @for (int i = 0; i < Model.IncludedHotels.Count; i++) 
    { 
     @Html.Partial("_PossibleHotelRoom", Model.IncludedHotels[i]) 
     <hr/> 
    } 
</div> 

A charge Ajax charge les hôtels

$.get('GetHotels', function (data) { 
    //console.log(data); 
    $.each(data, function (index, value) { 
     //console.log(value.id + " " + value.name) 
     $('<option>').val(value.id).text(value.name).appendTo('.hotel-dropdown'); 
    }); 
}); 

Answer 1

Faire usage de last() en jquery.

$.get('GetHotels', function (data) { 
    //console.log(data); 
    $.each(data, function (index, value) { 
     //console.log(value.id + " " + value.name) 
     $('<option>').val(value.id).text(value.name).appendTo('.hotel-dropdown').last(); 
    }); 
}); 

Edit: Ceci est juste une solution pour résoudre votre problème actuel. Je suis sûr que vous aurez de nombreuses solutions alternatives basées sur des exigences différentes.

Answer 2

J'ai finalement trouvé une solution, ce n'est pas la plus propre, mais ça marche. Dans la vue partielle, j'ai supprimé le nom des deux sélecteurs, puis j'ai créé un identifiant basé sur l'identifiant du modèle entrant.

@model Cfv3.Models.Vacation.SelectHotelRoom 
@{ 
    var localhotelid = Model.Id + "hotel"; 
    var localhotelroomid = localhotelid + "room"; 
} 
<select class="hotel-dropdown" id=@localhotelid></select> 
<select class="hotelroom-dropdown" id="@localhotelroomid"></select> 

Bien que je ne demande sur le contrôle de la deuxième liste déroulante, il avait un problème très similaire, donc je modifié l'appel ajax comme suit:

$('.hotel-dropdown').click(function (e) { 
    var hotelroomid = $(this).attr('id').toString().concat('room'); 
    $("#".concat(hotelroomid)).empty(); 
    $.get('GetHotelRooms', { id: $(this).val() }, function (data) { 
     $.each(data, function (index, value) { 
      $('<option>').val(value.id).text(value.name).appendTo("#".concat(hotelroomid)); 
     }); 
    }); 
}); 

Je suis certain qu'il est un moyen plus propre mais ça marche.