更新選擇列表中的局部視圖

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的g等，並添加選項使用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); 
}