MultiCoulumn下拉框 [英] MultiCoulumn dropdown Box
问题描述
我想设计一个Multi Column ComboBox有自动完成功能。我使用Ajax工具包得到了这个解决方案。它运行正常。但我是无法实现自动完成功能。请帮助我。如果还有其他更好的替代方案来满足我的要求,请告诉我。这将是非常有帮助的。
.aspx页
<%@ Page Language =C#EnableEventValidation =falseAutoEventWireup =trueCodeBehind =Default.aspx.cs
Inherits =ThomasClaudiusHuber.MultiColumnDropDown._Default%>
<%@ Register Assembly =AjaxControlToolkitNamespace =AjaxControlToolkitTagPrefix =cc1%>
<!DOCTYPE html PUBLIC - // W3C // DTD XHTML 1.0 Transitional // ENhttp://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd\">
< html xmlns =http://www.w3.org/1999/xhtml>
< head runat =server>
< title>< / title>
< style>
.invisibleColumn
{
display:none;
宽度:0px;
}
body
{
font-family:Arial;
字体大小:12px;
}
< / style>
< / head>
< body>
< form id =form1runat =server>
<% - < asp:ScriptManager ID =ScriptManager1runat =server>
- %>
< asp:ToolkitScriptManager ID =ToolkitScriptManager1runat =server>
< div>
< asp:UpdatePanel ID =UpdatePanel1runat =server>
< contenttemplate>< center>
MulticolumnDropDown演示 < /中心取代;
< center>
< table>
< tr>
< td>
< asp:TextBox ID =txtFriendrunat =serverHeight =25pxWidth =300px/>
< / td>
< / tr>< tr>< td> &NBSP;< / TD>< / TR>< TD>&NBSP;< / TD>< TR>< / TR>
< tr>
< td>
< asp:Panel runat =serverID =FriendDropDownStyle =max-height:150px; overflow:scroll;
display:none; visibility:hidden;>
< asp:GridView ID =FriendGridViewrunat =serverAutoGenerateColumns =falseOnRowDataBound =FriendGridView_RowDataBound
OnSelectedIndexChanged =FriendGridView_SelectedIndexChangedHeight =100px
Width = 300像素>
<% - < rowstyle backcolor =#DDDDDD/> - %>
< columns>
< asp:BoundField DataField =IDHeaderStyle-CssClass =invisibleColumnItemStyle-CssClass =invisibleColumn/>
< asp:BoundField DataField =FirstNameHeaderText =FirstnameHeaderStyle-Height =2px/>
< asp:BoundField DataField =LastNameHeaderText =Lastname/>
< asp:BoundField DataField =BirthdayHeaderText =BirthdayDataFormatString ={0:dd.MM.yyyy}/>
< asp:TemplateField ItemStyle-Width =15px/>
< / columns>
< HeaderStyle BackColor =GreenForeColor =White/>
< alternatingrowstyle backcolor =#EEEEEE/>
< SelectedRowStyle BackColor =#999999/>
< / td>
< / tr>
< / table>< / center>
< cc1:DropDownExtender ID =DropDownExtender1runat =serverDropDownControlID =FriendDropDown
TargetControlID =txtFriend/>
<% - < cc1:AutoCompleteExtender ID =AutoCompleteExtender1runat =serverMinimumPrefixLength =1ServiceMethod =FetchEmailListServicePath =WebService1.asmxTargetControlID =txtFriend> - %GT;
< cc1:AutoCompleteExtender runat =serverID =autoComplete1
TargetControlID =txtFriendServicePath =WebService1.asmx
ServiceMethod =FetchEmailListMinimumPrefixLength = 1
CompletionInterval =100EnableCaching =true
CompletionListCssClass =autocomplete_completionListElement
CompletionListItemCssClass =autocomplete_listItem
CompletionListHighlightedItemCssClass =autocomplete_highlightedListItem
DelimiterCharacters = *BehaviorID =AutoCompleteEx
ShowOnlyCurrentWordInCompletionListItem =true>
<% - < animations>
< onshow>
< sequence>
< opacityaction opacity =0/>
< hideaction visible =true/>
< ScriptAction Script =
//缓存大小并设置初始大小
var behavior = $ find(''AutoCompleteEx'');
if(!behavior。 _height){
var target = behavior.get_completionList();
behavior._height = target.offsetHeight - 2;
target.style.height =''0px'';
}/>
< parallel duration =。4>
< fadein />
< length propertykey =heightstartvalue =0endvaluescript =$ find(''AutoCompleteEx'')._ height/>
< / parallel>
< / sequence>
< / onshow>
< onhide>
< parallel duration =。4>
< fadeout />
< length propertykey =heightstartvaluescript =$ find(''AutoCompleteEx'')._ heightendvalue =0/>
< / parallel>
< / onhide>
< / animations> - %>
< / contenttemplate>
< / div>
< / form>
< / body>
< / html>
.aspx.cs页
使用系统;
使用System.Collections.Generic;
使用System.Web.UI.WebControls;
使用ThomasClaudiusHuber.MultiColumnDropDown.DataAccess;
命名空间ThomasClaudiusHuber.MultiColumnDropDown
{
public partial class _Default:System.Web.UI.Page
{
protected void Page_Load(object sender,EventArgs e)
{
//只需用一些数据填充GridView
PseudoFriendDataAccess da = new PseudoFriendDataAccess();
列表< friend> friendList = da.LoadAllFriends();
FriendGridView.DataSource = friendList;
FriendGridView.DataBind();
}
protected void FriendGridView_RowDataBound(object sender,GridViewRowEventArgs e)
{
if(e.Row.RowType!= DataControlRowType.DataRow)
return ;
//在MouseOver上设置光标并将背景保存在字段中并将其设置为#bbbbbb
e.Row.Attributes [onmouseover] =this.style。光标=手;
+this.originalBackgroundColor = this.style.backgroundColor;
+this.style.backgroundColor =''#bbbbbb'';;
//在MouseOut上将背景颜色设置为
之前的值e.Row.Attributes [onmouseout] =
this.style.backgroundColor = this.originalBackgroundColor ;;
// On Click发送一个SelectEvent,以便调用SelectedIndexChanged-EventHandler
e.Row.Attributes [onclick] =
ClientScript.GetPostBackClientHyperlink(FriendGridView,Select $+ e.Row.RowIndex);
}
protected void FriendGridView_SelectedIndexChanged(object sender,EventArgs e)
{
//仅分配名字
txtFriend.Text = FriendGridView.SelectedRow!=空值 ? Server.HtmlDecode(
FriendGridView.SelectedRow.Cells [1] .Text):;
}
// protected void Textbox_TextChanged(object sender,EventArgs e)
// {
// PseudoFriendDataAccess da1 = new PseudoFriendDataAccess();
// da1.FilterFriends(txtFriend.Text);
//}
}
}
friend.cs [样本类数据访问层]
使用System;
使用System.Collections.Generic;
使用System.Linq;
使用System.Web;
命名空间ThomasClaudiusHuber.MultiColumnDropDown.DataAccess
{
公共类PseudoFriendDataAccess
{
public List< friend> LoadAllFriends()
{
返回新列表< friend>
{
new Friend {BirthDay = new DateTime(1980,10,28),FirstName =Thomas,LastName =Huber,ID = Guid.NewGuid()},
new朋友{FirstName =Angus,LastName =Young,ID = Guid.NewGuid()},
new Friend {FirstName =Mark,LastName =Knopfler,ID = Guid.NewGuid()} ,
new Friend {FirstName =James,LastName =Hetfield,ID = Guid.NewGuid()},
new Friend {FirstName =Dexter,LastName =Holland,ID = Guid.NewGuid()},
new Friend {FirstName =Steve,LastName =Vai,ID = Guid.NewGuid()},
new Friend {FirstName =Jim,LastName = Morrison,ID = Guid.NewGuid()},
new Friend {FirstName =Mat,LastName =Röhr,ID = Guid.NewGuid()},
new Friend {FirstName = Andreas,LastName =Breitkopf,ID = Guid.NewGuid()},
new Friend {FirstName =Stevie,LastName =Wonder,ID = Guid.NewGuid()},
新的Fr. iend {FirstName =Brian,LastName =Johnson,ID = Guid.NewGuid()},
new Friend {FirstName =Brian,LastName =Johnson,ID = Guid.NewGuid()} ,
};
}
}
}
除此之外,请添加引用AjaxToolKit.dll。欢迎任何建议,修改和解决方案。
find(''AutoCompleteEx'');
if(!behavior._height){
var target = behavior.get_completionList();
behavior._height = target.offsetHeight - 2;
target.style.height =''0px'';
}/>
< parallel duration =。4>
< fadein />
< length propertykey =heightstartvalue =0 endvaluescript =
find(''AutoCompleteEx'')._ height/>
< / parallel>
< / sequence>
< / onshow>
< onhide>
< parallel duration =。4>
< fadeout />
< length propertykey =height startvaluescript =
find(''AutoCompleteEx'')._ heightendvalue =0/>
< / parallel>
< /隐藏>
< / animations> - %>
< / contenttemplate>
< / div>
< / form>
< / body>
< / html>
.aspx.cs页
使用系统;
使用System.Collections.Generic;
使用System.Web.UI.WebControls;
使用ThomasClaudiusHuber.MultiColumnDropDown.DataAccess;
命名空间ThomasClaudiusHuber.MultiColumnDropDown
{
public partial class _Default:System.Web.UI.Page
{
protected void Page_Load(object sender,EventArgs e)
{
//只需用一些数据填充GridView
PseudoFriendDataAccess da = new PseudoFriendDataAccess();
列表< friend> friendList = da.LoadAllFriends();
FriendGridView.DataSource = friendList;
FriendGridView.DataBind();
}
protected void FriendGridView_RowDataBound(object sender,GridViewRowEventArgs e)
{
if(e.Row.RowType!= DataControlRowType.DataRow)
return ;
//在MouseOver上设置光标并将背景保存在字段中并将其设置为#bbbbbb
e.Row.Attributes [onmouseover] =this.style。光标=手;
+this.originalBackgroundColor = this.style.backgroundColor;
+this.style.backgroundColor =''#bbbbbb'';;
//在MouseOut上将背景颜色设置为
之前的值e.Row.Attributes [onmouseout] =
this.style.backgroundColor = this.originalBackgroundColor ;;
// On Click发送一个SelectEvent,以便调用SelectedIndexChanged-EventHandler
e.Row.Attributes [onclick] =
ClientScript.GetPostBackClientHyperlink(FriendGridView,Select
Hi,
I want to design a Multi Column ComboBox has Auto Complete feature.I got this solution using Ajax Tool kit.Its working fine.But I am unable to achieve the Auto-Complete feature.Please help me in this.If there are anyother better alternatives to achieve my requirement,please let me know.It would be of great help.
.aspx page
<%@ Page Language="C#" EnableEventValidation="false" AutoEventWireup="true" CodeBehind="Default.aspx.cs" Inherits="ThomasClaudiusHuber.MultiColumnDropDown._Default" %> <%@ Register Assembly="AjaxControlToolkit" Namespace="AjaxControlToolkit" TagPrefix="cc1" %> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head runat="server"> <title></title> <style> .invisibleColumn { display: none; width: 0px; } body { font-family: Arial; font-size: 12px; } </style> </head> <body> <form id="form1" runat="server"> <%--<asp:ScriptManager ID="ScriptManager1" runat="server"> --%> <asp:ToolkitScriptManager ID="ToolkitScriptManager1" runat="server"> <div> <asp:UpdatePanel ID="UpdatePanel1" runat="server"> <contenttemplate><center> MulticolumnDropDown Demo </center>; <center> <table> <tr> <td> <asp:TextBox ID="txtFriend" runat="server" Height="25px" Width="300px"/> </td> </tr><tr><td> </td></tr><td> </td><tr></tr> <tr> <td> <asp:Panel runat="server" ID="FriendDropDown" Style="max-height: 150px; overflow: scroll; display: none; visibility: hidden;"> <asp:GridView ID="FriendGridView" runat="server" AutoGenerateColumns="false" OnRowDataBound="FriendGridView_RowDataBound" OnSelectedIndexChanged="FriendGridView_SelectedIndexChanged" Height="100px" Width="300px"> <%--<rowstyle backcolor="#DDDDDD" />--%> <columns> <asp:BoundField DataField="ID" HeaderStyle-CssClass="invisibleColumn" ItemStyle-CssClass="invisibleColumn" /> <asp:BoundField DataField="FirstName" HeaderText="Firstname" HeaderStyle-Height="2px" /> <asp:BoundField DataField="LastName" HeaderText="Lastname" /> <asp:BoundField DataField="Birthday" HeaderText="Birthday" DataFormatString="{0:dd.MM.yyyy}" /> <asp:TemplateField ItemStyle-Width="15px" /> </columns> <HeaderStyle BackColor="Green" ForeColor="White" /> <alternatingrowstyle backcolor="#EEEEEE" /> <SelectedRowStyle BackColor="#999999" /> </td> </tr> </table></center> <cc1:DropDownExtender ID="DropDownExtender1" runat="server" DropDownControlID="FriendDropDown" TargetControlID="txtFriend" /> <%--<cc1:AutoCompleteExtender ID="AutoCompleteExtender1" runat="server" MinimumPrefixLength="1" ServiceMethod="FetchEmailList" ServicePath="WebService1.asmx" TargetControlID="txtFriend"> --%> <cc1:AutoCompleteExtender runat="server" ID="autoComplete1" TargetControlID="txtFriend" ServicePath="WebService1.asmx" ServiceMethod="FetchEmailList" MinimumPrefixLength="1" CompletionInterval="100" EnableCaching="true" CompletionListCssClass="autocomplete_completionListElement" CompletionListItemCssClass="autocomplete_listItem" CompletionListHighlightedItemCssClass="autocomplete_highlightedListItem" DelimiterCharacters="*" BehaviorID="AutoCompleteEx" ShowOnlyCurrentWordInCompletionListItem="true"> <%--<animations> <onshow> <sequence> <opacityaction opacity="0" /> <hideaction visible="true" /> <ScriptAction Script=" // Cache the size and setup the initial size var behavior = $find(''AutoCompleteEx''); if (!behavior._height) { var target = behavior.get_completionList(); behavior._height = target.offsetHeight - 2; target.style.height = ''0px''; }" /> <parallel duration=".4"> <fadein /> <length propertykey="height" startvalue="0" endvaluescript="$find(''AutoCompleteEx'')._height" /> </parallel> </sequence> </onshow> <onhide> <parallel duration=".4"> <fadeout /> <length propertykey="height" startvaluescript="$find(''AutoCompleteEx'')._height" endvalue="0" /> </parallel> </onhide> </animations>--%> </contenttemplate> </div> </form> </body> </html>
.aspx.cs page
using System; using System.Collections.Generic; using System.Web.UI.WebControls; using ThomasClaudiusHuber.MultiColumnDropDown.DataAccess; namespace ThomasClaudiusHuber.MultiColumnDropDown { public partial class _Default : System.Web.UI.Page { protected void Page_Load(object sender, EventArgs e) { // Just fill up the GridView with some data PseudoFriendDataAccess da = new PseudoFriendDataAccess(); List<friend> friendList = da.LoadAllFriends(); FriendGridView.DataSource = friendList; FriendGridView.DataBind(); } protected void FriendGridView_RowDataBound(object sender, GridViewRowEventArgs e) { if (e.Row.RowType != DataControlRowType.DataRow) return; // On MouseOver set the cursor to hand and save the backcolor in a field and set it to #bbbbbb e.Row.Attributes["onmouseover"] = "this.style.cursor=''hand'';" + "this.originalBackgroundColor=this.style.backgroundColor;" + "this.style.backgroundColor=''#bbbbbb'';"; // On MouseOut set the backcolor to the value it had before e.Row.Attributes["onmouseout"] = "this.style.backgroundColor=this.originalBackgroundColor;"; // On Click send a SelectEvent so that the SelectedIndexChanged-EventHandler gets called e.Row.Attributes["onclick"] = ClientScript.GetPostBackClientHyperlink(FriendGridView,"Select$" + e.Row.RowIndex); } protected void FriendGridView_SelectedIndexChanged(object sender, EventArgs e) { // assign firstname only txtFriend.Text = FriendGridView.SelectedRow != null ? Server.HtmlDecode( FriendGridView.SelectedRow.Cells[1].Text) : ""; } //protected void Textbox_TextChanged(object sender, EventArgs e) //{ // PseudoFriendDataAccess da1 = new PseudoFriendDataAccess(); // da1.FilterFriends(txtFriend.Text); //} } }
friend.cs [sample class dataaccess layer]
using System; using System.Collections.Generic; using System.Linq; using System.Web; namespace ThomasClaudiusHuber.MultiColumnDropDown.DataAccess { public class PseudoFriendDataAccess { public List<friend> LoadAllFriends() { return new List<friend> { new Friend{BirthDay = new DateTime(1980,10,28),FirstName = "Thomas",LastName="Huber",ID=Guid.NewGuid()}, new Friend{FirstName = "Angus",LastName="Young",ID=Guid.NewGuid()}, new Friend{FirstName = "Mark",LastName="Knopfler",ID=Guid.NewGuid()}, new Friend{FirstName = "James",LastName="Hetfield",ID=Guid.NewGuid()}, new Friend{FirstName = "Dexter",LastName="Holland",ID=Guid.NewGuid()}, new Friend{FirstName = "Steve",LastName="Vai",ID=Guid.NewGuid()}, new Friend{FirstName = "Jim",LastName="Morrison",ID=Guid.NewGuid()}, new Friend{FirstName = "Mat",LastName="Röhr",ID=Guid.NewGuid()}, new Friend{FirstName = "Andreas",LastName="Breitkopf",ID=Guid.NewGuid()}, new Friend{FirstName = "Stevie",LastName="Wonder",ID=Guid.NewGuid()}, new Friend{FirstName = "Brian",LastName="Johnson",ID=Guid.NewGuid()}, new Friend{FirstName = "Brian",LastName="Johnson",ID=Guid.NewGuid()}, }; } } }
Apart from this , Please add the reference AjaxToolKit.dll. Any suggestions,modifications,solutions are welcome.
find(''AutoCompleteEx''); if (!behavior._height) { var target = behavior.get_completionList(); behavior._height = target.offsetHeight - 2; target.style.height = ''0px''; }" /> <parallel duration=".4"> <fadein /> <length propertykey="height" startvalue="0" endvaluescript="
find(''AutoCompleteEx'')._height" /> </parallel> </sequence> </onshow> <onhide> <parallel duration=".4"> <fadeout /> <length propertykey="height" startvaluescript="
find(''AutoCompleteEx'')._height" endvalue="0" /> </parallel> </onhide> </animations>--%> </contenttemplate> </div> </form> </body> </html>
.aspx.cs page
using System; using System.Collections.Generic; using System.Web.UI.WebControls; using ThomasClaudiusHuber.MultiColumnDropDown.DataAccess; namespace ThomasClaudiusHuber.MultiColumnDropDown { public partial class _Default : System.Web.UI.Page { protected void Page_Load(object sender, EventArgs e) { // Just fill up the GridView with some data PseudoFriendDataAccess da = new PseudoFriendDataAccess(); List<friend> friendList = da.LoadAllFriends(); FriendGridView.DataSource = friendList; FriendGridView.DataBind(); } protected void FriendGridView_RowDataBound(object sender, GridViewRowEventArgs e) { if (e.Row.RowType != DataControlRowType.DataRow) return; // On MouseOver set the cursor to hand and save the backcolor in a field and set it to #bbbbbb e.Row.Attributes["onmouseover"] = "this.style.cursor=''hand'';" + "this.originalBackgroundColor=this.style.backgroundColor;" + "this.style.backgroundColor=''#bbbbbb'';"; // On MouseOut set the backcolor to the value it had before e.Row.Attributes["onmouseout"] = "this.style.backgroundColor=this.originalBackgroundColor;"; // On Click send a SelectEvent so that the SelectedIndexChanged-EventHandler gets called e.Row.Attributes["onclick"] = ClientScript.GetPostBackClientHyperlink(FriendGridView,"Select
这篇关于MultiCoulumn下拉框的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!