在Asp.net mvc中使用JQuery Ajax无法级联下拉列表

时间:2017-08-23 06:30:36

标签: jquery ajax asp.net-core-mvc

我有一个下拉列表我希望使用Jquery Ajax填充MVC项目中另一个下拉列表的项目选择。以下是我如何谈论它

控制器方法

        [HttpGet]
        public IActionResult GetBusinessPartnerBankAccounts(long businessPartnerId)
        {
            var businessPartner = _bpService.Get(businessPartnerId);

            var data = businessPartner.BankAccounts.Select(x => new SelectListItem
            {
                Value = x.Id.ToString(),
                Text = x.AccountNumber + " -- " + x.AccountName + " -- " + x.BankName
            });

            return Json(data);
        }

查看 - 选择ID" drpAccounts"是我试图填充的控件

                <div class="row">
                    <div class="input-field col s6">
                        @Html.DropDownListFor(m => m.BusinessPartnerId, Model.BusinessPartners, "-- Select --", new { @id = "drpBusinessPartner" })
                        <label asp-for="BusinessPartnerId">Business Partner</label>
                    </div>

                    <div class="input-field col s6">
                        <select id="drpAccounts">
                        </select>
                        <label>Bank Account</label>

                    </div>
                </div>

Jquery的

           $('#drpBusinessPartner').change(function () {
                var bizId = $('#drpBusinessPartner').val();
                $.ajax({
                    url: '/GoodsReceipt/GetBusinessPartnerBankAccounts',
                    type: "GET",
                    cache: false,
                    dataType: "JSON",
                    data: { businessPartnerId: bizId },
                    success: function (data) {
                        $('#drpAccounts').html('');
                        $('#drpAccounts').append($('<option>-- Select Bank Account --</option>'));
                        $.each(data, function (i, item) {
                            $('#drpAccounts').append($('<option></option>').val(item.value).html(item.Text));
                        });

                    },
                    error: function (reponse) {
                        alert("error : " + reponse);
                    }
                });
            })

我已经确认在javascript被触发时正从控制器检索数据,但是drpAccounts下拉列表没有得到任何反应。没有错误,我也不知道发生了什么。但是,如果我使用以下代码替换success中的函数并使用类选择器而不是Id选择器,则下拉列表将消失,将所提取的项目保留为标签。

                    $('.dlAccounts').empty();

                        $(data).each(function () {
                            $('<option />', {
                                val: this.value,
                                text: this.text
                            }).appendTo('.dlAccounts');

                        });

我已经24小时了。请帮忙。

0 个答案:

没有答案