Asp.Net MVC 扩展联想控件
2013-02-06 10:54
232 查看
在web中,为改善用户体验,我们常会将一些文本输入框做成智能联想,以让用户更快更准确的输入内容。大概是这样的:当用户开始在文本框输入时,客户端脚本ajax向服务端发起请求,服务端从数据库读取返回数据,客户端解析数据附加在文本框的下拉div中供用户选择参考。
在MVC中我们可以通过扩展HtmlHelper来封装自己写的控件,以便在整个项目中像使用 Html.TextBox("") 一样来使用自定义控件。
扩展代码如下
View Code
结果演示一:简单单列
结果演示二:带表头单列
结果演示三:带表头双列
结果演示四:带表头双列+回调函数(选择一值时将key值赋给指定的Hidden中)
初写博客,还请大牛们多多指教
在MVC中我们可以通过扩展HtmlHelper来封装自己写的控件,以便在整个项目中像使用 Html.TextBox("") 一样来使用自定义控件。
扩展代码如下
View Code
<div> <% IDictionary<string, object> htmlAttributes = new Dictionary<string, object>(); htmlAttributes.Add("style", "width:198px"); %> 简单单列 <%=Html.SuggestBox("MySuggestBox01", "", "SuggestBox", "Suggest","name","", htmlAttributes)%> <br /><br /><br /><br /> 带表头单列 <%=Html.SuggestBox("MySuggestBox02", "", "SuggestBox", "Suggest","关键字","name","name","", htmlAttributes)%> <br /><br /><br /><br /> 带表头双列 <%=Html.SuggestBox("MySuggestBox03", "", "SuggestBox", "Suggest","编号;关键字","id;name","name","", htmlAttributes)%> <br /><br /><br /><br /> 带表头双列+回调函数 <%=Html.SuggestBox("MySuggestBox04", "", "SuggestBox", "Suggest", "编号;关键字", "id;name", "name", "id", "MySuggestBox04_ID", "0", "afterSelect()", htmlAttributes)%> <span id="tip"></span> <script type="text/javascript"> var id = document.getElementById("MySuggestBox04_ID").value; document.getElementById("tip").innerHTML = "当前选择的编号是: <font color='red'>" + id + "</font>"; function afterSelect() { var id = document.getElementById("MySuggestBox04_ID").value; document.getElementById("tip").innerHTML = "当前选择的编号是: <font color='red'>"+id+"</font>"; } </script> </div>
结果演示一:简单单列
结果演示二:带表头单列
结果演示三:带表头双列
结果演示四:带表头双列+回调函数(选择一值时将key值赋给指定的Hidden中)
初写博客,还请大牛们多多指教
相关文章推荐
- [转]Asp.Net MVC 扩展联想控件
- asp.net mvc 分页控件:HtmlHelper扩展
- [ASP.NET MVC]通过对HtmlHelper扩展简化“列表控件”的绑定
- ASP.NET MVC显示UserControl控件(扩展篇)
- ASP.NET MVC显示UserControl控件(扩展篇)
- ASP.NET MVC 扩展服务器控件使用方式
- 新版asp.net mvc 分页控件:HtmlHelper扩展
- [ASP.NET MVC]通过对HtmlHelper扩展简化“列表控件”的绑定
- asp.net MVC添加HtmlHelper扩展示例和用法
- ASP.NET MVC控件辅助工具(Helper)
- ASP.NET MVC分页控件
- Asp.net MVC的Model Binder工作流程以及扩展方法(2) - Binder Attribute
- ASP.NET MVC 扩展之 JsonpResult ,用来提供轻量级跨域调用服务
- 扩展ASP.NET MEMBERSHIP权限功能(三 )之权限控件
- ASP.NET MVC扩展库
- asp.net mvc Htmlhelper简单扩展
- Asp.Net MVC以 JSON传值扩展方法
- asp.net mvc DropDownList控件 数据库中取值Select的选项注意事项
- ASP.NET MVC中你必须知道的13个扩展点
- 扩展ASP.NET MVC三层框架并使用StructureMap实现依赖注入1-Model层的实现