mvc4 empty().html,MVC4 - 使用Ajax实现级联多选列表框

上午使用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，它将不胜感激。

在此先感谢