利用隐藏按钮和ajax控件实现aspxGridviewajax效果
2010-11-29 10:08
246 查看
利用隐藏按钮和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效果一样？
这个示例是实现查询用户时输入查询条件下面的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效果一样？
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 
相关文章推荐
- VC下利用Picture控件实现png图片按钮（鼠标初始、按下、松开、获得焦点四种状态）
- VC下利用Picture控件实现png图片按钮（鼠标初始、按下、松开、获得焦点四种状态）
- VC下利用Picture控件实现png图片按钮（鼠标初始、按下、松开、获得焦点四种状态）
- android webview 实现放大缩小,隐藏按钮控件
- Extjs 利用panel html属性加入DIV实现如TextArea的效果，并且能正确使用html标签，实现如向textarea文本域嵌入按钮button或其他控件,，而且兼容firefox
- VC下利用Picture控件实现png图片按钮（鼠标初始、按下、松开、获得焦点四种状态）
- VC下利用Picture控件实现png图片按钮（鼠标初始、按下、松开、获得焦点四种状态）
- Android 点击按钮实现控件显示隐藏
- ArcgisServer9.3 中矩形选择查询的实现（利用Ext控件的AJAX技术）
- 点击修改按钮，将数据显示在弹层窗口中，利用ajax实现
- 利用ajax实现多个按钮提交给不同action
- React中通过diaplay实现控件按钮的呈现与隐藏
- 利用Ajax控件实现无刷新
- asp.net mvc利用 ajax实现输入自动完成
- Django 利用 API 实现 AJAX 操作
- .NET在WebForm里实现类似WinForm里面TrackBar控件的效果(AJAX Control Toolkit的使用)
- 隐藏NavigationBar上返回按钮的实现方法
- unity3d学习笔记（十八）--利用C#的代理和事件结合NGUI的按钮实现施放
- Java中实现DataTable工具类，并利用其实现简单分页控件。
- 艾伟_转载：利用jQuery实现的Ajax 验证用户名是否存在