利用隐藏按钮和ajax控件实现aspxGridviewajax效果
这个示例是实现查询用户时输入查询条件下面的aspxGridview控件自动显示相匹配的结果,效果与ajax效果相同:
如何实现呢?
第一步,首先在页面创建基本的控件,代码如下:
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="CustomerQuery.aspx.cs" Inherits="CustomerQuery" %>
<%@ Register Assembly="DevExpress.Web.ASPxGridView.v10.1, Version=10.1.7.0, Culture=neutral, PublicKeyToken=b88d1754d700e49a"
Namespace="DevExpress.Web.ASPxGridView" TagPrefix="dx" %>
<%@ Register assembly="DevExpress.Web.ASPxEditors.v10.1, Version=10.1.7.0, Culture=neutral, PublicKeyToken=b88d1754d700e49a" namespace="DevExpress.Web.ASPxEditors" tagprefix="dx" %>
<!--注Á¡é册¨¢使º1用®?的Ì?第̨²三¨y方¤?组Á¨¦件t-->
<!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>
<script type="text/javascript">
function cha() {
document.getElementById("Button3").click();
}
</script>
</head>
<body>
<form id="form1" runat="server">
<div>
<table width="100%">
<tr>
<td>
<asp:DropDownList ID="DropDownList1" runat="server" Width="165px">
<asp:ListItem>拼¡ä音°?字Á?母?</asp:ListItem>
<asp:ListItem>公?司?名?称?</asp:ListItem>
<asp:ListItem>简¨°称?</asp:ListItem>
<asp:ListItem>电Ì?话¡ã号?码?</asp:ListItem>
</asp:DropDownList>
</td>
<td>
<input id="TextBox1" type="text" runat="server" onkeyup="cha();" />
</td>
<td>
<div style="display:none">
<asp:Button ID="Button3" runat="server" onclick="Button3_Click" Text="查¨¦询¡¥" />
</div>
<input id="Button1" type="button" value="选择" onclick="btn_Click();" />
</td>
</tr>
</table>
</div>
<div>
<asp:ScriptManager ID="ScriptManager1" runat="server"></asp:ScriptManager>
<asp:UpdatePanel ID="UpdatePanel1" runat="server">
<ContentTemplate>
<dx:ASPxGridView ID="grid" runat="server" AutoGenerateColumns="False" ClientInstanceName="grid" KeyFieldName="customerID" Width="100%">
<Columns>
<dx:GridViewCommandColumn ShowSelectCheckbox="True" Caption="选?择?" VisibleIndex="0"></dx:GridViewCommandColumn>
<dx:GridViewDataColumn Caption="拼¡ä音°?码?" FieldName="easycode">
</dx:GridViewDataColumn>
<dx:GridViewDataColumn Caption="客¨ª户¡ì名?" FieldName="customerName">
</dx:GridViewDataColumn>
<dx:GridViewDataColumn Caption="简¨°称?" FieldName="shortName">
</dx:GridViewDataColumn>
<dx:GridViewDataColumn Caption="配?送¨ª区?域®¨°" FieldName="area">
</dx:GridViewDataColumn>
<dx:GridViewDataColumn Caption="联¢a系¦Ì人¨?" FieldName="contact">
</dx:GridViewDataColumn>
<dx:GridViewDataColumn Caption="电Ì?话¡ã" FieldName="tel">
</dx:GridViewDataColumn>
<dx:GridViewDataColumn FieldName="customerTypeID" Visible="false">
</dx:GridViewDataColumn>
<dx:GridViewDataColumn FieldName="settleTypeID" Visible="false">
</dx:GridViewDataColumn>
<dx:GridViewDataColumn FieldName="settleDays" Visible="false">
</dx:GridViewDataColumn>
<dx:GridViewDataColumn FieldName="addr" Visible="false">
</dx:GridViewDataColumn>
<dx:GridViewDataColumn FieldName="mobileNo" Visible="false">
</dx:GridViewDataColumn>
<dx:GridViewDataColumn FieldName="InvoiceAddr" Visible="false">
</dx:GridViewDataColumn>
<dx:GridViewDataColumn FieldName="bankNo" Visible="false">
</dx:GridViewDataColumn>
<dx:GridViewDataColumn FieldName="dutyNo" Visible="false">
</dx:GridViewDataColumn>
<dx:GridViewDataColumn FieldName="isSupplier" Visible="false">
</dx:GridViewDataColumn>
<dx:GridViewDataColumn FieldName="inUsed" Visible="false">
</dx:GridViewDataColumn>
<dx:GridViewDataColumn FieldName="customerID" Visible="false">
</dx:GridViewDataColumn>
<dx:GridViewDataColumn FieldName="invoiceTypeID" Visible="false">
</dx:GridViewDataColumn>
</Columns>
<SettingsPager Mode="ShowAllRecords">
</SettingsPager>
<ClientSideEvents SelectionChanged="grid_SelectionChanged" />
</dx:ASPxGridView>
</ContentTemplate>
<Triggers>
<asp:AsyncPostBackTrigger ControlID="Button3" EventName="Click" />
</Triggers>
</asp:UpdatePanel>
</div>
</form>
</body>
</html>
第二步,在aspxGridview控件放到一个updatePanel中,代码上面已给出;
第三步,在页面上放一个div,设置display属性为none,即隐藏它,然后在这个div中放一个按钮;
第四步,第按钮事件中,查找数据,代码如下:
//判D断?文?本À?框¨°的Ì?值¦Ì是º?否¤?为a空?,ê?为a空?则¨°将?gridview的Ì?数ºy据Y绑㨮定¡§为a空?
if (TextBox1.Value=="")
{
grid.DataSource ="";
grid.DataBind();
}
else
{
//调Ì¡Â用®?类¤¨¤中D方¤?法¤¡§获?得Ì?查¨¦询¡¥数ºy据Y的Ì?字Á?符¤?串ä?
string str = bottledisp.SerachCustomer(DropDownList1.SelectedItem.Text, TextBox1.Value);
//根¨´据Y生¦¨²成¨¦的Ì?sql字Á?符¤?串ä?调Ì¡Â用®?类¤¨¤中D方¤?法¤¡§执¡ä行D存ä?储ä¡é过程返回结果集绑ã定到Ìgridview
grid.DataSource = bottledisp.CustomerQuery(str);
grid.DataBind();
}
我的生成sql查询语句和查询数据库的操作都放在类中,代码在此就不给出了,各人数据库不同。
第五步,在文本框的onkeyup事件中加入一个js函数,在文本框中输入数据时触发,代码如下:
<input id="TextBox1" type="text" runat="server" onkeyup="cha();" />
Js的代码如下:
<script type="text/javascript">
function cha() {
document.getElementById("Button3").click();
}
</script>
这个js很简单就是调用放在隐藏div中的按钮的click事件进行查询数据库操作
好了,大功告成,试试结果吧,是不是和ajax效果一样?