MVC4下拉列表级联错误 [英] MVC4 dropdownlist cascading error

问题描述

我试图在用户可以提交的表单视图上实现级联投递框界面。



我有两个数据库存储信息以填充下拉列表和另一个将存储表单中的所有信息。



在我的Controller中，我通过ViewBag将下拉列表传递给视图。< br $>


控制器：

I have tried to implement a cascading drop box interface on the view of a form a user can submit.

I have two databases that store the information to populate the drop down lists and another that will store all the information from the form.

In my Controller, I pass the drop down lists to the view via the ViewBag.

Controller:

public ActionResult Add()
    {
        List<country> countries = new List<country>();
        List<city> cities = new List<city>();

        using (EntitiesConnection dc = new EntitiesConnection())
        {
            countries = dc.Countries.ToList();
            cities = dc.Cities.ToList();
        }

        ViewBag.countryId = new SelectList(countries, "id", "name");
        ViewBag.cityId = new SelectList(cities, "id", "name");

        return View();
    }

查看：

View:

<div class="editor-label">
            @Html.LabelFor(model => model.name)
        </div>
        <div class="editor-field">
            @Html.EditorFor(model => model.name)
            @Html.ValidationMessageFor(model => model.name)
        </div>

        <div class="editor-label">
            @Html.LabelFor(model => model.country_id)
        </div>
        <div class="editor-field">
            @Html.DropDownListFor(model => model.country_id, ViewBag.countryId as SelectList)
            @Html.ValidationMessageFor(model => model.country_id)
        </div>

        <div class="editor-label">
            @Html.LabelFor(model => model.city_id)
        </div>
        <div class="editor-field">
            @Html.DropDownListFor(model => model.city_id, ViewBag.cityId as SelectList)
            @Html.ValidationMessageFor(model => model.city_id)
        </div>

我还有一个POST动作结果来验证提交的表格以及JsonResult。

I also have a POST Action Result to Validate the Form that was submitted as well as a JsonResult.

[HttpPost]
    [ValidateAntiForgeryToken]
    public ActionResult Add(Donor donor)
    {
        List<country> countries = new List<country>();
        List<city> cities = new List<city>();

        using (EntitiesConnection dc = new EntitiesConnection())
        {
            var countriesList = dc.Countries.ToList();

            if (donor != null && donor.country_id > 0)
            {
                cities = dc.Cities.Where(a => a.country_id.Equals(donor.country_id)).ToList();
            }
        }

        ViewBag.countryId = new SelectList(countries, "id", "name", donor.country_id);
        ViewBag.cityId = new SelectList(cities, "id", "name", donor.city_id);

        using (EntitiesConnection dc = new EntitiesConnection())
        {
            if (ModelState.IsValid)
            {
                dc.Donors.Add(donor);
                dc.SaveChanges();
            }
        }

        return RedirectToAction("Index", "Donor");
    }

    public JsonResult GetCities(int countryID)
    {
        using (EntitiesConnection dc = new EntitiesConnection())
        {
            var cities = (from a in dc.Cities
                          where a.country_id.Equals(countryID)
                          orderby a.name
                          select a).ToList();

            return new JsonResult { Data = cities, JsonRequestBehavior = JsonRequestBehavior.AllowGet };
        }
    }

在视图中，我有一些javascript代码，以便级联下拉功能工作。

In the View, I have a some javascript code in order for the cascading drop down function to work.

    @section Scripts {
    @Scripts.Render("~/bundles/jqueryval")

    <script>
        $(document).ready(function () {
            $("#country_id").change(function () {
                var countryID = parseInt($(this).val());
                if (!isNaN(countryID)) {
                    var $ddcity = $("#city_id");
                    $ddcity.empty();
                    $ddcity.append($("<option></option>").val('').html('wait please ...'));


                    $.ajax({
                        url: '@Url.Action("GetCities", "Donor")',
                        type: 'GET',
                        datatype: 'json',
                        data: { countryID: countryID },
                        success: function (d) {
                            $ddcity.empty();
                            $ddcity.append($("<option></option>").val('').html('select city'));

                            $.each(d, function (i, item) {
                                $ddcity.append($("<option></option>").val(item.id).html(item.name));
                            });
                        },
                        error: function () {
                            alert("error !!");
                        }
                    });
                }
            });
        });
    </script>
}

但是出于某种原因，当您从第一个下拉列表中选择一个选项时，第二个下拉列表将不显示任何数据库中实现的选项和警报消息会出错。任何帮助，将不胜感激。

请：'（

But for some reason when you select an option from the first dropdown the second dropdown list will not display any of the option that are implemented in the database and the alert message rise an error. Any help would be appreciated.
Please :'(

推荐答案

（document）.ready（function（）{

(document).ready(function () {

（#country_id）。change（function（）{
var countryID = parseInt（

("#country_id").change(function () { var countryID = parseInt(

（this）.val（））;
if（！isNaN （countryID））{
var

(this).val()); if (!isNaN(countryID)) { var

这篇关于MVC4下拉列表级联错误的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！