Results 1 to 3 of 3

Thread: Populating Dropdown on partial update.

  1. #1

    Thread Starter
    Fanatic Member
    Join Date
    Feb 2000
    Location
    Dunmow,Essex,England
    Posts
    898

    Populating Dropdown on partial update.

    Hi All,

    In my view I have:
    Code:
    <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:

    Code:
     $("#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:
    Code:
    [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:
    Code:
    public struct PrivateCarsRiskJsonResults
        {
            public IEnumerable<PointsSelectListItemWrapper> VehicleTypes;
        }
    where:
    Code:
    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

  2. #2
    Super Moderator jmcilhinney's Avatar
    Join Date
    May 2005
    Location
    Sydney, Australia
    Posts
    110,299

    Re: Populating Dropdown on partial update.

    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:
    javascript Code:
    1. $("#ClinicalSupportClusterID").change(function ()
    2.     {
    3.     showLoading();
    4.     $.ajax({
    5.         type: 'GET',
    6.         dataType: 'json',
    7.         url: '/LocalHealthDistrict/GetLocalHealthDistricts',
    8.         data: { clinicalSupportClusterId: $('#ClinicalSupportClusterID').val() },
    9.         success: getLocalHealthDistricts,
    10.         error: errorHandler,
    11.         cache: false
    12.     });
    13. });
    Here's the action being called asynchronously:
    csharp Code:
    1. public ActionResult GetLocalHealthDistricts(long? clinicalSupportClusterId)
    2. {
    3.     var lhds = localHealthDistrictService.GetEntityListByParentId(clinicalSupportClusterId, true)
    4.                                          .Select(lhd => new SelectListItem
    5.                                                          {
    6.                                                              Text = lhd.LocalHealthDistrictName,
    7.                                                              Value = lhd.LocalHealthDistrictID.ToString()
    8.                                                          });
    9.  
    10.     return this.Json(lhds, JsonRequestBehavior.AllowGet);
    11. }
    Here's the javascript executed on a successful AJAX call. This is in the script for this view:
    javascript Code:
    1. //populate the Local Health Networks
    2. function getLocalHealthDistricts(itemJson)
    3. {
    4.     cascadeSelect('#LocalHealthDistrictID', itemJson, '', true);
    5.     hideLoading();
    6. }
    This is in a common script file:
    javascript Code:
    1. function cascadeSelect(controlPath, valueObjects, selectedValue, addBlankRow)
    2. {
    3.     var selectCtl = $(controlPath);
    4.     selectCtl.html('');
    5.    
    6.     if (selectCtl[0]) {
    7.         var options = selectCtl[0].options;
    8.  
    9.         if (addBlankRow) {
    10.             options[options.length] = new Option('', '');
    11.         }
    12.         $.each(valueObjects, function (index, valueObject)
    13.         {
    14.             options[options.length] = new Option(valueObject.Text, valueObject.Value);
    15.         });
    16.  
    17.         if (selectedValue) {
    18.             selectCtl.val(selectedValue);
    19.         }
    20.     }
    21. }

  3. #3

    Thread Starter
    Fanatic Member
    Join Date
    Feb 2000
    Location
    Dunmow,Essex,England
    Posts
    898

    Re: Populating Dropdown on partial update.

    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.

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  



Click Here to Expand Forum to Full Width