Asp.net 模态弹出窗口提交的父页面中的 mvc 更新下拉列表

Question

我有一个加载局部视图的主页，该视图正在使用

Html.BeginCollectionItem("employees")

因为我使用的是 jQuery 选项卡。（因此用户可以添加更多员工表单）

在我的员工局部视图中有一个用于选择国家/地区的下拉列表，它还有一个 link 弹出一个模式以添加新国家/地区。在这里，我想做的是，在提交模式并关闭后，我希望立即刷新下拉列表，以便用户可以看到新的更新列表。

当用户添加更多选项卡时动态更改下拉列表的 Id 如何完成？

Company.cshtml:

@using (Html.BeginForm("Create", "CompanyForm", FormMethod.Post))
{
    <p>Company Info</p>
    @Html.EditorFor(m => m.companyName, new { htmlAttributes = new { @class = "form-control" } })  

    <div id="tabs">
        <ul>
            <li><a href="#tabs-employee">Employee 1</a> <span class="ui-icon ui-icon-close" role="presentation">Remove Tab</span></li>
        </ul>
        <div id="tabs-employee">              
            @Html.Action("Employee")
        </div>            
    </div>
    <button type="submit">Submit</button>
}    

<script>
//tab codes...
</script>

Employee.cshtml:

<div class="editorRow">
    @using (Html.BeginCollectionItem("employees"))
{
    <!-- Dropdown-->
    @Html.DropDownListFor(m => m.CountryId, (SelectList)ViewBag.CountryList, "-- Select --", new { @class = "form-control" })
    <!-- Link-->
    <a href="#" class="btn btn-info btn-md" data-toggle="modal" data-target="#countryModal">Add Country</a>
}
</div>

<!-- Modal -->
<div class="modal fade" id="countryModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
<div class="modal-dialog" role="document">
    <div class="modal-content">
        <div class="modal-header">
            <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
            <h4 class="modal-title" id="myModalLabel">Add Country</h4>
        </div>
        <div class="modal-body">
            <div class="ajax-dynamic-get-data-form" />
        </div>
    </div>
</div>
</div>

<script>
$('#countryModal').on('show.bs.modal', function (event) {
var url='@Url.Action("NewEmployee")';
$.ajax({
    type: "GET",
    url: url,
    data: JSON,
    cache: false,
    success: function (data) {          
        $('#countryModal').find('.ajax-dynamic-get-data-form').html(data);
    },
    error: function (err) {
        console.log(err);
    }
});
})
</script>

NewCountry.cshtml:

@{
    Layout = null;
}

@using (Html.BeginForm("PostNewCountry", "CompanyForm", FormMethod.Post, new { id = "postOfferForm" }))
{

<label>Employee Name</label>
@Html.TextBoxFor(x => x.CountryName, new { @class = "form-control" })


<div class="modal-footer">
    <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
    <button type="submit" class="btn btn-default">Save</button>
</div>
}

<script>
$("#postOfferForm").submit(function () {
    $.ajax({
        url: "/CompanyForm/PostNewCountry",            
        type: "POST",
        data: $(this).serialize(),
        datatype: "json",
        success: function (response) {
            if (response.status === "success") {                   
                $('#countryModal').modal('hide');

            } else {
                alert(response.errorMessage);
                $('#countryModal').modal('hide');
            }
        }
    });
    return false;
});         
</script>

已编辑

斯蒂芬给我提示解决上述问题后的另一个问题是，模态框只在 tab1 中弹出。我怎样才能同时更新所有选项卡中的下拉列表？

Answer 1

您的实施存在一些问题。

首先你生成了重复的脚本（在你的 Employee.cshtml 和 NewCountry.cshtml 部分），这些需要被移动到主视图所以只有一个副本被加载。

此外，只需要在主视图中有一个用于创建新Country的模态窗体，并在每个Employee局部包含一个按钮来打开模态（目前你只是重复大量不必要的 html 并进行不必要的 ajax 调用以重复填充模态表单 - 您可以最初包含表单，或者如果您想使用 ajax 填充它，包括一个 'flag' 指示它是否已加载，因此只进行一次 ajax 调用）

要使用您添加的新 Country 选项更新下拉列表，请输入 class 名称

@Html.DropDownListFor(m => m.CountryId, ... new { @class = "form-control country" })

然后在您的 ajax 成功回调中更新每个现有的下拉列表。您没有指明您的 PostNewCountry() 方法是什么 returns，但假设它 returns 只是新 Country 的 ID，那么

success: function (response) {
    var name = $('#CountryName').val(); // assumes you have only one modal form
    var countries = $('.country');
    $.each(countries, function(index, item) {
        var option = $('<option></option>').val(response).text(name);
        $(this).append(option);
    }
}

您的第二个问题（模式仅在 tab1 中弹出）是由于所有重复的 id 属性无效 html。如上所述，这将通过只有一个模态来解决，但是对于您当前的实现，您需要删除 id 属性并改用 class 名称。当你在 jQuery 中使用 id select 时，它只会 select 第一个 id，所以 $('#countryModal').on(... 和 $("#postOfferForm").submit(... 将正常工作。

Asp.net 模态弹出窗口提交的父页面中的 mvc 更新下拉列表

Asp.net mvc updating dropdownlist in parent's page submitted by a modal popup

ajax

asp.net-mvc

jquery-ui-tabs

begincollectionitem

dropdown