[转]Asp.Net MVC 扩展联想控件

本文转自：/article/5417253.html

在web中，为改善用户体验，我们常会将一些文本输入框做成智能联想，以让用户更快更准确的输入内容。大概是这样的：当用户开始在文本框输入时，客户端脚本ajax向服务端发起请求，服务端从数据库读取返回数据，客户端解析数据附加在文本框的下拉div中供用户选择参考。

在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中）