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屋！