带搜索框的级联下拉列表

时间:2019-06-26 18:54:34

标签: javascript c# model-view-controller

我正在尝试使用级联的Drop Down进行项目,但有一点曲折。对于高级用户,他们可以输入股票代码并进行搜索。然后,检索到的信息将更新“父级下拉列表”和级联的下拉列表选择。

使用点击事件,我可以搜索输入的值,并返回所有需要的信息。我可以更新“父项”以显示正确的信息,但无法使子项显示。它停留在显示“-选择-”的下拉菜单中,以供选择的数据很好用。真的可以使用一些见识和帮助。.我迷住了孩子。谢谢。

我按照此示例设置了下拉菜单。 asp.net MVC cascading dropdown lists

<Controller>
public ActionResult Create()
        {
            ViewData["User"] = User.Identity.GetUserName();
            BindPartType();
            return View();
        }
 public void BindPartType()
        {
            partsmanagementEntities5 parttypelist = new partsmanagementEntities5(); //Parts
            var parttype = parttypelist.parttypes.ToList();
            List<SelectListItem> pli = new List<SelectListItem>();
            pli.Add(new SelectListItem { Text = "--Select Catagory--", Value = "0" });
            foreach (var m in parttype)
            {
                pli.Add(new SelectListItem { Text = m.PartType1, Value = m.idPartType.ToString() });
                ViewBag.PartType = pli;
            }
        }
        public JsonResult GetInventory(int? id)
        {
            partsmanagementEntities5 partlist = new partsmanagementEntities5();
            var ddlpart = partlist.parts.Where(x => x.PartType == id).ToList();
            List<SelectListItem> lipart = new List<SelectListItem>();
           lipart.Add(new SelectListItem { Text = "--Select Inventory--", Value = "0" });
            if (ddlpart != null)
            {
                foreach (var x in ddlpart)
                {
                    lipart.Add(new SelectListItem { Text = x.PartDescription, Value = x.idParts.ToString() });
                }
            }
            return Json(new SelectList(lipart, "Value", "Text", JsonRequestBehavior.AllowGet));
        }
 public JsonResult Check(string id)
        {
            partsmanagementEntities5 partlist = new partsmanagementEntities5();
            StringBuilder test = new StringBuilder();
            if(id != null && id != "")
            {
                foreach (char c in id)
                {
                    if (!char.IsNumber(c))
                        test.Append(c);
                }

                var ddlpartnumber = partlist.parts.Where(x => x.PartNumber == id.ToString());
                PartDetails li = new PartDetails();
                foreach (var item in ddlpartnumber.ToList())
                {
                    li.PartNumber = item.PartNumber;
                    li.PartPrice = item.PartPrice;
                    li.idParts = item.idParts;
                    li.EHF = item.EHF;
                    li.PartDescription = item.PartDescription;
                    li.PartImage = item.PartImage;
                    li.partImageContentType = item.partImageContentType;
                    li.unit = item.unit;
                    li.PartType = item.PartType;
                    li.VendorPartNumber = item.VendorPartNumber;                  
                }
                return Json(li, JsonRequestBehavior.AllowGet);
            }
            return Json("", JsonRequestBehavior.AllowGet);
        }


<View>

<table>
                    <tr>
                        <td style="padding-left:0.8ex;padding-top:0.8ex">@Html.Label("Catagory: ")</td>
                        <td>
                            @Html.DropDownListFor(model => model.PartType, ViewBag.PartType as List<SelectListItem>, new { style = "width: 800px;" })
                            @Html.ValidationMessageFor(model => model.PartType, "", new { @class = "text-danger" })
                        </td>
                        <td style="padding-left:6ex;padding-top:0.8ex"></td>
                    </tr>
                    <tr>
                        <td style="width:1px;white-space:nowrap;padding-left:0.8ex">@Html.Label("Inventory:  ")</td>
                        <td>
                            @Html.DropDownListFor(model => model.PartNumber, new SelectList(string.Empty, "Value", "Text"), "--Select Inventory--", new { style = "width:900px" })
                            @Html.ValidationMessageFor(model => model.PartNumber, "", new { @class = "text-danger" })
                        </td>

                    </tr>
                    <tr>
                        <td style="width:1px;white-space:nowrap;padding-left:6ex">@Html.Label("Or choose:")</td>

                    </tr>
                    <tr>
                        <td style="width:1px;white-space:nowrap;padding-left:0.8ex">@Html.Label("Enter Valid Part #:  ")</td>
                        <td><input type="text" name="CheckPartNumber" id="CheckPartNumber">  <input type="button" id="Search" value="Search" class="btn btn-default" />
                    </tr>
                </table>

<script src="~/Scripts/jquery-3.0.0.min.js"></script>
<script type="text/javascript">
$(document).ready(function () {
        $("#PartType").change(function () {
            $("#PartNumber").empty();
            $.ajax({
                type: 'POST',
                url: '@Url.Action("GetInventory", "partrequests")',
                dataType: 'json',
                data: { id: $("#PartType").val() },
                success: function (PartNumber) {
                    $.each(PartNumber, function (i, PartNumber) {
                        $("#PartNumber").append('<option value="'
                                                   + PartNumber.Value + '">'
                                             + PartNumber.Text + '</option>');
                    });
                },
                error: function (ex) {
                    alert('Failed.' + ex);
                }
            });
            return false;
        })
    });

$(document).ready(function () {

        $("#Search").click(function () {
             $.ajax({
                type: 'POST',
                url: '@Url.Action("Check","partrequests")',
                dataType: 'json',
                data: { id: $("#CheckPartNumber").val() },
                success: function (Data) {
                var selectedValue = Data.PartType
                $('#PartType option').map(function () {
                 if ($(this).val() == selectedValue) return this;
                }).attr('selected', 'selected').change();
                var selectedValue2 = Data.idParts;
                $('#PartNumber option').map(function () {
                 if ($(this).val() == selectedValue2) return this;
                }).attr('selected', 'selected');
                },
                error: function (ex) {
                    alert('Failed.' + ex);
                }
            });
            return false;
        })
    });
</script>

0 个答案:

没有答案
相关问题