How to return this data and populate a Select element

Question

Ok I believe I have everything I need to correctly return the data I need, I am just not sure how to return it.

I have a page with a cascading drop down box that populates another box via JQuery. I currently have the jQuery().change() even coded, I have the models coded, I have the select element coded. I just need help with the controller.

Here is how I would like the HTML to look (if there is a better or different way that is ok of course).

The AD_DepartmentProfile is populated with the manager of the department and each direct report. I need to figure how out to get that data returned into the Select element.

<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>

Here are my models:

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; } 
    }

Here is my 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');
    });

Here is the controller:

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);
}

score 0 · Answer 1 · edited May 23 '17 at 11:43

0

To get grouping in your select list you will need to write something custom. Check out this extension:

Support for optgroup in dropdown

From there, you can use the controller to feed the view as such. Just replace with whatever extensions you decide to go with:

Controller:

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

View:

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

edited May 23 '17 at 11:43

Community

1
1

answered May 30 '13 at 18:59

Papa Burgundy

6,397
6
42
48

I was messing around with it while waiting for a response and figured out how to do it. Posted answer. – James Wilson May 30 '13 at 19:07
Nice. Yes, I think I misunderstood your question and was going for the parent dropdown. – Papa Burgundy May 30 '13 at 19:20

score 0 · Accepted Answer · answered May 30 '13 at 19:07

Here is the controller I am using:

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);
        }

And here is the changes I made to the 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');
    });
}

How to return this data and populate a Select element

2 Answers2