This is a migrated thread and some comments may be shown as answers.
Partial View + Model Binding + Cascading ComboBox = Not supported?
0 Answers 59 Views
This is a migrated thread and some comments may be shown as answers.
This question is locked. New answers and comments are not allowed.
Jason
Top achievements
Rank 1
Jason asked on 25 Jul 2012, 06:16 PM
I'm running into an issue with the functionality of the AJAX request with the implementation of CascadeTo() on a ComboBox when used inside of a partial view with model binding.  I have an address partial view that contains a country combo box that causes a cascade to load the state/province combo box depending on which country was selected.

AccountInformation.cshtml:
@model BDS.Web.Store.Models.Account.AccountInfoModel
 
@using (Html.BeginForm())
{
    @Html.EditorFor(m => m.Address, "Address")
 
    <input type="submit" value="Update" />
}

Address.cshtml:
@model BDS.Web.Store.Models.Common.AddressModel
 
@(Html.Telerik().ComboBoxFor(model => model.Country)
        .Name("Address_Country")
        .BindTo(Model.AvailableCountries)
        .Placeholder("-- Select Country --")
        .CascadeTo("Address_StateProv")
    )
 
@(Html.Telerik().ComboBoxFor(model => model.StateProv)
        .Name("Address_StateProv")
        .DataBinding(binding => binding.Ajax().Select("_GetStates", "Address"))
        .Placeholder("-- Select State/Province --")
    )

AddressController.cs:
[HttpPost]
public JsonResult _GetStates(string Address_Country)
{
    var stateList =
        _stateService.GetStatesByCountry(Address_Country)
        .OrderBy(s => s.Name)
        .ToList();
 
    return Json(new SelectList(stateList, "Code", "Name"), JsonRequestBehavior.AllowGet);
}

With the above code snippets, everything works great until you actually attempt to submit the form.  The country list is bound to the available countries, the selected country in the model is correctly set which causes the ajax request to fire and load the state/province list, and the selected state/province in the model is correctly set.  However when you submit the form, both the country and state model properties are null because the controls names have been overridden (Address_Countries and Address_StateProv).  However, if I remove the calls to Name() in one or both of the combo box controls, the model binding will work but the AJAX request will fail to map and pass the value from the countries drop down.

I have tried everything that I can think of, but because the combo boxes are in a partial view the MVC engine is adding a prefix to the nested controls for model binding, so the name of the country combo box becomes Address.Country.  Unfortunately it also appears that the CascadeTo() sends the name of the control in the AJAX request:
Address.Country=TC&text=--+Select+State%2FProvince+--

And I'm not really sure how to create a C# parameter variable that includes a period.  Is there a way to get the AJAX request to map from Address.Country to a different parameter?  Is there a way to override the parameter name that CascadeTo() uses when creating the request?  Is there any other ways that I haven't thought of to maintain Model binding with a partial view and still have cascading?

Thanks,
Jason
Tags
ComboBox
Asked by
Jason
Top achievements
Rank 1
Share this question
or