上午使用MVC4和我试图实现级联列表框到我的意见之一,我一直在遵循this tutorial,并已成功创建2个级联下拉框,但我现在需要用户可以选择多个项目的列表框相同类型的功能。MVC4 - 使用Ajax实现级联多选列表框
只是澄清用户将能够从下拉列表中选择威胁。
在选择一个威胁,一个列表框将与所选威胁的相关安全事件稀少,在这里,用户将可以选择多个安全事件或一个单一的安全事件
当选择他们所选择的安全性事件,另一个列表框将填充与选定的安全事件关联的任何控件。
这里是我迄今为止
视图模型
public class AddNewRiskVM
{
public SelectList RiskTypeList { get; set; }
public SelectList GroupMembersList { get; set; }
public SelectList ThreatsList { get; set; }
public SelectList SecurityEventsList { get; set; }
public List SelectedSecurityEventsIDs { get; set; }
public SelectList ISOControlList { get; set; }
public List AssociatedIsoIDs { get; set; }
public int ISOControlID { get; set; }
public AddNewRiskVM()
{
SelectedSecurityEventsIDs = new List();
AssociatedIsoIDs = new List();
}
}
控制器
public void ConfigureNewRisk(AddNewRiskVM ViewModel)
{
var RiskTypes = _DBContext.RiskTypes;
var Threats = _DBContext.Threats;
ViewModel.RiskTypeList = new SelectList(RiskTypes, "ID", "Description");
ViewModel.GroupMembersList = new SelectList(new List(), "ID", "Name");
ViewModel.ThreatsList = new SelectList(Threats, "ID", "Description");
ViewModel.SecurityEventsList = new SelectList(new List(), "ID", "Description");
ViewModel.ISOControlList = new SelectList(new List(), "ID", "Description");
}
public ActionResult AddNewRisk()
{
AddNewRiskVM ViewModel = new AddNewRiskVM();
ConfigureNewRisk(ViewModel);
return View(ViewModel);
}
public IEnumerable GetISOControls(int SecurityEventID)
{
var QueryResults = _DBContext
.SecurityEventHasISOControls
.Include("SecurityEventHasISOControls.ISOControlID")
.Where(x => x.SecurityEventID == SecurityEventID)
.Select(x => x.ISOControl);
return QueryResults;
}
public JsonResult GetJsonISOControl(int ID)
{
var ISOControlListT = this.GetISOControls(Convert.ToInt32(ID));
var ISOControlList = ISOControlListT.Select(x => new SelectListItem()
{
Text = x.Description,
Value = x.ID.ToString(),
});
return Json(ISOControlList, JsonRequestBehavior.AllowGet);
}
注 - 我也有类似的方法为GetISOControl & GetJsonControl这是用来为SecurityEvent
查看
@using (Html.BeginForm(null, null, new { @id = string.Empty }, FormMethod.Post, new { @id = "AddNewWithSelect" }))
{
Add New Risk
@Html.DropDownList("RiskType", Model.RiskTypeList, "Select Risk Type", htmlAttributes: new { @class = "CascadeInputBox", onchange = "GetMembers()"})
@Html.DropDownList("GroupMember", Model.GroupMembersList, "Select Group Member", htmlAttributes: new {@class = "CascadeInputBox", @id = "CascadeDropDownList2"})
@Html.DropDownList("Threats", Model.ThreatsList, "Select Threat", htmlAttributes: new { @class = "CascadeInputBox", onchange = "GetSecurityEvents()"})
@Html.ListBoxFor(m => m.SelectedSecurityEventsIDs, Model.SecurityEventsList, htmlAttributes: new { @id = "SelectListEvent", onchange = "GetISOControls()"})
@Html.ListBox("ISOControls", Model.ISOControlList, htmlAttributes: new { @id = "SelectListISO"})
}
function GetISOControls() {
$.ajax({
url: "@Url.Action("GetJsonISOControl", "RiskAssesment")",
dataType: "json",
type: "GET",
data: { id: $("#Events").val() },
error: function() {
},
beforeSend: function() {
},
success: function (data) {
var items = "";
$.each(data, function (i, item) {
items += "" + item.Text + "";
});
$("#SelectListISO").html(items);
}
});
}
function GetSecurityEvents() {
$.ajax({
url: "@Url.Action("GetJsonSecurityEvent", "RiskAssesment")",
dataType: "json",
type: "GET",
data: { id: $("#Threats").val() },
error: function() {
},
beforeSend: function() {
},
success: function (data) {
var items = "";
$.each(data, function (i, item) {
items += "" + item.Text + "";
});
$("#SelectListEvent").html(items);
}
});
}
这是我第一次使用AJAX,我知道我必须以某种方式改变下面的线,因为在我的辅助方法,我还没有使用的字符串名称,而是我使用了一个linq表达式,也许这就是这个工作所需要的全部,现在我不能看到其他任何东西,但也许我错过了一些东西?
data: { id: $("#Events").val() },
如果任何人可以提供任何建议,尤其是与ajax,它将不胜感激。
在此先感谢