Asp.net MVC обновление выпадающего списка на родительской странице, представленной модальным всплывающим

Question

У меня есть главная страница, которая загружает частичное представление, которое использует

Html.BeginCollectionItem("сотрудники")

потому что я использую вкладку jQuery. (чтобы пользователь мог добавить больше форм сотрудников)

В моем частичном представлении "Сотрудник" есть раскрывающийся список для выбора страны, а также ссылка, которая открывает модальное окно для добавления новой страны. Здесь я хочу, чтобы после отправки модального сообщения и после его закрытия я хотел бы, чтобы выпадающий список обновлялся сразу, чтобы пользователь мог видеть новый обновленный список.

Как это можно сделать, когда идентификатор выпадающего списка динамически изменяется по мере добавления пользователем дополнительной вкладки?

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, включите флаг ' 'который указывает, был ли он загружен или нет, только один вызов ajax сделан)

Чтобы обновить выпадающие списки с опцией для нового Country Вы добавили, дайте тогда имя класса

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

Затем в вашем успешном обратном вызове ajax обновите каждый существующий выпадающий список. Вы не указали, что ваш PostNewCountry() метод возвращает, но при условии, что он возвращает только идентификатор нового 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, он выберет только первый с этим idтак что ни $('#countryModal').on(..., а также $("#postOfferForm").submit(... будет работать правильно.