如何返回此数据并填充Select元素

本文关键字:数据 填充 Select 元素 何返回 返回 | 更新日期: 2023-09-27 18:16:03

好的,我相信我有我需要正确返回我需要的数据的一切,我只是不确定如何返回它。

我有一个页面与层叠下拉框,通过JQuery填充另一个框。我现在已经编码了jQuery().change(),已经编码了模型,已经编码了select元素。我只是需要你帮我控制一下。

这是我希望HTML看起来的样子(如果有更好的或不同的方式,当然是可以的)。

AD_DepartmentProfile由部门经理和每个直接报告填充。我需要弄清楚如何将数据返回到Select元素中。

<select id="owner" name="owner">
        <optgroup label="Manager">
            <option value="john">John Dow</option>
        </optgroup>
        <optgroup label="Members">
                <option value="jane">Jane Doe</option>
                <option value="josh">Josh Doe</option>
        </optgroup>
</select>

这些是我的模型:

public class AD_DepartmentProfile
    {
        public AD_DepartmentProfile()
        {
            this.AD_UserProfile = new HashSet<AD_UserProfile>();
            this.AD_ManagerProfile = new AD_UserProfile();
        }
        public string name { get; set; }
        public virtual AD_UserProfile AD_ManagerProfile { get; set; }
        public virtual ICollection<AD_UserProfile> AD_UserProfile { get; set; }
    }
public class AD_UserProfile
    {
        public string distinguishedName { get; set; }
        public string email { get; set; }
        public string manager { get; set; }
        public string name { get; set; }
        public string userPrincipalName { get; set; } // Useful if we need to allow a user to 'log on' as a different user.  
        public string userName { get; set; } 
    }
这是我的Jquery:
jQuery('#departmentID').change(function () {
        var department = jQuery('#departmentID');
        var value = department.val();
        var text = department.children("option").filter(":selected").text();
        GetOwnerList(value, text);
    });
function GetOwnerList(departmentid, departmentText) {
    jQuery('#owner').find('option').remove();
    jQuery.getJSON("/MasterList/GetOwners/" + departmentid, null, function (data) {
        var html;
        var len = data.length;
        for (var i = 0; i < len; i++) {
            if (data[i] && data[i] != "") html += '<option value = "' + data[i].functionID + '">' + data[i].name + '</option>';
        }
        jQuery('#owner').append(html);
        jQuery('#owner').trigger('liszt:updated');
    });

这是控制器:

public ActionResult getOwners(int id = 0)
{
     //  Load up the department record
     Department department = db.Department.Find(id);
     // loads up the manager and direct reports into the model.
     AD_DepartmentProfile dp = new ActiveDirectory().GetDepartmentInfo(department.name, department.owner);
}

如何返回此数据并填充Select元素

要在选择列表中进行分组,您需要编写一些自定义内容。查看这个扩展:

支持下拉菜单

从那里,你可以使用控制器来馈送视图。只要替换成你想要的扩展名:

控制器:

ViewData["Manager"] = new SelectList(db.GetAllManagers(), "Manager", "Manager");

视图:

@Html.DropDownGroupList("ManagerDescription",(SelectList)ViewData["Manager"])

这是我使用的控制器:

public ActionResult GetOwners(int id = 0)
        {
            Departments department = db.Department.Find(id);
            AD_DepartmentProfile dp = new ActiveDirectory().GetDepartmentInfo(department.name, department.owner);
            return this.Json(dp, JsonRequestBehavior.AllowGet);
        }

这是我对jQuery所做的更改。

function GetOwnerList(departmentid, departmentText) {
    jQuery('#owner').find('option').remove();
    jQuery.getJSON("/MasterList/GetOwners/" + departmentid, null, function (data) {
        var html;
        var len = data.AD_UserProfile.length;
        console.log(data);
        if (data.AD_ManagerProfile.name != null) {
            html += '<optgroup label="Manager">';
            html += '<option value = "' + data.AD_ManagerProfile.username + '">' + data.AD_ManagerProfile.name + '</option>';
            html += '</optgroup>';
        }
        if (len != 0) {
            html += '<optgroup label="Members">';
            for (var i = 0; i < len; i++) {
                html += '<option value = "' + data.AD_UserProfile[i].username + '">' + data.AD_UserProfile[i].name + '</option>';
            }
            html += '</optgroup>';
        }
        jQuery('#owner').append(html);
        jQuery('#owner').trigger('liszt:updated');
    });
}