简体   繁体   English

通过MVC通过Java脚本填充DropDownList时需要帮助。 列表未填充

[英]Need Help while Populating the DropDownList via Java Script from MVC. List not populating

I am facing the problem when I am populating the DropDownList by JavaScript via MVC. 我通过MVC通过JavaScript填充DropDownList时遇到问题。 I am getting the Uncaught TypeError: Cannot read property 'length' of undefined while populating the DDL. 我收到Uncaught TypeError:在填充DDL时无法读取未定义的属性“ length”

My Code as define below 我的代码定义如下

View:- 视图:-

<div class="form-group">
    <label>SubRetailer</label>
    @Html.DropDownListFor(m => m.SubRetailer, Model.SubRetailerList, "All Selected", new { @class = "form-control", id = "SubParentRetailerDDL" })        
</div>

Controller : - 控制器:-

public ActionResult getSubRetailer(int ParentRetailerID)
{ 
    List<DashboardGetSubRetailer_Result> lstDesig = db.DashboardGetSubRetailer(ParentRetailerID).ToList();
    return Content(JsonConvert.SerializeObject(lstDesig), "application/json");
}

JavaScripts function:- JavaScripts功能:-

function GetNames(ParentRetailerID) {
    if (ParentRetailerID > 0) {
        $("#SubParentRetailerDDL").get(0).options.length = 0;
        $("#SubParentRetailerDDL").get(0).options[0] = new Option("Loading SubRetailer", "-1");
        alert("ParentRetailerID : "+ ParentRetailerID);
        $.ajax({
            type: "POST",
            url: "Search/getSubRetailer",
            data: "{ParentRetailerID:" + ParentRetailerID + "}",
            contentType: "application/json; charset=utf-8",
            dataType: "json",
            success: function (msg) {
                alert("success : " + ParentRetailerID);
                $("#SubParentRetailerDDL").get(0).options.length = 0;            
                $("#SubParentRetailerDDL").get(0).options[0] = new Option("Select SubRetailerName", "-1");
                **$.each(msg.d, function (index, item) {
                    $("#SubParentRetailerDDL").get(0).options[$("#SubParentRetailerDDL").get(0).options.length] = new Option(item.SubRetailerName, item.SubRetailerID);                    
                });
            },**
            error: function () {
                alert("error : " + ParentRetailerID);
                $("#SubParentRetailerDDL").get(0).options.length = 0;
                alert("Failed to load SubRetailer");
            }
        });
    }
    else {
        $("#SubParentRetailerDDL").get(0).options.length = 0;
    }
}

I am facing the error at below step in java script. 我在Java脚本的以下步骤中遇到错误。 I am getting the data from Controller but not populating in DDL. 我从Controller获取数据,但未在DDL中填充数据。

$.each(msg.d, function (index, item) {             
    $("#SubParentRetailerDDL").get(0).options[$("#SubParentRetailerDDL").get(0).options.length] = new Option(item.SubRetailerName, item.SubRetailerID);                    
});

I do not know what you are trying to do with that line. 我不知道您想用那条线做什么。 But if you are trying to replace the options of your second dropdown with the data coming from the server, you can simply do this. 但是,如果您尝试用来自服务器的数据替换第二个下拉菜单中的选项,则只需执行此操作即可。

$("#SubParentRetailerDDL").html(""); //Clear existing items

//loop through the items came back and append to dropdown

$.each(msg, function (index, item) {  
        $("#SubParentRetailerDDL")
        .append("<option value='"+item.SubRetailerID+"'>"+item.SubRetailerName+"</option>");
});

Also there is no reason for you to explicitly Serialize the data to json format because there is already a Json method which does that for you. 另外,您也没有理由将数据显式序列化为json格式,因为已经有一个Json方法可以为您执行此操作。

public ActionResult getSubRetailer(int ParentRetailerID)
{ 
   var data = db.DashboardGetSubRetailer(ParentRetailerID).ToList();
   return Json(data , JsonRequestBehavior.AllowGet);
}

This code will work assuming your DashboardGetSubRetailer method returns a collection of items each with a SubRetailerID and a SubRetailerName property. 假设您的DashboardGetSubRetailer方法返回具有SubRetailerIDSubRetailerName属性的项目集合,则此代码将起作用。 If you have a single property called d which the collection, just udpate the $.each(msg with $.each(msg.d 如果您有一个名为d属性作为集合,则只需将$.each(msg$.each(msg.d

Its working now as below 现在它的工作如下

Changes in View-- 视野变化-

 <div class="form-group">
<label>Retailer</label>      
 @Html.DropDownListFor(m => m.Retailer, new SelectList(Model.lstParentRetailsDetails, "ParentRetailerID", "ParentRetailerName"), "All Selected", new { id = "ParentRetailerDDL", @class = "form-control" })                            
</div>

<div class="form-group">
<label>SubRetailer</label>
 @Html.DropDownListFor(m => m.SubRetailer, new SelectList(Enumerable.Empty<SelectListItem>(), "SubRetailerID", "SubRetailerName"), "All Selected", new { @class = "form-control", id = "SubParentRetailerDDL" })
</div>

-- Inside Java Scripts -内部Java脚本

$().ready(function (msg) {
    $("#ParentRetailerDDL").bind("change", function () {
        GetNames($(this).val());
    });
});

function GetNames(ParentRetailerID) {
    if (ParentRetailerID > 0) {
        $("#SubParentRetailerDDL").empty();
        $.ajax({
            type: "POST",
            url: "Search/getSubRetailer",
            data: "{ParentRetailerID:" + ParentRetailerID + "}",
            contentType: "application/json; charset=utf-8",
            dataType: "json",
            success: function (msg) {
                $.each(msg, function (index, item) {
                    $("#SubParentRetailerDDL").append("<option value='" + item.SubRetailerID + "'>" + item.SubRetailerName + "</option>");
                });
            },
            error: function () {
                $("#SubParentRetailerDDL").get(0).options.length = 0;
                alert("Failed to load SubRetailer");
            }
        });
    }
    else {
        $("#SubParentRetailerDDL").get(0).options.length = 0;
    }

在此处输入图片说明 } }

声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM