Question

我已按照以下教程完成了我的项目：

https://www.youtube.com/watch?v=h_ViuyVs4AE

我遇到的问题是，当我在第一个下拉框中单击某个项目时，它在第二个框中没有给出正确的值，它只给出一个值而且不正确。它应该显示每个Make_Name（Vehicle_Make表）的所有Model_Name＆＃39;（Vehicle_Model表）。

Index.cshtml代码：

@model GoogleMap.Models.MyPageViewModel

<script>
    $(function () {
        $("#ContID").change(function () {
            $.get("/Map/GetModById", { MID: $("#ContID").val() }, function (data) {
                var $list = $("#St");
                $list.empty();
                $.each(data, function() {
                    $("<option />")
                        .val(this.Model_ID)
                        .text(this.Model_Name)
                        .appendTo($list);
                });
            })
        });
    });
</script>

@Html.DropDownListFor(p => p.SelectedMake_Id, ViewBag.Vehicle_Make as SelectList, "Select Vehicle Make", new { id = "ContID" })

MapController.cs代码：

public class MapController : Controller
{
    private GoogleMapEntities db = new GoogleMapEntities();
    //Get the select ID???
    int SelectedMake_Id = 0;

    // GET: Map
    public ActionResult Index()
    {    
        GoogleMapEntities GE = new GoogleMapEntities();
        List<Vehicle_Details> vehList = db.Vehicle_Details.ToList();

        GoogleMapViewModel GMviewmodel = new GoogleMapViewModel();
        List<GoogleMapViewModel> GMviewmodelList = new List<GoogleMapViewModel>();

        //Populate the ViewModel
        MyPageViewModel vm = new Models.MyPageViewModel();
        vm.GoogleMapViewModelList = GMviewmodelList;
        vm.SelectedMake_Id = SelectedMake_Id;

        ViewBag.Vehicle_Make = new SelectList(db.Vehicle_Make, "Make_ID", "Make_Name");

        return View(vm);               
    }

    public JsonResult GetModById(int MID)
    {
        db.Configuration.ProxyCreationEnabled = false;
        return Json(db.Vehicle_Model.Where(p => p.Model_ID == MID), JsonRequestBehavior.AllowGet);
    }

    [HttpPost]
    public ActionResult Search(string Location)
    {
        GoogleMapEntities GE = new GoogleMapEntities();
        ////SELECT Make_Name DATA FROM DB1
        // var result = GE.Vehicle_Model.Where(x => x.Model_Name.StartsWith(Location)).ToList();
        var GetVeh = db.GetMapSearch().Where(x => x.Model_Name.StartsWith(Location)).ToList();

        return Json(GetVeh, JsonRequestBehavior.AllowGet);
    }
}

Vehicle_Make有Make_ID（pk）和Make_Name。

Vehicle_Model具有Model_ID（pk）和Model_Name。

Vehicle_Details有Vehicle_ID（pk），Model_ID（fk），Make_ID（fk）。

所以需要发生的是当我点击车辆名称（Make_Name）时，它必须在第二个下拉列表中显示所有的Model_Name。

修改我做了一个名为DropDL的proc，它有一个查询，它将显示模型名称及其Model_ID和Make_ID＆＃39; s。

在proc中查询：

SELECT          Vehicle_Model.Model_Name, Vehicle_Details.Model_ID, 
                Vehicle_Details.Make_ID
FROM            Vehicle_Make INNER JOIN
                Vehicle_Details ON Vehicle_Make.Make_ID = 
                Vehicle_Details.Make_ID INNER JOIN
                Vehicle_Model ON Vehicle_Details.Model_ID =  
                Vehicle_Model.Model_ID

我制作的程序（GetMapSearch）将4个表格链接到其他地方，在那里使用ID链接所有这些表并从每个表中获取特定值，效果很好，所以我不明白为什么我需要将Make_ID添加到Vehicle_Model表，除非下拉列表确实需要。

更新的代码：

    public JsonResult GetModById(int MID)
    {
        db.Configuration.ProxyCreationEnabled = false;
        return Json(db.DropDL().Where(p => p.Model_ID == MID)
        .Select(p => new SelectListItem { Text = p.Model_Name, Value = 
        p.Model_ID.ToString() }).ToList(),
        JsonRequestBehavior.AllowGet);
    }

和Index.cshtml代码：

@model GoogleMap.Models.MyPageViewModel

@using Mvc.CascadeDropDown

@Html.DropDownListFor(p => p.SelectedMake_Id, ViewBag.Vehicle_Make as         
SelectList, "Select Vehicle Make", new { id = "ContID" })

@Html.CascadingDropDownListFor(
expression: m => m.SelectedModelId,
triggeredByPropertyWithId: "ContID",  //Parent property that trigers 
dropdown data loading
url: Url.Action("GetModById", "Map"),  //Url of action that returns dropdown 
data
ajaxActionParamName: "MID", //Parameter name for the selected parent value 
that url action receives
optionLabel: "Please select a Model", // Option label
disabledWhenParentNotSelected: true, //If true, disables dropdown until 
parent dropdown is selected
htmlAttributes: new { @class = "form-control" })

另外，如果我将ViewBag更改为使用db.DropDL（）而不是db.Vehicle_Make，它会获得所有的make，但它会带来所有组合多次。

在进行proc之后，我仍然为Make_Name提供了一个或两个Model_Name，而且还有一些不提供模型名称。所以它链接表，但不正确。

固定！

好的我已修复它，但是有人知道如何让它按字母顺序显示Make_Name，然后在点击make name后按字母顺序显示Model_Name吗？另外，删除重复的model_name＆＃39;并显示其中一个？

此外，如何在点击后从Model_Name获取值以使用我的搜索：

现在我必须通过输入搜索，如何获取要点击的值的字符串（Model_Name）？

   [HttpPost]
    public ActionResult Search(string Location)
    {
        GoogleMapEntities GE = new GoogleMapEntities();

        var GetVeh = db.GetMapSearch().Where(x => 
        x.Model_Name.StartsWith(Location)).ToList();

        return Json(GetVeh, JsonRequestBehavior.AllowGet);

    }

Answer 1

您可以使用CascadeDropDownHelpers库来简化案例（免责声明：我是作者）：

1）安装nuget包。

2）添加到您的模型SelectedModelId属性：

public class MyPageViewModel{

    public string SelectedModelId {get;set;}

    // other properties...
}

3）修改GetModById操作以将SelectListItems列表返回为json

public JsonResult GetModById(int MID)
{
    db.Configuration.ProxyCreationEnabled = false;
    return Json(db.Vehicle_Model.Where(p => p.Model_ID == MID)
          .Select(p=>  new SelectListItem {Text = p.Model_Name, Value = p.Model_ID.ToString()}).ToList(), 
    JsonRequestBehavior.AllowGet);
}

4）修改视图（不需要脚本额外的scrips）：

@model GoogleMap.Models.MyPageViewModel

@Html.DropDownListFor(p => p.SelectedMake_Id, ViewBag.Vehicle_Make as SelectList, "Select Vehicle Make", new { id = "ContID" })

@Html.CascadingDropDownListFor( 
  expression: m => m.SelectedModelId, 
  triggeredByPropertyWithId: "ContID",  //Parent property that trigers dropdown data loading
  url: Url.Action("GetModById", "Map"),  //Url of action that returns dropdown data
  ajaxActionParamName: "MID", //Parameter name for the selected parent value that url action receives
  optionLabel: "Please select a Model", // Option label
  disabledWhenParentNotSelected: true, //If true, disables dropdown until parent dropdown is selected
  htmlAttributes: new { @class = "form-control" })

您可以找到其他使用示例here

Answer 2

尝试将p.Model_ID更改为p.Make_ID

public JsonResult GetModById(int MID)
{
    db.Configuration.ProxyCreationEnabled = false;
    return Json(db.DropDL().Where(p => p.Make_ID == MID)
    .Select(p => new SelectListItem { Text = p.Model_Name, Value = 
    p.Model_ID.ToString() }).ToList(),
    JsonRequestBehavior.AllowGet);
}

下拉列表提供不正确的值

2 个答案: