Populating Dropdown on partial update.

[Bill Crawley]

Hi All,

In my view I have:

<tr>
                            <td>@Html.LabelFor(model => model.Group, null, null, null)</td>
                            <td>@Html.EditorFor(model => model.Group)</td>
                            <td>&nbsp;</td>    
                        </tr>
                        <tr>
                            <td>@Html.LabelFor(x => x.VehicleTypeId, null, null, null)</td>
                            <td>@Html.DropDownListFor(x => x.VehicleTypeId, new SelectList(Model.VehicleTypes, "Id", "Description"), "-- Select --")</td>
                            <td>&nbsp;</td>
                        </tr>

when the view initially shows my dropdown is empty. when the user places a value in group then this will cause a partial update to happen:

 $("#Group").change(function () {
        partialUpdate();
    });

function partialUpdate() {
        var polId = $("#PolicyZoneID").attr("value");
        var secId = $("#SectionID").attr("value");
        var riskId = $("#RiskID").attr("value");
        var riskTypeId = $("#RiskTypeID").attr("value");
        var group = $("#Group").attr("value");

        var jSonData = '{ "policyZoneId" : "' + polId +
                         '","sectionId" : "' + secId +
                         '","riskId" : "' + riskId +
                         '","riskTypeId" : "' + riskTypeId +
                         '","group" : "' + group + '"}';

        $.ajax({
            url: window.rootDir + 'RoadRisk/PrivateCarsReload',
            type: 'POST',
            data: jSonData,
            dataType: 'json',
            contentType: 'application/json; charset=utf-8',
            success: function (data) {
                //remove existing contents from the dropdown
               //and update with new contents. 
               

            },
            error: function (data) {
                alert(data);
            }
        });
        
    }

my controller has:

[HttpPost]
        public JsonResult PrivateCarsReload(int policyZoneId, int sectionId, int riskId, int riskTypeId, int group)
        {
            return Json(RoadRiskService.UpdatePrivateCarsFromAjax(policyZoneId, sectionId, riskId, riskTypeId, group), JsonRequestBehavior.DenyGet);
        }

this will return a struct in the form:

public struct PrivateCarsRiskJsonResults
    {
        public IEnumerable<PointsSelectListItemWrapper> VehicleTypes;
    }

where:

public class PointsSelectListItemWrapper
    {
        public Int64 Id { get; set; }
        public string Description { get; set; }
        public Int32 Points { get; set; }
        public bool Selected { get; set; }
        public Int32? MinGroup { get; set; }
        public Int32? MaxGroup { get; set; }
    }

How do I populate my dropdown list and how do I keep it in sync on the model? Thanks

[jmcilhinney]

Here's an example of how we do it here. We have a view that allows you to search for medical facilities. Each facility resides within a local health district and each district resides within a clinical support cluster. There are drop-downs on the view for both. We initially include all local health districts in the drop-down but, when the user selects a clinical support cluster, the district list is filtered to include only those within the selected cluster. Here's the handler for the cluster change:

$("#ClinicalSupportClusterID").change(function ()
    {
    showLoading();
    $.ajax({
        type: 'GET',
        dataType: 'json',
        url: '/LocalHealthDistrict/GetLocalHealthDistricts',
        data: { clinicalSupportClusterId: $('#ClinicalSupportClusterID').val() },
        success: getLocalHealthDistricts,
        error: errorHandler,
        cache: false
    });
});

Here's the action being called asynchronously:

public ActionResult GetLocalHealthDistricts(long? clinicalSupportClusterId)
{
    var lhds = localHealthDistrictService.GetEntityListByParentId(clinicalSupportClusterId, true)
                                         .Select(lhd => new SelectListItem
                                                         {
                                                             Text = lhd.LocalHealthDistrictName,
                                                             Value = lhd.LocalHealthDistrictID.ToString()
                                                         });
 
    return this.Json(lhds, JsonRequestBehavior.AllowGet);
}

Here's the javascript executed on a successful AJAX call. This is in the script for this view:

//populate the Local Health Networks
function getLocalHealthDistricts(itemJson)
{
    cascadeSelect('#LocalHealthDistrictID', itemJson, '', true);
    hideLoading();
}

This is in a common script file:

function cascadeSelect(controlPath, valueObjects, selectedValue, addBlankRow)
{
    var selectCtl = $(controlPath);
    selectCtl.html('');
    
    if (selectCtl[0]) {
        var options = selectCtl[0].options;
 
        if (addBlankRow) {
            options[options.length] = new Option('', '');
        }
        $.each(valueObjects, function (index, valueObject)
        {
            options[options.length] = new Option(valueObject.Text, valueObject.Value);
        });
 
        if (selectedValue) {
            selectCtl.val(selectedValue);
        }
    }
}

[Bill Crawley]

Thanks,

That looks great I'll see if I can use any of it (should be able to). I dont think I can pre-populate then filter though since there are over 50,000 records.