asp.net-mvc - 单击按钮时未选择 Casecading 下拉列表
问题描述
我有两个下拉列表。第一个下拉列表由 ViewModel 填充。使用 Ajax(级联下拉列表)填充辅助下拉列表。我可以正常工作,但是在单击按钮并返回同一页面后,第二个下拉列表未选中或返回默认值。以下是我的代码,谢谢
@Html.DropDownListFor(model => model.PaymentCode, (List<SelectListItem>)ViewBag.country, new { @class = "form-control" })
@Html.DropDownListFor(model => model.AddNewThirdParty, (List<SelectListItem>)ViewBag.thirdPartyDDL, new { @class = "form-control" })
<input type="button" value="Add New" name="action:AddNewThirdParty" style="@displayButtonAddThirdParty" onclick="return addnewthirdparty();" />
$(document).ready(function () {
$("#PaymentCode").change(function () {
$("#AddNewThirdParty").empty();
$.ajax({
type: 'POST',
url: '@Url.Action("GetInsuranceCompany")',
dataType: 'json',
data: { code: $("#PaymentCode").val() },
success: function (states) {
$.each(states, function (i, state) {
$("#AddNewThirdParty").append('<option value="' + state.Value + '">' +
state.Text + '</option>');
});
},
error: function (ex) {
alert('Failed to retrieve states.' + ex);
}
});
return false;
})
});
控制器
public ActionResult GetInsuranceCompany(string code, string filter)
{
string codeJP = string.Empty;
ParamJenisPembayaran paramJP = db.ParamJenisPembayarans.Where(x => x.Code == code).FirstOrDefault();
if (paramJP != null) codeJP = paramJP.Name;
var states1 = db.InsuranceCompany_CSFs.Where(x => x.JenisPembayaran == codeJP).ToList();
List<SelectListItem> listates = new List<SelectListItem>();
listates.Add(new SelectListItem { Text = "select_thrid_party", Value = " " });
if (states1 != null){
foreach (var x in states1){
listates.Add(new SelectListItem { Text = x.CompanyID + " - " + x.CompanyName, Value = x.CompanyID });
}
}
return Json(new SelectList(listates, "Value", "Text", JsonRequestBehavior.AllowGet));
}
public ActionResult AddNewContractNo(ParamBlacklistPembayaranViewModel model){
string[] arrContractNumber = string.IsNullOrEmpty(model.ContractNumber) ? null : model.ContractNumber.Split(new string[] { ";#" }, StringSplitOptions.RemoveEmptyEntries);
ViewBag.ContractNumberList = arrContractNumber;
return View("Create", model);
}
解决方案
当您使用change()
事件时,您的第二个下拉列表只会在第一个下拉列表发生变化的地方填充,因此您可以更改代码,以便在页面加载时也可以填充第二个下拉列表。试试下面的代码:
$(document).ready(function () {
populateCascadeList();
$("#PaymentCode").change(function () {
populateCascadeList();
return false;
})
});
}
function populateCascadeList(){
$("#AddNewThirdParty").empty();
$.ajax({
type: 'POST',
url: '@Url.Action("GetInsuranceCompany")',
dataType: 'json',
data: { code: $("#PaymentCode").val() },
success: function (states) {
$.each(states, function (i, state) {
$("#AddNewThirdParty").append('<option value="' + state.Value + '">' +
state.Text + '</option>');
});
},
error: function (ex) {
alert('Failed to retrieve states.' + ex);
}
});
}
推荐阅读
- javascript - 进行更改时,如何更新我的 serviceworker 脚本以更新缓存页面?
- javascript - Javascript XMLHTTPRequest 使用标头中未定义的协议发送
- python - 记录加速度计(X、Y 和 Z)读数的特定运动模式
- c# - 是否可以在此方法中移动我的返回值?
- spring - Hibernate 连接池超时,最终应用服务器挂起
- c++ - 放置新的 &data[i] 而不是 data + i 是 UB 吗?
- c# - C# ExcelDataReader 修剪标题列
- javascript - Express node.js - 渲染功能是否有承诺?
- composer-php - 使用 Symfony 2.8 和 PHP 7.2 安装 Sonata Admin
- python - 如何应用于基于相邻元素的numpy数组特殊函数?