Обновить список выбора в частичном представлении

Question

У меня есть следующая разметка на моей странице

<td colspan="2">
    <table border="0" cellpadding="3" cellspacing="1" width="100%">
    <tr><td colspan="2"><%= Html.LabelFor(model => model.CustomerID)%></td></tr>
    <tr>
        <td width="85%">
            <%= Html.DropDownListFor(model => model.CustomerID, Model.CustomerList, new { id = "customerSelect", style = "width: 380px" })%>
            <%= Html.ValidationMessageFor(model => model.CustomerID, "*")%>
        </td>
        <td width="15%"><button id="btnAddCustomer" style="font-size: 0.7em;">Add new Customer</button></td>
    </tr>
    </table>
</td>

Когда пользователь нажимает на btnAddCustomer, открывается модальное диалоговое окно с формой для добавления нового клиента. Скомпилируйте форму и нажмите кнопку сохранения.

Как обновить элемент select, чтобы включить в него последнего добавленного клиента, и выбрать его?

Должен ли я использовать ajax?

Answer 1

Я закончил с использованием JSON для получения опций и добавил для выбора, используя манипуляции с jquery

Следующий код делает трюки

function refreshCustomers() {
    $.ajax({
        type: "post",
        dataType: "json",
        url: '<%= Url.Content("~/Contact/GetCustomers") %>',
        async: false,
        data: AddAntiForgeryToken({}),
        success: function (response) {
            $('#customerSelect').html('');
            $.each(response, function (i, customer) {
                $('#customerSelect').append($("<option></option>").attr("value", customer.Value).text(customer.Text));
            });
        }
    });
}

Answer 2

Создать частичное представление для таблицы.После добавления клиента (используя вашу модальную форму) используйте Ajax, чтобы обновить HTML-код вашего основного представления, запросив частичное представление.

Пример:

На главном представлении;

<td colspan="2">
   <div id="addCustomer" />
</td>

в вашем javascript с использованием jquery после добавления клиента:

$.get("/Home/AddCustomerPartialView", function (data) { $("#addCustomer").html(data) });

Представление AddCustomerPartialView.ascx:

<table border="0" cellpadding="3" cellspacing="1" width="100%">
<tr><td colspan="2"><%= Html.LabelFor(model => model.CustomerID)%></td></tr>
<tr>
    <td width="85%">
        <%= Html.DropDownListFor(model => model.CustomerID, Model.CustomerList, new { id = "customerSelect", style = "width: 380px" })%>
        <%= Html.ValidationMessageFor(model => model.CustomerID, "*")%>
    </td>
    <td width="15%"><button id="btnAddCustomer" style="font-size: 0.7em;">Add new Customer</button></td>
</tr>
</table>

Ваш контроллер:

public ActionResult AddCustomerPartialView()
{
// get your model if need to
return View(yourdata);
}