MVC4-使用Ajax實現級聯多選列表框

Question

我正在使用MVC4，正在嘗試將級聯列表框實現到我的一個視圖中，我一直在遵循本教程並成功創建了2個級聯下拉框，但是現在我需要列表框具有相同類型的功能，用戶可以在其中使用選擇多個項目。

只是為了澄清一下，用戶將能夠從下拉列表中選擇威脅。

選擇威脅后，將在列表框中填充所選威脅的相關安全事件，此處用戶將能夠選擇多個安全事件或單個安全事件

選擇其選定的安全事件后，將在另一個列表框中填充與選定的安全事件關聯的任何控件。

這是我到目前為止的

查看模型

 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<int> SelectedSecurityEventsIDs { get; set; }
        public SelectList ISOControlList { get; set; }
        public List<int> AssociatedIsoIDs { get; set; }
        public int ISOControlID { get; set; }

        public AddNewRiskVM()
        {
            SelectedSecurityEventsIDs = new List<int>();
            AssociatedIsoIDs  = new List<int>();
        }       
    }

調節器

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<GroupMember>(), "ID", "Name");
            ViewModel.ThreatsList = new SelectList(Threats, "ID", "Description");
            ViewModel.SecurityEventsList = new SelectList(new List<SecurityEvent>(), "ID", "Description");
            ViewModel.ISOControlList = new SelectList(new List<ISOControl>(), "ID", "Description");
        }

        public ActionResult AddNewRisk()
        {
            AddNewRiskVM ViewModel = new AddNewRiskVM();
            ConfigureNewRisk(ViewModel);

            return View(ViewModel);
        }
     public IEnumerable<ISOControl> 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);
        }

注-我有與用於SecurityEvent的GetISOControl和GetJsonControl類似的方法

視圖

<div class="containeSelect">
     @using (Html.BeginForm(null, null, new { @id = string.Empty }, FormMethod.Post, new { @id = "AddNewWithSelect" }))
     {
        <h3>Add New Risk</h3>
        <fieldset>

             @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"})

        </fieldset>
     }

<script>
    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 += "<option value=\"" + item.Value + "\">" + item.Text + "</option>";
                });
                $("#SelectListISO").html(items);
            }
        });
    }
 </script>
<script>  
    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 += "<option value=\"" + item.Value + "\">" + item.Text + "</option>";  
                });
               $("#SelectListEvent").html(items);
            }  
        });         
    }  
 </script> 

這是我第一次使用ajax，我知道我必須以某種方式更改下面的行，因為在我的輔助方法中，我沒有使用字符串名稱，而是使用了linq表達式，也許這就是所需要的為了這個工作，現在我看不到其他任何東西，但是可能丟失了什么？

data: { id: $("#Events").val() },

如果有人可以提供任何建議，尤其是使用ajax，將不勝感激。

提前致謝

Answer 1

您沒有一個id="Events"的元素。 您引用的列表框具有id="SelectedSecurityEventIDs" 。 而且由於它的<select multiple>值是一個數組，因此您需要jQuery.param方法來序列化數據。 我建議您使用Unobtrusive Javascript ，而不是用行為污染標記，以便將GetISOControls腳本替換為

var isoList = $("#SelectListISO"); // cache it
$('#SelectedSecurityEventIDs').change(function() {
    // create a serialized representation of the selected values
    var data = $.param({ id: $(this).val() }, true);

    $.ajax({
        url: "@Url.Action("GetJsonISOControl", "RiskAssesment")",
        dataType: "json",
        type: "GET",
        data: data,
        success: function (data) {
            isoList.empty();
            $.each(data, function (i, item) {
                isoList.append($('<option></option>').val(item.Value).text(item.Text));
            });
        }
    });
});

並且控制器方法需要

public JsonResult GetJsonISOControl(IEnumerable<int> ID)

因為您要發布一個值數組（您將需要調整查詢以適合）。 還請注意，無需創建SelectList （它只是將多余的數據發送回未使用的客戶端）。 是應該的

var ISOControlList = ISOControlListT.Select(x => new
{
    Text = x.Description,
    Value = x.ID.ToString(),
});

邊注：

@Html.ListBox("ISOControls", Model.ISOControlList, ..)

正在創建與您的模型沒有關系的控件（它沒有名為ISOControls的屬性，因此不會綁定到您的模型。我認為應該是

@Html.ListBoxFor(m => m.AssociatedIsoIDs, Model.ISOControlList, ..)