我已按照以下教程完成了我的项目:
https://www.youtube.com/watch?v=h_ViuyVs4AE
我遇到的问题是,当我在第一个下拉框中单击某个项目时,它在第二个框中没有给出正确的值,它只给出一个值而且不正确。它应该显示每个Make_Name(Vehicle_Make表)的所有Model_Name'(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);
}
答案 0 :(得分: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
答案 1 :(得分:0)
尝试将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);
}