利用隐藏按钮和ajax控件实现aspxGridviewajax效果

最新推荐文章于 2021-08-06 23:49:28 发布
最新推荐文章于 2021-08-06 23:49:28 发布
阅读量581 收藏
点赞数
文章标签： ajax button textbox server asp triggers
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/rongdong1988/article/details/6042078
版权

利用隐藏按钮和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效果一样？

荣氏天下
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
ajax中如何隐藏列,ajax后隐藏一个按钮
weixin_29384119的博客
08-05 212
我有一个问题让我的Ajax帖子禁用我必须提交数据的按钮。下面是我的代码，我环顾四周，一切都看起来很合适，但它不禁用按钮，我试图使用$("#refreshButton").attr("disabled", true);和$("#refreshButton").removeAttr("disabled");，但它也没有工作。ajax后隐藏一个按钮$(document).ready(function()...
ajax隐藏button,Wicket - 在延迟加载期间隐藏AjaxButton上的元素
weixin_42494902的博客
08-06 224
我有一个AjaxLazyLoadPanel页面，它包含一个长加载列表并提交AjaxButton。在AjaxLazyLoadPanel准备就绪后，当我提交时，另一个长时间加载正在执行，之后我需要刷新整个页面。这是我自己的地方，代码如下：AjaxButton button1 = new AjaxButton("submit1") {@Overrideprotected void onSubmit(Aj...
【ASPxGridView】 隐藏“新建”按钮 - hide new button
weixin_34111819的博客
03-11 204
注意事项 ASPxGridView 的“新建”按钮是无法禁用的，只能隐藏。 实现方法 1. 激活 ASPxGridView 的“新建”按钮 2. 添加绑定事件 DataBound 处理代码 代码 ASPxGridViewgrid=senderasASPxGridView;if(0==grid.VisibleRowCount){for(i...
ajax隐藏button,jquery下的ajax应用-form和button触发
weixin_39648430的博客
08-06 342
使用jquery的ajax，一种是form提交，一种是button直接提交。1. 引用2.js脚本ajax-form.jsjQuery(function($) {$('form[data-async]').on('submit', function(event) {var $form = $(this);var $target = $($form.attr('data-target'));$.aj...
C#中Winform 实现Ajax效果自定义按钮
08-28
在 WinForm 中实现 Ajax 效果需要使用 GraphicsPath 和自定义控件。GraphicsPath 是一个图形路径对象，可以用来绘制圆角矩形、椭圆、曲线等图形。在这里，我们使用 GraphicsPath 来绘制一个圆角矩形，作为按钮的背景...
AJAX控件实现相册效果（源码）
02-02
AJAX控件实现相册效果（源码），是我实现把图片绝对路径放入数据库，页面用REPEATER控件显示图片后的有一新发现，对我来说，就像发现了新大陆一样，兴奋，我一个人享受，不过瘾，传到CSDN上，让追求图片效果的朋友，...
AJAX控件实现的编辑器
10-26
AJAX（Asynchronous JavaScript and XML）技术是一种在无需重新加载整个网页的情况下，...开发者需要掌握AJAX的基本原理和实践技巧，以及前端框架和库的应用，才能成功创建出这样一个功能强大且视觉效果出色的编辑器。
Jquery+ajax请求data显示在GridView上(asp.net)
wilsonke的专栏
12-04 1785
AJAXLoadProgressForm.aspx： function ShowProgressDiv() { var ID = $("input#idtxt").val(); $.ajax({ type: "GET", url: "GetGridViewByConditionForm.aspx", data: "id=" + ID, beforeSend: functio
实现ASPxGridView基于AJAX和自定义数据源的分页查询
houshen的专栏
08-18 1688
为了实现这个功能，可算是折腾了好久，因为我本人一直在用XpoDataSource绑定，不怎么关注自定义分页数据源的。 首先要明确一点的是，自定义数据源（指绑定到自己写的数据访问层，至于ObjectDataSource可不可以，目前我还没验证过）不支持自动汇总、分组、自动筛选（包
ajax控制div窗口显示和隐藏
12-11
ajax控制div窗口显示和隐藏
Java ajax 上传文件(隐藏上传按钮方式)
Alai_programmer的博客
04-25 1246
记录以后可能会用到。 首先前端代码： &lt;div class="uploadbox"&gt; &lt;input type="file" id="file" style="display:none" onChange="up()"&gt;
Ajax显示隐藏
weixin_33725126的博客
03-01 764
$(function(){ $('#search').click(function(){ if($(".search_div").is(":visible")) $(".search_div").hide(); else $(".search_div").show(); }); ...
ASPxGridView用法汇总二
ASp.NET学习网(www.17aspx.com)
09-29 579
http:/www.17aspx.com/html/aspnet/controls/2010/1030/3076.html  实现ASPxGridView基于AJAX和自定义数据源的分页查询 http:/www.17aspx.com/html/aspnet/controls/2
ajax实现点击按钮从后台获取数据 以表格显示内容
weixin_42235965的博客
07-05 8138
&lt;!DOCTYPE html&gt;&lt;html&gt;&lt;head&gt;&lt;meta charset="utf-8"&gt;&lt;script&gt;function loadXMLDoc(url){var xmlhttp;var txt,x,xx,i;if (window.XMLHttpRequest)  {// code for IE7+, Firefox, Chrom...
ASP.NET 通过jquery+ajax为gridview绑定数据源
qq_40890601的博客
06-08 691
问题： ajax请求的数据在gridview上显示不出来 我被这个问题困扰了好几天,为啥呢?因为gridview它和table不一样,解析出来的html没有thead,手动为其添加thead之后,还要把tbody删掉,完了就是bootstrap-table的data死活显示不出来,我就卡在这里了,得到的是json对象,可显示却永远都是几条横线,我的内心在崩溃边缘，后来才知道ajax获取到数据之后还必须转换为json对象． 解决 很简单啊,我的天,昨晚我尝试了n种方法,熬夜到两点,我的心态崩了. 因为要控制
asp.net中如何给按钮添加事件
xzr2004(只有偏执狂才能生存)的专栏
02-27 6237
 ButtonType obj = (ButtonType) e.Row.Cells[commandFieldIndex].Controls[controlIndex];ButtonType是被CommandField使用的一种按钮类型，可以是Button，LinkButton，或者ImageButton。默认情况下，CommandField使用LinkButton，但也可以通过Command
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值