MVC3级联下拉列表,使用JQuery在编辑时填充子列表
我用这个javascript在create视图中有一个可用的级联下拉列表MVC3级联下拉列表,使用JQuery在编辑时填充子列表,jquery,json,asp.net-mvc-3,Jquery,Json,Asp.net Mvc 3,我用这个javascript在create视图中有一个可用的级联下拉列表 <script type="text/javascript"> $(document).ready(function () { $("#GaCatId").change(function () { var id = $(this).val(); $.getJSON("/Gallery/GetSubCategories/", { id: id },
<script type="text/javascript">
$(document).ready(function () {
$("#GaCatId").change(function () {
var id = $(this).val();
$.getJSON("/Gallery/GetSubCategories/", { id: id },
function (data) {
var select = $("#GaSCatId");
select.empty();
select.append($('<option/>', {
value: 0,
text: "Select a Sub Category"
}));
$.each(data, function (index, data) {
select.append($('<option/>', {
value: data.Value,
text: data.Text
}));
});
});
});
});
我想编辑它,以便在edit razor视图中,它将根据数据库中的默认ID记录填充子列表。实际上,我正在查看代码是否有ID,您可以做的是检查firstdropdowns是否为selected item值,如果它有效,则进行另一个ajax调用以获取第二个dropdown的数据并加载它。 假设页面中存在两个下拉列表
$(function(){
var gaCatId=$("#gaCatId").val();
if(gaCatId!="")
{
var items="";
$.getJSON("@Url.Action("GetSubCategories","Gallery")/"+gaCatId,
function(data){
$.each(data, function (index, item) {
items+="<option value='"+item.Value+"'>"+item.Text+"</option>";
});
$("#GaSCatId").html(items);
});
}
});
假设GetAvailableCategories和GetSubCategories是两个返回SelectListItem列表的方法
在您看来,这是我们ProductVM类的强类型
@model ProductVM
@using(Html.Beginform())
{
@Html.HiddenFor(x=>x.ID)
@Html.EditorFor(x=>x.Name)
@Html.DropDownListfor(x=>x.SelectedCategoryID ,
Model.Categories,"select")
@Html.DropDownListfor(x=>x.SelectedSubCategoryID,
Model.SubCategories,"select")
<input type="submit" />
}
非常感谢您的及时回复和其他可行的解决方案。我尝试了JavaScript函数,但没有得到结果。我是要将其添加到使用“创建”视图的原始代码中,还是应该用您建议的代码替换它?我个人建议您执行第二种方法,即在“编辑”视图中加载数据并显示它。
public ActinResult Edit(int id)
{
var vm=new ProductVM { ID=id};
Product product=repo.GetProductFromID(id);
vm.Name=product.Name;
vm.Categories=GetAvailableCategories();
vm.SelectedCategoryID=product.Category.ID;
vm.SubCategories=GetSubCategories(product.Category.ID);
vm.SelectedCategoryID=product.SubCategory.ID;
return View(vm);
}
private List<SelectListItem> GetAvailableCategories()
{
//TO DO : read from repositary and build the list and return.
}
@model ProductVM
@using(Html.Beginform())
{
@Html.HiddenFor(x=>x.ID)
@Html.EditorFor(x=>x.Name)
@Html.DropDownListfor(x=>x.SelectedCategoryID ,
Model.Categories,"select")
@Html.DropDownListfor(x=>x.SelectedSubCategoryID,
Model.SubCategories,"select")
<input type="submit" />
}