如何从Cascading DropdownList获取选定数据到Controller

时间:2016-09-07 07:40:44

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

我没有收到数据(来自1英尺DDL的零售商和来自第二个DDL的SubRetailer),而是通过提交表格从级联DropDownList到Controller选择。它总是在控制器中为Null Value。

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

MODEL ---

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

Controller从数据库中获取数据---

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

我需要从List到Controller获取所选数据。它始终为空。

1 个答案:

答案 0 :(得分:0)

感谢Stephen Muecke。现在我成功地从级联dropdownlost到控制器接收了数据。最终的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;
    }
}

问候enter image description here