如何从级联下拉列表中取回选定的数据到控制器答案

【问题标题】：How to Get back Selected Data from Cascading DropdownList to Controller如何从级联下拉列表中取回选定的数据到控制器
【发布时间】：2016-09-07 21:01:40
【问题描述】：

通过提交表单从级联 DropDownList 到控制器中选择时，我没有获取数据（来自 1ft DDL 的零售商和来自 2nd DDL 的 SubRetailer）。控制器中始终为 Null 值。

-- 主 DDL 列表 ParentRetailer

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

-- 二级 DDL 列表 SUbRetailer

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

Java Script 如下

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

function GetNames(ParentRetailerID) {
    if (ParentRetailerID > 0) {
         $("#SubParentRetailerDDL").get(0).options.length = 0;
        $.ajax({
            type: "POST",
            url: "Search/getSubRetailer",
            data: "{ParentRetailerID:" + ParentRetailerID + "}",
            contentType: "application/json; charset=utf-8",
            dataType: "json",
            success: function (msg) {
                 $("#SubParentRetailerDDL").get(0).options.length = 0;            
                $.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;
    }
}

和搜索控制器

//[HttpPost]
public ActionResult Search(SearchViewModel searchViewModel)
{ 
    string ParentRetailer = searchViewModel.Retailer;
    String getSubRetailer = searchViewModel.SubRetailer;
}

型号---

public class SearchViewModel
{
    public string Retailer { get; set; }
    public List<DashboardGetRetailers_Result> lstParentRetailsDetails { get; set; } 

    public string SubRetailer { get; set; }
    public SelectList SubRetailerList { get; set; }
}

控制器从数据库中获取数据---

// GET: Search
public ActionResult Index()
{
    var searchViewModel = new SearchViewModel();
    searchViewModel.lstParentRetailsDetails = db.DashboardGetRetailers().ToList(); 
    return View(searchViewModel);
}


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

-- 查看提交按钮..

<div class="form-group">
    <button class="btn btn-default pull-right" type="submit">
        <i class="fa fa-search"> Search</i>
    </button>
</div>

我需要从列表中获取两个选定的数据到控制器。它始终为空。

【问题讨论】：

展示你的模型
增加模型和控制器功能
你是说searchViewModel在提交时Search()方法中的属性是null，还是说getSubRetailer()方法中ParentRetailerID？
嗨，现在当我们按下提交按钮时，我可以在 Search(SearchViewModel searchViewModel) 中获取从父 DDL 中选择的数据。但是我没有从 Search(SearchViewModel searchViewModel) { var t = searchViewModel.Retailer // Showing NULL } 中的辅助 DDL (SubParentRetailerDDL) 中获取所选数据
对不起，以前的 cmets 中的拼写错误我没有从 2nd DDL 获取 SubRetailer 的数据。 Search(SearchViewModel searchViewModel) { var t = searchViewModel.SubRetailer // SubRetailer 显示 NULL }

标签： javascript c# jquery asp.net-mvc

【解决方案1】：

感谢斯蒂芬·穆克。现在我成功地从级联下拉列表中接收到控制器的数据。最终的Java脚本和查看代码如下

视图的变化

 <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>

-- 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;
    }
}

问候

【讨论】：