I'm new to MonoRail and am trying to figure out how to have it so that I can select a parent category in a dropdown then have it show a second dropdown with the categories that are children of the parent.
If I were using what I'm used to, ASP.NET MVC, I would have a javascript function that would be called onchange of the first dropdown and would make an ajax call to a controller method (passing in the selected parent category id) that would grab all child categories of that parent category and return them in JSON. Then in the callback javascript function I would eval the JSON and populate the second dropdown with the child categories.
How would I do this using MonoRail/jQuery? Here's the code I have so far:
$FormHelper.Select("business.category.id", $categories, "%{value='id', text='name', firstoption='Select a Category'}")
$FormHelper.Select("business.category.id", $childCategories, "%{value='id', text='name开发者_如何学编程', firstoption='Select a Sub-Category'}")
Then in BusinessController.cs:
private void AddDataToModels()
{
PropertyBag["categories"] = CategoryRepository.GetParentCategories();
PropertyBag["childCategories"] = CategoryRepository.GetChildCategories(1);
}
Thanks for any input on how to approach this!
Justin
See if this one helps:
http://ayende.com/Blog/archive/2007/10/08/Cascading-Drop-Downs-in-MonoRail.aspx
Here's the answer for others who are looking to call controller actions from jQuery and return JSON...
Controller Method:
[return: JSONReturnBinder(Properties = "Id,Name")]
public BusinessType[] GetChildBusinessTypes(int parentId)
{
var businessTypes = BusinessTypeRepository.GetChildBusinessTypes(parentId);
return businessTypes;
}
Javascript:
$(document).ready(function () {
$('#business_parentbusinesstype_id').change(function () {
jQuery.ajax({
url: "$UrlHelper.For("%{action='$business.site.id/GetChildBusinessTypes'}")",
data: { parentId: $('#business_parentbusinesstype_id').val() },
dataType: 'json',
type: 'GET',
success: fillChildBusinessTypes,
error: ajaxError
});
});
});
function fillChildBusinessTypes(json) {
//get business types.
var businessTypes = eval(json);
//bind business types to dropdown.
$("#business_businesstype_id").get(0).options.length = 0;
$("#business_businesstype_id").get(0).options[0] = new Option("Select a Business Type", "0");
jQuery.each(businessTypes, function(index, item) {
$('#business_businesstype_id').get(0).options[$("#business_businesstype_id").get(0).options.length] = new Option(item.Name, item.Id);
});
//show child dropdown.
Show($('#spnChildBusinessTypes'));
}
精彩评论