1.在Web应用开发中经常碰到这样的情况,Dropdownlist绑定的数据太多,用户要选择某一项必须从头找到尾,使用起来很不方便。最近我在工作中就碰到这种情况,公司内某个业务系统需要绑定几百条的厂家信息,用户强烈要求带搜索功能。其实要实现这个功能本身并不难,实现方式也可以有多种,就看哪种方式更优雅了。最简单的方法莫过于在下拉框旁边弄个文本框,再加个按钮啥的,让用户输入选项名称,点击搜索就OK了。但这样的界面也太寒酸了,用户体验不好。最好能有个类似Winform里的Combobox那样的控件,既支持下拉,也可以手动输入。但遗憾的是,asp.net自带的服务器控件没有带这种功能的,HTML控件也没有。咋办呢?其实,Web程序应用了这么多年,肯定有很多开发人员碰到这样的需求,解决方案也不是没有。比如,熟悉MS工具的朋友就知道,ASP.Net AJAX Control Tookit里面就有个ComboBox控件,可以实现下拉框搜索功能。但是,在使用中文的时候有点小麻烦,输入中文搜索时必须频繁切换输入法,用起来挺尴尬的。
其实,还有个比较有名的js界面框架:jQueryEasyUI。这套框架是基于jQuery的,有丰富的界面控件,其中就有个combobox。经过使用发现,它对中文的支持很不错!不过,这些都是HTML控件,想让它跟asp.net服务器控件结合还需要做点工作。直接给出步骤吧:
- 在aspx页面内引入相关的js文件和CSS文件。文件具体路径可能有所不同,但要注意js文件引用的先后顺序。
<script src="../Scripts/jquery-1.4.1.min.js" type="text/javascript"></script> <script src="/Scripts/jquery.easyui.min.js" type="text/javascript"></script> <link href="../Styles/easyui.css" rel="stylesheet" type="text/css" /> <link href="../Styles/icon.css" rel="stylesheet" type="text/css" />
- 为Dropdownlist控件加CSS类easyui-combobox。
<asp:DropDownList ID="ddlManufacturer" runat="server" AutoPostBack="True" OnSelectedIndexChanged="ddlManufacturer_SelectedIndexChanged" class="easyui-combobox" Width="150px" Height="22px"> </asp:DropDownList>
- 加入js脚本,让下拉框拥有搜索功能。
//相当于select的onchange事件 $('#<%= ddlManufacturer.ClientID%>').combobox({ onChange: function (newValue, oldValue) { var count = $("#<%= ddlManufacturer.ClientID%> option").length; var ddlFac = document.getElementById("<%= ddlManufacturer.ClientID%>"); for (var i = 0; i < count; i++) { if (ddlFac.options[i].value == newValue) { __doPostBack('<%= ddlManufacturer.ClientID%>', ''); break; } } } });
这个很重要,有这些脚本才能让下拉框有搜索功能。特别注意javascript代码中的onChange,easyui框架屏蔽了客户端HTML <select>标签的onchange事件,asp.net服务器控件dropdownlist默认的SelectedIndexChanged事件也不会触发了。既然不会触发,当然也不会Postback了。那要与服务器交互怎么办?easyui为我们加了这个:onChange:function(oldValue,newValue)。这个function就是下拉框索引改变时调用的函数。这里又要注意了,由于下拉框支持手动输入文字并自动搜索,只要文字改变就会触发这个事件然后调用那个function,newValue就是改变后的值。这就给回发带来了一点麻烦:我们并不需要文字一改变就回发,而是匹配选项才回发,这就有了代码里的for循环判断。__doPostBack这个函数大家应该不陌生了,asp.net服务器控件向服务器回发用的就是这个函数。这样,就实现了带搜索功能的下拉框。写到这里,大家可能觉得大功告成了。没错,一般情况下,这样就可以使用了。不过,还是有点小问题:当你把这个控件放到UpdatePanel里时,每次一回发,dropdownlist的样式都没了,回到了默认的下拉框状态。这是为什么呢?我觉得是因为UpdatePanel局部刷新,并没有将整个页面重新载入,第三步里js代码就没有执行,所以看不到效果了。解决这个问题有个办法,就是在后台事件处理方法中动态插入javascript代码,将以上javascript代码执行一遍就行啦。
ScriptManager.RegisterClientScriptBlock(this.Page, this.Page.GetType(), "refreshEasyui",
scripts+ " if(window.reRegisterJS != undefined){reRegisterJS();}", true);
scripts就是第三步里的javascript代码。
至此,真的可以告一段落了。大家也可以把它做成用户控件,方便以后重用。有不合理的地方,欢迎 大家和我交流!
2.引用的类库使用log4net日志插件写日志:
首先在项目的web.config文件配置log4net的信息,在“configSections”节点下添加子节点:<section name="log4net" type="log4net.Config.Log4NetConfigurationSectionHandler, log4net" />
然后在ConfigSections节点同级下面添加节点:
<log4net>
<root>
<level value="ALL" />
<appender-ref ref="SysAppender" />
</root>
<logger name="Logger">
<level value="DEBUG" />
</logger>
<appender name="SysAppender" type="log4net.Appender.RollingFileAppender,log4net">
<param name="File" value="Log/" />
<param name="AppendToFile" value="true" />
<param name="RollingStyle" value="Date" />
<param name="DatePattern" value="yyyy-MM-dd".log"" />
<param name="StaticLogFileName" value="false" />
<layout type="log4net.Layout.PatternLayout,log4net">
<param name="ConversionPattern" value="%nException Time:%d [%t] Exception Level:%-5p %nException position:[%thread] %file %method %line %nException Description:%message%nStack Trace :%exception%n" />
</layout>
</appender>
</log4net>
最后在引用的类库的Assemblyinfo文件里添加一行代码:[assembly: log4net.Config.XmlConfigurator()],日志路径权限添加everyone权限(读写权限)