基于ABP做一个简单的系统——实战篇：3.视图优化之bootstrap-select显示为空白

abp模板是基于bootstrap4+一些常用组件+adminlte框架做的。初始下载的模板就已经包含简单的用户管理、角色管理、权限管理页面，如果项目要求不高的话可以直接拿来用。

默认是包含了textbox,checkbox,tab,datatable,pager等常用组件示例的，但看了一圈没找到dropdownlist,datetimepicker的示例。

首先来看dropdownlist，查看libs发现默认没有带任何第三方dropdown插件

 找来了bootstrap-select，好看又好用。

找到mvc项目下的libman.json,在最后加上bootstrap-select包

{
      "library": "bootstrap-select@1.13.17",
      "destination": "wwwroot/libs/bootstrap-select"
    }

右键libman.json,选择还原客户端库，这样libs文件夹下就出现了

 修改Views/Shared/Layout文件夹下的_Scripts.cshtml和_Styles.cshtml，分别加入js,css文件

 

注意同步修改bundleconfig.json

重点来了

 修改某个页面的_EditModal.cshtml，加入select

 <select class="form-control selectpicker" name="Sex">
                    <option value="0">男</option>
                    <option value="1">女</option>
                </select>

结果一直显示空白，更诡异的是偶尔有几次能显示出来。查看html，发现select还在只是被隐藏了

一开始怀疑是不是css文件没加载到，甚至都怀疑到是不是墙的问题。。

后来把select放到index或者create页面又是没问题的。突然想起，Editview是通过js代码动态加载到页面上的，代码如下：

$(document).on('click', '.edit-rentUser', function (e) {
        var rentUserId = $(this).attr('data-rentUser-id');

        abp.ajax({
            url: abp.appPath + 'RentUser/EditModal?id=' + rentUserId,
            type: 'POST',
            dataType: 'html',
            success: function (content) {
                $('#RentUserEditModal div.modal-content').html(content);  //就是这行，动态生成的html代码
            },
            error: function (e) { }
        });
    });

一般而言这种插件原理是把原始html元素隐藏，再生成一个新的div来显示具体内容。很有可能是动态加载的代码，需要手动渲染插件。

在EditModal.js最后找到一行代码，是modal加载完成后光标移到第一个输入框上，在这最后加一行代码渲染下，完美解决

    _$modal.on('shown.bs.modal', function () {
        _$form.find('input[type=text]:first').focus();

        //渲染bootstrap-select
        $('select').selectpicker();
    });