DropDownList加载了一些类别,我需要根据第一个下拉列表中选择的选项填充另一个@ Html.DropDownList。
这是我用来填充第一个下拉列表的代码:
在控制器上:
TecnicService ListCategory = new TecnicService();
IList<Category> resultCat = ListCategory.GetCategory();
List<SelectListItem> CatDropDown = new List<SelectListItem>();
foreach (Category in resultadoCat)
{
CatDropDown.Add(new SelectListItem
{
Value = a.Id.ToString(),
Text = a.Name.ToString()
});
}
在视图上:
@model APP.Models.DataViewModel
@using (Html.BeginForm("NewPol", "Tecnic", null, FormMethod.Post, new { id = "pol-data-form", @class = "form-horizontal" }))
{
<div class="control-group">
<label for="category" class="control-label">Category</label>
<div class="controls">
@Html.DropDownList("BasicData", Model.Category, new { @class= "required", name="category"})
</div>
</div>
<div class="control-group">
<label for="ram" class="control-label">Ram</label>
<div class="controls">
@Html.DropDownList() WHAT DO I DO HERE???????
</div>
</div>
.
.}
我通过返回List的服务获取数据,现在我需要填充第二个下拉列表,具体取决于第一个下拉列表的选择。
答案 0 :(得分:3)
您正在寻找的内容称为级联下拉列表。
您可以创建一个jQuery插件来跟踪更改并向服务器发送ajax请求以获取另一个下拉列表的值:
(function ($) {
$.fn.cascade = function (options) {
var defaults = { };
var opts = $.extend(defaults, options);
return this.each(function () {
$(this).change(function () {
var selectedValue = $(this).val();
var params = { };
params[opts.paramName] = selectedValue;
$.getJSON(opts.url, params, function (items) {
opts.childSelect.empty();
$.each(items, function (index, item) {
opts.childSelect.append(
$('<option/>')
.attr('value', item.Id)
.text(item.Name)
);
});
});
});
});
};
})(jQuery);
然后简单地连线:
$(function () {
$('#SelectedProvinceId').cascade({
url: '@Url.Action("Cities")',
paramName: 'provinceId',
childSelect: $('#SelectedCityId')
});
$('#SelectedCityId').cascade({
url: '@Url.Action("Suburbs")',
paramName: 'cityId',
childSelect: $('#SelectedSuburbId')
});
});
来源:Cascading drop-downs in MVC 3 Razor view
来自简单谷歌搜索的更多来源:
http://www.sidecreative.com/Blog/Entry/Cascading-dropdown-lists-with-MVC4-and-jQuery
http://www.codeproject.com/Articles/258172/Simple-Implementation-of-MVC-Cascading-Ajax-Drop-D
答案 1 :(得分:0)
通常使用ajax完成。您可以通过编写一些JQuery代码或使用可以在Web上执行的许多插件中的一个来完成它。
作为旁注,我注意到你使用了TwitterBootstrap。查看TwitterBootstrapMvc。您可能会发现它很有用。
不知道为什么亚当的答案被低估了。他实际上给了一个很好的答案。不知道gusadolfo是否因为没有提供代码而对其进行了贬低。如果是这样的话,gusadolfo,不要指望代码。我们可以指导您,修复您在某处犯下的错误,但不要指望我们完全完成您的工作。