我有下拉列表更改事件，但我一直在丢失viewmodel数据。我有搜索谷歌，并不能找到与此问题相关的答案
如何保持输入的数据，以便在每个PostBack（下拉链接onchanged事件）上我可以重新填充表单，以便用户不必继续输入例如每个帖子上的密码
我有2个需要调用的onchanged事件，以便将正确的数据填充到下一个下拉列表中...这样可以正常运行但是在我的viewmodel中保存输入的数据会消失
我尝试过很多东西，但似乎无法解决这个问题。
这是表格
@using (Html.BeginForm("RegisterCompany", "Master", FormMethod.Post, new { @class = "form-horizontal" }))
{
<div class="panel panel-default">
<div class="form-group">
<label class="col-md-3 col-xs-5 control-label">Company Name:</label>
<div class="col-md-9 col-xs-7">
@Html.TextBoxFor(x => x.Name, new { type = "text", @class = "form-control" })
</div>
</div>
<div class="form-group">
<label class="col-md-3 col-xs-5 control-label">Password:</label>
<div class="col-md-9 col-xs-7">
<div class="input-group">
<span class="input-group-addon"><span class="fa fa-unlock-alt"></span></span>
@Html.PasswordFor(x => x.Password, new { type = "password", @class = "form-control" })
</div>
</div>
</div>
<div class="form-group">
<label class="col-md-3 col-xs-5 control-label">Country:</label>
<div class="col-md-9 col-xs-7">
@Html.DropDownListFor(x => x.CountryId, (IEnumerable<SelectListItem>)ViewBag.CountryItems, "Please Select", new { @class = "form-control select", @onchange = "CallChangefunc(null)" })
</div>
</div>
<div class="form-group">
<label class="col-md-3 col-xs-5 control-label">Province:</label>
<div class="col-md-9 col-xs-7">
@Html.DropDownListFor(x => x.ProvinceId, (IEnumerable<SelectListItem>)ViewBag.ProvinceItems, "Please Select", new { @class = "form-control select", @onchange = "CallChangefunc(this.value)" })
</div>
</div>
<div class="form-group">
<label class="col-md-3 col-xs-5 control-label">City:</label>
<div class="col-md-9 col-xs-7">
@Html.DropDownListFor(x => x.CityId, (IEnumerable<SelectListItem>)ViewBag.CityItems, "Please Select", new { @class = "form-control select" })
</div>
</div>
<div class="form-group">
<label class="col-md-3 col-xs-5 control-label">Are you a supplier:</label>
<div class="col-md-9 col-xs-7">
@Html.CheckBoxFor(x => x.IsSupplier, new { type = "checkbox", @class = "icheckbox" })
</div>
</div>
<div class="form-group">
<label class="col-md-3 col-xs-5 control-label">Company Logo:</label>
<div class="col-md-9 col-xs-7">
<input type="file" class="fileinput btn-primary" name="filename" id="filename" title="Browse file" />
</div>
</div>
<div class="form-group">
<div class="col-md-12 col-xs-5">
<button class="btn btn-primary btn-rounded pull-left">Back</button>
<button class="btn btn-primary btn-rounded pull-right">Register</button>
</div>
</div>
</div>
</div>
}
</div>
</div>
<script type="text/javascript" src="../../Scripts/js/plugins.js"></script>
<script type="text/javascript" src="../../Scripts/js/plugins/jquery/jquery.min.js"></script>
<script type="text/javascript" src="../../Scripts/js/plugins/jquery/jquery-ui.min.js"></script>
<script type="text/javascript" src="../../Scripts/js/plugins/bootstrap/bootstrap.min.js"></script>
<script type="text/javascript" src="../../Scripts/js/plugins/mcustomscrollbar/jquery.mCustomScrollbar.min.js"></script>
<script type='text/javascript' src='../../Scripts/js/plugins/icheck/icheck.min.js'></script>
<script type="text/javascript" src="../../Scripts/js/plugins/bootstrap/bootstrap-file-input.js"></script>
<script type="text/javascript" src="../../Scripts/js/plugins/bootstrap/bootstrap-datepicker.js"></script>
<script type="text/javascript" src="../../Scripts/js/plugins/bootstrap/bootstrap-select.js"></script>
<script type="text/javascript" src="../../Scripts/js/plugins/tagsinput/jquery.tagsinput.min.js"></script>
<script type="text/javascript" src="../../Scripts/js/settings.js"></script>
<script type="text/javascript" src="../../Scripts/js/plugins.js"></script>
<script type="text/javascript" src="../../Scripts/js/actions.js"></script>
<script type='text/javascript' src='../../js/plugins/noty/jquery.noty.js'></script>
<script type='text/javascript' src='../../js/plugins/noty/layouts/topCenter.js'></script>
<script type='text/javascript' src='../../js/plugins/noty/layouts/topLeft.js'></script>
<script type='text/javascript' src='../../js/plugins/noty/layouts/topRight.js'></script>
<script type='text/javascript' src='../../js/plugins/noty/themes/default.js'></script>
<script>
function CallChangefunc(provinceId) {
var countries = document.getElementById("CountryId");
var countryId = countries.options[countries.selectedIndex].value;
window.location.href = "/Master/SetDropDowns?provinceId=" + provinceId + "&countryId=" + countryId;
}
</script>
这是行动结果
[HttpGet]
public ActionResult SetDropDowns(string provinceId, string countryId)
{
if(TempData["RegisterVM"] == null)
TempData["RegisterVM"] = new RegisterVM();
var registerVM = TempData["RegisterVM"] as RegisterVM;
if (!string.IsNullOrEmpty(provinceId) && provinceId != "null")
registerVM.ProvinceId = Convert.ToInt32(provinceId);
if (!string.IsNullOrEmpty(countryId) && countryId != "null")
registerVM.CountryId = Convert.ToInt32(countryId);
IEnumerable<SelectListItem> CountryItems = BusinessAPI.CountryManager.GetAllCountries().Select(ci => new SelectListItem
{
Value = ci.Id.ToString(),
Text = ci.Name
});
ViewBag.CountryItems = CountryItems;
IEnumerable<SelectListItem> ProvinceItems = BusinessAPI.ProvinceManager.GetAllProvincesByCountryId(registerVM.CountryId).Select(ci => new SelectListItem
{
Value = ci.Id.ToString(),
Text = ci.Name
});
ViewBag.ProvinceItems = ProvinceItems;
IEnumerable<SelectListItem> CityItems = BusinessAPI.CityManager.GetAllCitiesByProvinceId(registerVM.ProvinceId).Select(ci => new SelectListItem
{
Value = ci.Id.ToString(),
Text = ci.Name
});
ViewBag.CityItems = CityItems;
return View("Register");
}
答案 0 :(得分：1)
这是因为window.location.href将再次发送新请求以获取页面。 它对填充的数据一无所知。
因此，请尝试使用ajax填充您的下拉列表。
答案 1 :(得分：0)
简单的解决方案是不要在下拉列表更改事件上回发整个表单，而是进行ajax调用并获取国家，即json formt中的Id和Name。成功回调将它们绑定在下拉列表中。
您可以按照以下链接轻松：
Populate dropdownlistfor by ajax call
如果您遇到任何问题，请告诉我。