javascript - 努力保持 ViewModel 数据在下拉回发中

Question

我有下拉更改事件，但我不断丢失 View 模型数据。我搜索了 google，但找不到与此问题相关的答案

如何保留输入的数据，以便在每个 PostBack(dropdown onchanged 事件) 上我可以重新填充表单，以便用户不必继续输入，例如每次回帖都需要密码

我有 2 个需要调用的 onchanged 事件，以便将正确的数据填充到下一个下拉列表中...这工作正常，但在我的 View 模型中保留输入的数据会消失

我尝试了很多方法，但似乎无法弄清楚这一点。

这是表格

@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");
    }

Answer 1

这是因为window.location.href会发送一个新的请求来再次获取该页面。它对填充的数据没有任何想法。

所以尝试使用 ajax 来填充您的下拉列表。