我对 MVC 相当陌生（好吧，非常新）。我正在尝试创建一个级联下拉列表，我还可以在其中预选一个值。
我花了一天的大部分时间在这上面，但并没有真正走得太远。我查看了很多资源，但最有用的是：
http://www.deliveron.com/blog/post/Creating-a-Cascading-Dropdown-in-ASPnet-MVC-3-and-jQuery.aspx - 我大量使用了它并得到了我自己的版本，我无法到达那里的示例工作。
http://odetocode.com/blogs/scott/archive/2013/03/11/dropdownlistfor-with-asp-net-mvc.aspx - 一般oversite。
MVC DropDownList SelectedValue 未正确显示- 这里似乎是一个非常好的示例，遵循视图模型方法，但由于某种原因，它似乎对我不起作用。
到目前为止，我得到的是：
模型：
using System;
using System.Collections.Generic;
using System.ComponentModel.DataAnnotations;
using System.Linq;
using System.Web;
using System.Web.Mvc;
namespace BLPrototype.Models
{
public class VehicleModels
{
public List<vehicle_make> getVehicleMakeList()
{
using (var db = new BLEntities())
{
List<vehicle_make> vmk = db.vehicle_make.OrderBy(r => r.vmk_name).ToList();
return vmk;
}
}
public List<vehicle_group> getVehicleModelList(string vmk_id)
{
using (var db = new BLEntities())
{
List<vehicle_group> vmo = db.vehicle_group.Where(v => v.vg_vmk_id == vmk_id).OrderBy(r => r.vg_name).ToList();
return vmo;
}
}
}
public class vmCatalogue1
{
public string Title { get; set; }
[Display(Name = "Select a make")]
public IEnumerable<SelectListItem> selectVehicleMake { get; set; }
[Display(Name = "Select a model")]
public IEnumerable<SelectListItem> selectVehicleModel { get; set; }
}
}
控制器：
using BLPrototype.Models;
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.Mvc;
namespace BLPrototype.Controllers
{
public class TestController : Controller
{
//
// GET: /Test/
public ActionResult Index()
{
VehicleModels vm = new VehicleModels();
var model = new vmCatalogue1();
//Which is better and why?
model.selectVehicleMake = vm.getVehicleMakeList().Select(x => new SelectListItem { Value = x.vmk_id, Text = x.vmk_name });
//model.selectVehicleMake = new SelectList(vm.getVehicleMakeList(), "vmk_id", "vmk_name");
model.selectVehicleModel = new SelectList(vm.getVehicleModelList(""), "vg_id", "vg_name");
model.Title = "Title goes here";
return View(model);
}
VehicleModels vm = new VehicleModels();
[HttpPost]
public ActionResult Makes()
{
var makes = vm.getVehicleMakeList();
return Json(new SelectList(makes, "vmk_id", "vmk_name"));
}
[HttpPost]
public ActionResult Models(string vmk_id)
{
var models = vm.getVehicleModelList(vmk_id);
return Json(new SelectList(models, "vg_id", "vg_Name"));
}
}
}
看法：
@{
Layout = null;
}
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width" />
<title>@Model.Title </title>
<script src="~/Scripts/jquery-1.7.1.min.js"></script>
<script type="text/javascript">
function getModels(vmk_id) {
$.ajax({
url: "@Url.Action("Models")",
data: { vmk_id: vmk_id },
dataType: "json",
type: "POST",
error: function () {
alert("An error occurred.");
errorHandler("error1");
},
success: function (data) {
var items = "";
$.each(data, function (i, item) {
items += "<option value=\"" + item.Value + "\">" + item.Text + "</option>";
});
$("#selectVehicleModel").html(items);
}
});
}
$(document).ready(function () {
$("#selectVehicleMake").change(function () {
getModels($("#selectVehicleMake").val());
});
});
</script>
</head>
<body>
<div>
@model BLPrototype.Models.vmCatalogue1
@using (Html.BeginForm())
{
<div class="editor-label">
@Html.LabelFor(m => m.selectVehicleMake)
</div>
<div class="editor-field">
@Html.DropDownListFor(model => model.selectVehicleMake, Model.selectVehicleMake, "Please select")
</div>
<div class="editor-label">
@Html.LabelFor(m => m.selectVehicleModel)
</div>
<div class="editor-field">
@Html.DropDownListFor(m => m.selectVehicleModel, Model.selectVehicleModel, new { style = "width: 150px" })
</div>
}
</body>
</html>
上面的示例显示了级联下拉菜单。我见过很多不同的填充下拉列表的方法，我想通过视图模型来完成。我真的不确定哪个是最好的方法。一些例子似乎只显示一个列表，一些是选择列表项的列表，而另一些只是一个选择列表。有人可以告诉我区别以及“更好”的方法是什么……我知道这通常取决于应用程序。
如果我愿意，我还希望能够预先选择一个 Make，我已经看到了一些示例，其中您以各种方式包含 ID，而其他示例则将其标记到选择列表的末尾。它们似乎都不起作用。
此外，除非选择了品牌，否则模型不应真正显示。我会通过 CSS 还是其他方法来做到这一点？
最后我把“请选择”放在制作的末尾，所以它显示了。这似乎不是一个很好的方法。你能指出我正确的方向吗？
感谢您的宝贵时间，对于这么多愚蠢的问题，我深表歉意！
谢谢
周杰伦