-
Feb 17th, 2012, 04:51 AM
#1
Thread Starter
Fanatic Member
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> </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> </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
-
Feb 20th, 2012, 12:19 AM
#2
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:
$("#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:
csharp Code:
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:
javascript Code:
//populate the Local Health Networks function getLocalHealthDistricts(itemJson) { cascadeSelect('#LocalHealthDistrictID', itemJson, '', true); hideLoading(); }
This is in a common script file:
javascript Code:
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); } } }
-
Feb 20th, 2012, 02:47 AM
#3
Thread Starter
Fanatic Member
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
-
Forum Rules
|
Click Here to Expand Forum to Full Width
|