Dropdownlist onchanged - 麻烦持久ViewModel

时间:2015-04-16 06:40:12

标签: javascript c# model-view-controller

我是一名试图掌握MVC的ASP.NET开发人员。

我正在创建一个注册页面,我有3个下拉列表。

现在第一个下拉列表必须首先加载去加载国家/地区。基于此我加载各省,然后根据我加载该省的城市。

我遇到的麻烦是,在第一次更改时它保留了我选择的值,但在第二次更改时,似乎一切都丢失了。

我加载reigster视图只是加载国家这么久。然后javascript将其发布到一个动作。

CSHTML

<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(this.value, 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(null, 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>

javascript

function CallChangefunc(countryId, provinceId) {
    window.location.href = "/Master/SetDropDowns?provinceId=" + provinceId + "&countryId=" + countryId ;
}

第一个&#34;注册&#34;加载1&#39;然后调用SetDropDowns onchanged。

我加载了viewbags(SelectedItemLists),否则我在刷新时遇到错误。是否有更好的方法来编写视图包在两个地方没有?

[HttpGet]
    public ActionResult Register()
    {
        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(0).Select(ci => new SelectListItem
        {
            Value = ci.Id.ToString(),
            Text = ci.Name
        });

        ViewBag.ProvinceItems = ProvinceItems;

        IEnumerable<SelectListItem> CityItems = BusinessAPI.CityManager.GetAllCitiesByProvinceId(0).Select(ci => new SelectListItem
        {
            Value = ci.Id.ToString(),
            Text = ci.Name
        });

        ViewBag.CityItems = CityItems;

        return View();
    }

    public ActionResult SetDropDowns(string provinceId, string countryId)
    {
        IEnumerable<SelectListItem> CountryItems = BusinessAPI.CountryManager.GetAllCountries().Select(ci => new SelectListItem
        {
            Value = ci.Id.ToString(),
            Text = ci.Name
        });

        ViewBag.CountryItems = CountryItems;

        int countId = 0;
        if (countryId == "null")
            countryId = string.Empty;

        if (TempData["CountryId"] == null)
        {
            if (!string.IsNullOrEmpty(countryId))
            {
                countId = Convert.ToInt32(countryId);
                TempData["CountryId"] = countId;
            }
        }
        else
            countId = Convert.ToInt32(TempData["ProvinceId"]);

        IEnumerable<SelectListItem> ProvinceItems = BusinessAPI.ProvinceManager.GetAllProvincesByCountryId(Convert.ToInt32(countId)).Select(ci => new SelectListItem
        {
            Value = ci.Id.ToString(),
            Text = ci.Name
        });

        ViewBag.ProvinceItems = ProvinceItems;

        int provId = 0;
        if (provinceId == "null")
            provinceId = string.Empty;

        if (TempData["ProvinceId"] == null)
        {
            if (!string.IsNullOrEmpty(provinceId))
            {
                provId = Convert.ToInt32(provinceId);
                TempData["ProvinceId"] = provId;
            }
        }
        else
            provId = Convert.ToInt32(TempData["ProvinceId"]);

        IEnumerable<SelectListItem> CityItems = BusinessAPI.CityManager.GetAllCitiesByProvinceId(provId).Select(ci => new SelectListItem
        {
            Value = ci.Id.ToString(),
            Text = ci.Name
        });

        ViewBag.CityItems = CityItems;

        return View("Register");
    }

1 个答案:

答案 0 :(得分:1)

问题是你没有告诉他们被选中,修改你的SelectListItem列表,如下例所示,以告诉列表中的哪个项目是Selected

IEnumerable<SelectListItem> CountryItems = BusinessAPI.CountryManager.GetAllCountries().Select(ci => new SelectListItem
{
    Value = ci.Id.ToString(),
    Text = ci.Name,
    Selected = ci.id.ToString() == countryId // if match the condition is selected
});

此外,要保持两个列表都已选中,您可以修改您的视图。 修改javascript函数以始终发送countryId。执行此操作时,即使您更改省份,也会始终选择当前国家/地区。

function CallChangefunc(provinceId) {
    var countries = document.getElementById("CountryId");
    var countryId = countries.options[countries.selectedIndex].value; 
    window.location.href = "/Master/SetDropDowns?provinceId=" + provinceId + "&countryId=" + countryId ;
}

请注意,在第一个下拉列表CallChangefunc(null)上,我们告诉我们没有选择省份,这是真的。

<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>

在第二次下拉菜单中,我们发送CallChangefunc(this.value),我们告诉我们选择哪个省来接收城市,并在回发后保持当前值。而且因为countryId始终发送它将保持不变。

<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>