Telerik MVC3 Cascading ComboBox using ClientEvents Get Multiparameter control

2012-05-15

2503
0
jQuery
2012-05-21

Telerik_Mvc3_CascadingComboBox.rar

The project use [.net Framework 4.0 ]，[MVC 3.0]，[Telerik 2012.1.214.340]

Site.Master

 <script src="<%: Url.Content("~/Scripts/Telerik_ClientEvents_Cascading_base.js") %>" type="text/javascript"></script>

請引用 Telerik_ClientEvents_Cascading_base.js

Telerik_ClientEvents_Cascading_base.js

function Cascading_onChange(e) {
    var Caller = e.currentTarget.id;
    Child_disenable(Caller);
    if (e.value != "") {
        $('div[depend^='+ Caller +']').each(function (index) {
            var depend_Name = this.getAttribute('depend');
            var controller = this.getAttribute('controller');
            if (controller == undefined || controller == null || controller == "") {
                return;
            }
            var action = this.getAttribute('action');
            if (action == undefined || action == null || action == "") {
                return;
            }
            var url = "/" + controller + "/" + action + "?";
            var dependParam = Telerik_retrieveDependedPara(depend_Name);
            var Caller_child = $(this).children("input");
            var tAction = action.split("_");
            var DDL_Caller_child = $(Caller_child).data(tAction[1]);

            $.get(url + dependParam, function (data) {
                DDL_Caller_child.dataBind(data);
                //DDL_Caller_child.loader.hideBusy();
                DDL_Caller_child.enable();
                DDL_Caller_child.close();
            }, "json");
        });
    }
}

function Child_disenable(Caller) {
    $('div[depend^=' + Caller + ']').each(function (index) {
        var action = this.getAttribute('action');
        if (action == undefined || action == null || action == "") {
            return;
        }
        var Caller_child = $(this).children("input");
        var tAction = action.split("_");
        $(Caller_child).data(tAction[1]).select(-1);
        //$(Caller_child).data(tAction[1]).loader.hideBusy();
        $(Caller_child).data(tAction[1]).disable();
        $(Caller_child).data(tAction[1]).close();
        Child_disenable($(Caller_child).attr("id"));
    });
}


function Telerik_retrieveDependedPara(depend_name) {

    if (depend_name == undefined || depend_name == null) {
        return '';
    }
    var _all_depend = depend_name.split(' ');

    if (0 >= _all_depend.length) {
        return '';
    }
    var _param = '';

    for (var i = 0; i < _all_depend.length; i++) {
        var dpName = _all_depend[i];
        if (dpName != undefined && dpName != null && dpName != " ") {
            dpName = dpName.replace(/(^[\s]*)|([\s]*$)/g, "");
            var _depend_element = $('#' + dpName);

            if (0 >= _depend_element.length) {
                continue;
            }
            var dpInput = $("#" + dpName);
            var dpValue = "";
            if (0 >= dpInput.length) {
                dpValue = _depend_element.val();
            }
            else {
                dpValue = dpInput.val();
            }
            _param += ("&" + dpName + "=" + escape(dpValue));
        }
    }
    return _param;
}

Index.aspx

<td>
            地址
        </td>
        <td>
            <%= Html.Telerik().ComboBox()
                              .Name("AddressLine")
                              .DataBinding(binding => binding.Ajax().Select("Telerik_tComboBox_AddressLine", "Ajax"))
                              .Filterable(filtering => { filtering.FilterMode(AutoCompleteFilterMode.StartsWith); })
                              .ClientEvents(events => events.OnChange("Cascading_onChange"))
                              .Placeholder("Select Order...")
                              .Enable(false)
                              .HtmlAttributes(new { controller = "Ajax", action = "Telerik_tComboBox_AddressLine", 
                                                                                                 depend = "City CountryRegion StateProvince" })
                    
            %>
        </td>

請依照以下命名規則（Please Follow these naming rules）:

Line number : ( 7 , 12)----> “Telerik_tComboBox_AddressLine"

「Telerik_小 t 加上Telerik元件屬性值_name名稱屬性值」

(「Telerik_a little t +Telerik Component property_+name property value」)

EX: 「Telerik_tComboBox_AddressLine」、「Telerik_tDropDownList_AddressLine」

Line number : ( 9)----> events OnChange 事件時

固定叫用的「Cascading_onChange」方法

( Fixed using the 「Cascading_onChange」funtion)

EX: events.OnChange("Cascading_onChange")

Line number : ( 13)----> depend property

depend = “Name1 Name2 Name3”

depend (相依性)值，Name1 與 Name2 與 Name3，請用「空白」隔開

( depend property , Name1 and Name2 and Name3 Please using blank separate )

「Name1」是表示「所要相依的爸爸名稱」

(「Name1」 is parent depend Name )

EX: depend ="City CountryRegion StateProvince"

iverson.huang 筆記

回首頁