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

为表创建局部视图。添加客户后（使用模态表单），使用Ajax通过请求部分视图来更新主视图的html。

示例：

在您的主视图上;

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

在添加客户后使用jquery在您的javascript中

：

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

Answer 2

我最终使用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));
            });
        }
    });
}

更新部分视图中的选择列表

2 个答案: