ABP Zero在Modal中使用"SelectPicker & Select2"控件需要注意的问题

在ABP Zero中的Modal使用“SelectPicker" 和 ”Select2“控件时，可以在Modal定义中使用标准的HTML进行定义即可。

Select2事例：

            <div class="form-group">
                <label for="Service_Taxes">@L("Taxes")</label>
                <select id="Service_Taxes" class="form-control select2" style="width:100%;" multiple>

                @foreach(var item in Model.Taxes)
                {
                    <option value="@item.Value">@item.DisplayText</option>
                }
                </select>

            </div>

SelectPicker事例：（这个事例使用的HTML.DropDownList，但使用正常的HTML定义也是可以的。）

            <div class="form-group">
                <label for="Service_Taxes">@L("Taxes")</label>

                @Html.DropDownList(
                    "Tax",Model.Taxes.Select(t=>t.ToSelectListItem()),
                    new
                    {
                        @class="form-control selectpicker",
                        data_live_search="true",
                        id="Service_Taxes",
                        multiple= "multiple"
                    })
            </div>

以下是重点了，就是无论使用哪种定义方式都最终需要使用js脚本进行属性的配置。

Select2脚本事例：

        this.init = function(modalManager) {
            _modalManager = modalManager;
            var modal = _modalManager.getModal();

            modal.find('.date-picker').datetimepicker({
                locale: abp.localization.currentLanguage.name,
                format: 'L'
            });

            modal.find("#Service_Taxes")
                .select2({
                    placeholder: "Select a state"
                });

            _$serviceInformationForm = _modalManager.getModal().find('form[name=ServiceInformationsForm]');
            _$serviceInformationForm.validate();

            setCalcMethod();
        };

SelectPicker脚本事例：

        this.init = function(modalManager) {
            _modalManager = modalManager;
            var modal = _modalManager.getModal();

            modal.find('.date-picker').datetimepicker({
                locale: abp.localization.currentLanguage.name,
                format: 'L'
            });

            modal.find("#Service_Taxes")
                .selectpicker({
                    iconBase: "fa",
                    tickIcon: "fa fa-check"
                });

            _$serviceInformationForm = _modalManager.getModal().find('form[name=ServiceInformationsForm]');
            _$serviceInformationForm.validate();

            setCalcMethod();
        };

 

******重要的事情说三遍，就是一定要在Modal的配套脚本文件中对Modal中定义的”SelectPicker“ 或 ”Select2“控件进行属性配置。******

如果不进行配置，控件将不会得到正确的式样。