ASP Partial View 下拉菜单都在变化答案

【问题标题】：ASP Partial View drop downs are all changingASP Partial View 下拉菜单都在变化
【发布时间】：2017-07-18 23:02:38
【问题描述】：

使用 ASP.Net Core MVC

该网站包含多个包含酒店的下拉菜单，一旦用户选择了酒店，Ajax 调用就会返回所选酒店的酒店客房。用户最多可以选择 10 个酒店 + 酒店房间组合，因此酒店和酒店房间下拉菜单的每个部分都在单独的局部视图中。

当我从一个局部视图中选择一家酒店时，所有酒店下拉菜单都会移动到同一家酒店。

我认为这是我的 javascript 中的某些东西，所以我注释掉了所有相关的 javascript，除了获取酒店的调用。这是我的代码：

局部视图

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

调用视图

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

加载时 Ajax 加载酒店

$.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');
    });
});

【问题讨论】：

.appendTo('.hotel-dropdown') 将附加到页面上的每个匹配元素。您需要具体确定要附加到哪一个。 $.get() 在什么情况下运行？是响应特定元素触发的页面上的某些事件吗？这样的元素可以作为一个起点，用 jQuery 遍历 DOM 来识别你想要的特定下拉列表。

标签： javascript jquery asp.net-mvc this

【解决方案1】：

在 jquery 中使用last()。

$.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();
    });
});

编辑：这只是解决您当前问题的一种解决方案。我相信您将有许多基于不同要求的替代解决方案。

【讨论】：

【解决方案2】：

我终于找到了一个解决方案，它不是最干净的，但它正在工作。在局部视图中，我从两个选择器中删除了名称，然后根据传入的模型 ID 创建了一个 ID。

@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>

虽然我没有询问如何控制第二个下拉菜单，但它有一个非常相似的问题，所以我修改了 ajax 调用如下：

$('.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));
        });
    });
});

我确信有一种更清洁的方法，但它确实有效。

【讨论】：