0

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

Html.BeginCollectionItem("员工")

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

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

当用户添加更多选项卡时动态更改下拉列表的 ID 时，如何做到这一点？

公司.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>

员工.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>

新国家.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>

已编辑

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

4

1 回答 1

1

您的实施存在许多问题。

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

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

要使用您添加的新选项更新下拉列表Country，请给出类名

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

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

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属性并改用类名。当您id在 jQuery 中使用选择器时，它只会选择第一个带有 that 的选择器id，因此两者都不会$('#countryModal').on(...，并且$("#postOfferForm").submit(...会正常工作。

于 2016-11-15T01:18:34.623 回答