UpdateProgress和UpdatePanel数据查询时的进度的实现

先看看运行后的结果：

1.

2.

3.

所用到的控件：

1 ScriptManager,UpdateProgress,UpdatePanel

前台代码：

 

<%@ Control Language="C#" AutoEventWireup="true" CodeBehind="User_Adm.ascx.cs" Inherits="UI.USER_ADM.User_Adm" %>
 <link href="../css/index.css"     rel="stylesheet" type="text/css" />
  <link href="../css/QCS.css"     rel="stylesheet" type="text/css" />

    <asp:ScriptManager ID="ScriptManager1" runat="server">
</asp:ScriptManager>
<br />
<asp:UpdatePanel ID="UpdatePanel1" runat="server">
<ContentTemplate>
    <table ID="table1"
        style="border-width: thin; border-style: groove; width:100%;" width="100%"
        align="center" frame="box">
        <tr>
            <td class="style1">
                <asp:Label ID="label" runat="server" Text="用户帐号："></asp:Label>
            </td>
            <td class="style2">
                <asp:TextBox ID="user_name" runat="server" Width="78px"></asp:TextBox>
            </td>
            <td class="style3">
                <asp:Label ID="Label2" runat="server" Text="电话号码："></asp:Label>
            </td>
            <td class="style4">
                <asp:TextBox ID="tel" runat="server" Width="78px"></asp:TextBox>
            </td>
            <td class="style5">
                <asp:Label ID="Label3" runat="server" Text="真实姓名："></asp:Label>
            </td>
            <td class="style8">
                <asp:TextBox ID="real_name" runat="server" Width="78px"></asp:TextBox>
            </td>
            <td class="style9">
                &nbsp;</td>
        </tr>
        <tr>
            <td class="style1">
                <asp:Label ID="Label4" runat="server" Text="电子邮件："></asp:Label>
            </td>
            <td class="style2">
                <asp:TextBox ID="mail" runat="server" Width="78px"></asp:TextBox>
            </td>
            <td class="style3">
                <asp:Label ID="Label5" runat="server" Text="角色名称： "></asp:Label>
            </td>
            <td class="style4">
                <asp:DropDownList ID="role" runat="server" DataSourceID="SqlDataSource1"
                    DataTextField="role_name" DataValueField="role_id" Width="78px"
                    ondatabound="role_DataBound">
                </asp:DropDownList>
            </td>
            <td class="style5">
                <asp:Label ID="Label6" runat="server" Text="用户性别："></asp:Label>
            </td>
            <td class="style8">
                <asp:DropDownList ID="sex" runat="server" Width="78px"
                    ondatabound="sex_DataBound">
                    <asp:ListItem>请选择</asp:ListItem>
                    <asp:ListItem>男</asp:ListItem>
                    <asp:ListItem>女</asp:ListItem>
                </asp:DropDownList>
            </td>
            <td class="style9">
                <asp:ImageButton ID="ImageButton1" runat="server"
                    ImageUrl="~/image/btn_search.gif" onclick="ImageButton1_Click" />
            </td>
        </tr>
    </table>
    &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
    <br />
    <asp:GridView ID="GridView1" runat="server" Width="100%" BackColor="#F7F6F3"
        HorizontalAlign="Center">
        <AlternatingRowStyle HorizontalAlign="Center" />
        <EditRowStyle HorizontalAlign="Center" />
        <FooterStyle HorizontalAlign="Center" VerticalAlign="Middle" />
        <HeaderStyle HorizontalAlign="Center" VerticalAlign="Middle" />
        <RowStyle HorizontalAlign="Center" />
        <SelectedRowStyle HorizontalAlign="Center" />
    </asp:GridView>
    <asp:SqlDataSource ID="SqlDataSource1" runat="server"
        ConnectionString="<%$ ConnectionStrings:ConnctionString %>"
        SelectCommand="SELECT [role_id], [role_name] FROM [tb_role]">
    </asp:SqlDataSource>
    <br />
    <br />
    <br />
    <br />
<br />
<br />
<asp:UpdateProgress ID="UpdateProgress1" runat="server">
<ProgressTemplate>
<div class="page_loading">
<br />
<table>
<tr>
<td>
<img src="../image/loading.gif" style="filter: alpha(Opacity=60); opacity: 0.6;" />
</td>
<td>
正在加载...
</td>
</tr>
</table>
<br />
</div>
</ProgressTemplate>
</asp:UpdateProgress>
</ContentTemplate>
</asp:UpdatePanel>

2.后台代码：

 

public partial class User_Adm : System.Web.UI.UserControl
   {
       private QCS.BLL.tb_userinfo userinfo = new QCS.BLL.tb_userinfo();
       protected void Page_Load(object sender, EventArgs e)
       {

       }
       void Generate_Sql()
       {
           sb.Append("select user_id 用户编号,user_name 用户名,real_name 真实姓名,role_id 角色编号,work_grop_id 工作组编号,phone 联系方式,sex 性别,email 电子邮件,default1 缺省1,default2 缺省2 from tb_userinfo where 1=1");
           if(user_name.Text!="")
           {
               sb.Append(" and user_name='"+user_name.Text.ToString()+"'");
           }
           if(tel.Text!="")
           {
               sb.Append(" and phone='"+tel.Text.ToString()+"'");
           }
           if(real_name.Text!="")
           {
               sb.Append("  and real_name='"+real_name.Text.ToString()+"'");
           }
           if(mail.Text!="")
           {
               sb.Append("  and email='"+mail.Text.ToString()+"'");
           }
           if (role.SelectedValue=="-1")
           {
               ;
           }
           else
           {
               sb.Append(" and  role_id ='"+Convert.ToInt32(role.SelectedValue)+"'");
           }
           if (sex.SelectedValue=="请选择")
           {
               ;
           }
           else
           {
               sb.Append(" and  sex ='"+sex.SelectedValue+"'");
           }

       }
       private StringBuilder sb=new StringBuilder();

       protected void ImageButton1_Click( object sender, ImageClickEventArgs e )
       {
           System.Threading.Thread.Sleep(1200);
           Generate_Sql();  //生成sql代码
           DataSet ds=new DataSet();
           ds=userinfo.Get_Query_Table(sb.ToString());
           GridView1.DataSource=ds.Tables[0].DefaultView;
           GridView1.DataBind();
       }

       protected void role_DataBound( object sender, EventArgs e )
       {
           ListItem item=new ListItem("请选择", "-1");
           role.Items.Insert(0,item);
       }

       protected void sex_DataBound( object sender, EventArgs e )
       {
           ListItem item=new ListItem("请选择", "-1");
           sex.Items.Insert(0, item);
       }

   }

以上运行就可以刚才的结果，谢谢参考！