滚动条的显示

1. 使用Panel设置滚动条

<asp:Panel ID="YourPanel" runat="server" Height="100" ScrollBars="Vertical">
            <asp:TextBox ID="YourTextBox" runat="server"></asp:TextBox><br /><br />
            <asp:TextBox ID="YourTextArea" runat="server" TextMode="MultiLine"></asp:TextBox><br /><br />
            <asp:Label ID="YourLabel" runat="server" Text="Example Label"></asp:Label><br /><br />
</asp:Panel>

2. 使用JQuery显示滚动条

HTML Markup

<div>
            Country:<asp:DropDownList ID="ddlCountries" runat="server">
                <asp:ListItem Text="All" Value="" />
                <asp:ListItem Text="USA" Value="USA" />
                <asp:ListItem Text="Brazil" Value="Brazil" />
                <asp:ListItem Text="France" Value="France" />
            </asp:DropDownList>
            <asp:Button ID="btnSubmit" runat="server" Text="Load Coties in Customers" OnClick="btnSubmit_Click" />
            <hr />
            <asp:GridView ID="gvCustomers" runat="server" AutoGenerateColumns="false">
                <Columns>
                    <asp:BoundField DataField="Id" HeaderText="Id" />
                    <asp:BoundField DataField="Name" HeaderText="Name" />
                    <asp:BoundField DataField="City" HeaderText="City" />

                </Columns>
            </asp:GridView>
            <%--    div用来显示加载图片--%>
            <div class="loading" style="align-content: center">
                Loading. Please wait.<br />
                <br />
                <img src="../Images/Loder3.jpg" alt="" />

            </div>
        </div>

The CSS style

<style type="text/css">
        .modal {
            position: fixed;
            top: 0;
            left: 0;
            background-color: black;
            z-index: 99;
            opacity: 0.8;
            filter: alpha(opacity=80);
            -moz-opacity: 0.8;
            min-height: 100%;
             100%;
        }

        .loading {
            font-family: Arial;
            font-size: 10pt;
            border: 5px solid #67CFF5;
             200px;
            height: 100px;
            display: none;
            position: fixed;
            background-color: White;
            z-index: 999;
        }
    </style>

JavaScript design

 <script src="../Scripts/jquery-1.10.2.js"></script>
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
    

    <script type="text/javascript">
        function ShowProgress() {
            setTimeout(function () {
                var modal = $('<div />');
                modal.addClass("modal");
                $('body').append(modal);
                var loading = $(".loading");
                loading.show();
                var top = Math.max($(window).height() / 2 - loading[0].offsetHeight / 2, 0);
                var left = Math.max($(window).width() / 2 - loading[0].offsetWidth / 2, 0);
                loading.css({ top: top, left: left });
            }, 200);
        }
        $('form').live("", function () {
            ShowProgress();
        })
    </script>

The code behind page

 protected void Page_Load(object sender, EventArgs e)
        {
            if (!IsPostBack)
            {
                string script = "$(document).ready(function () { $('[id*=btnSubmit]').click(); });";
                ClientScript.RegisterStartupScript(this.GetType(), "load", script, true);
            }
        }

        protected void btnSubmit_Click(object sender, EventArgs e)
        {
            System.Threading.Thread.Sleep(5000);
            LoadCustomers();
        }
        private void LoadCustomers()
        {
            string strConnString = ConfigurationManager.ConnectionStrings["ConnStr"].ConnectionString;
            string sql = "select * from Customers where City=@Country or @Country = ''";
            SqlCommand cmd = new SqlCommand(sql);
            cmd.Parameters.AddWithValue("@Country", ddlCountries.SelectedItem.Value);
   
            using (SqlConnection con = new SqlConnection(strConnString))
            {
                con.Open();
                using (SqlDataAdapter sda = new SqlDataAdapter())
                {
                    cmd.Connection = con;
                    sda.SelectCommand = cmd;
                    using (DataTable  ds = new DataTable())
                    {
                        sda.Fill(ds);
                        int m = ds.Rows.Count;
                        int n = m;
                        gvCustomers.DataSource = ds;
                        gvCustomers.DataBind();
                    }
                }
            }

        }

资料来源：
http://aspsnippets.com/Articles/Show-progress-bar-on-Button-Click-in-ASPNet.aspx

3. 使用UpdatePanel 和Timer控件显示加载页面的时候的滚动条

The HTML markup

<div>
            <asp:ScriptManager ID="ScriptManager1" runat="server" EnablePartialRendering="true"></asp:ScriptManager>
            <asp:Timer ID="Timer1" runat="server" Enabled="false" Interval="2000" OnTick="Timer1_Tick"></asp:Timer>
            <asp:UpdatePanel ID="UpdatePanel1" runat="server" UpdateMode="Conditional">
                <Triggers>
                    <asp:AsyncPostBackTrigger ControlID="Timer1" EventName="Tick" />
                </Triggers>
                <ContentTemplate>
                    <%-- 使用两个div显示一个滚动条--%>
                    <div style="background-color: Black; height: 10px;  300px">
                        <div id="bar" runat="server" style="height: 10px;  0px; background-color: Fuchsia"></div>
                    </div>
                    <asp:Label ID="Label1" runat="server" Text="0 %"></asp:Label>
                    <br />
                    <br />
                    <asp:HyperLink ID="HyperLink1" runat="server"
                        NavigateUrl="~/DifferentProgressBar/ProgressBar_UPdatePanelTimer.aspx"
                        Visible="False">Reload Page</asp:HyperLink><br />
                </ContentTemplate>
            </asp:UpdatePanel>
            <asp:Button ID="Button1" runat="server" Text="Button" OnClick="Button1_Click" />
        </div>

The code behind page

protected void Timer1_Tick(object sender, EventArgs e)
        {
            int i = Convert.ToInt32(Session["status"]);
            if (i == 100)
            {
                Timer1.Enabled = false;
                HyperLink1.Visible = true;
            }
            Label1.Text = i.ToString() + " %";
            HtmlGenericControl div = this.FindControl("bar") as HtmlGenericControl;
            i = i * 3;
            div.Style["width"] = i.ToString() + "px";

        }

        protected void Button1_Click(object sender, EventArgs e)
        {
            Session.Add("status", 0);
            Thread objThread = new Thread(new System.Threading.ThreadStart(DoTheWork));
            objThread.IsBackground = true;
            objThread.Start();
            Session["Thread"] = objThread;
            Button1.Enabled = false;
            Timer1.Enabled = true;
        }
        protected void DoTheWork()
        {
           for(int i=0;i<100;i++)
           {
               Thread.Sleep(500);
               Session["status"] = i;
           }
           Thread objThread = Session["Thread"] as Thread;
           objThread.Abort();
        }

资料来源：
http://i.cnblogs.com/?postid=4191979&update=1