Каскадный выпадет утопленник - 2-й выпадающий выпадет с неизвестным, но правильным количеством предметов - PullRequest
0 голосов
/ 02 июля 2019

В попытке сделать каскадное выпадающее меню я следовал этому хорошему учебнику.Но я сделал несколько изменений в процессе.Подводя итог, у меня есть два выпадающих списка, где один должен контролировать другой.Первый работает хорошо, он возвращает данные, которые я ожидаю.Второй, он возвращает правильную сумму, которую я ожидаю, однако все различные элементы отображаются как «неизвестные».

Например, я выбираю имя в 1-м раскрывающемся списке, во 2-м раскрывающемся списке изменяется на правильную сумму.элементов, связанных с первым выпадающим списком, но информация / элементы неизвестны.

В моем .cshtml у меня есть

    <div class="editor-label">
        @Html.LabelFor(model => model.VId, "vendor")
    </div>
    <div class="editor-field">
        @Html.DropDownListFor(model => model.VId, ViewBag.VendorName as SelectList, "--Select Vendor--", new { @class = "form-control" })
    </div>

    <div class="editor-label">
        @Html.LabelFor(model => model.IFID, "family")
    </div>
    <div class="editor-field">
        @Html.DropDownListFor(model => model.IFID, ViewBag.FamilyName as SelectList, "--Select Family--", new { @class = "form-control" })

    </div>

Кроме того, в моем .cshtml есть часть, гдеЯ создаю сценарий jquery:

@section scripts {

    <script src="https://ajax.microsoft.com/ajax/jquery/jquery-1.10.2.js" type="text/javascript"></script>
    <script src="https://ajax.microsoft.com/ajax/jquery/jquery-1.10.2.min.js" type="text/javascript"></script>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js" type="text/javascript"></script>
    <script src="https://ajax.aspnetcdn.com/ajax/jquery.validate/1.12.0/jquery.validate.min.js" type="text/javascript"></script>
    <script>
         $(document).ready(function ()
            {
            //Dropdownlist Selectedchange event
            $("#VId").change(function ()
            {
                $("#IFID").empty();
                $.ajax({
                    type:'POST',
                    url: '@Url.Action("SelectFamilies")',
                    dataType: 'json',
                    data: { id: $("#VId").val() },
                    success: function (families)
                    {
                        alert($("#VId").val());
                        alert(families.dataType);

                        $.each(families, function (i, family)
                        {
                            $("#IFID").append('<option value="'
                                + family.IFID + '">'
                                + family.IndexFamilyName + '</option>');
                        });
                    },
                    error: function (ex)
                    {
                        alert('Failed to retrieve states.' + ex.responseText);
                    }
                });
                return false;
            })
        });

    </script>
}

В этом файле .cshtml я указываю на @model, который определяет переменные следующим образом:

public virtual ICollection<IFDto> families { get; set; }
public virtual ICollection<VDto> vendors { get; set; }

public virtual VDto vendor { get; set; }
public virtual IFDto family { get; set; }

"@ Url.Action ("SelectFamilies") "происходит (это в контроллере):

public JsonResult SelectFamilies(int id)
    {
        //IEnumerable<IFDto> families = db.states.Where(stat => stat.country_id == id);
        IEnumerable<IFDto> families = _indexfamilyDataGateway.GetFamiliesByVendor(id);
        return Json(families);
    }

Кроме того, на этом же контроллере у меня есть:

    public ActionResult Create()
    {
        //ViewBag.VendorName = GetVendorSelectItems();
        //ViewBag.FamilyName = GetFamilySelectItems();

        ViewBag.VendorName = new SelectList(_vendorDataGateway.GetAll(), "VId", "AbbrevAndName");
        ViewBag.FamilyName = new SelectList(_indexfamilyDataGateway.GetAll(), "IFID", "IFName");


   return View();
    }

Это аналогичная проблема, упомянутая здесь и здесь .

В одном из комментариев меня попросили (и это тоже хорошая идея) сделать "console.log (семейства)" внутри успеха .ajax.Он возвращает информацию, которая мне нужна: enter image description here Пожалуйста, обратите внимание, что она печатает 4 раза, потому что я поставил "консоль".до и после .ajax успеха "каждое" утверждение.Если я просто ставлю после успеха и перед $ .each, он возвращает массив.

1 Ответ

0 голосов
/ 02 июля 2019

Благодаря хорошей идее, предоставленной @Ammar, использовать "console.log (семейства)", я смог выяснить, что внутри .ajax $ .each я неправильно использовал:

+ family.IFID + '">'
+ family.IndexFamilyName + 

Когда я должен использовать:

+ family.iFID + '">'
+ family.indexFamilyName + 

Проблема заключалась в неправильном использовании заглавной буквы после ".".

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...