滚动条的显示

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>

View Code

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%;

            width: 100%;

        }



        .loading {

            font-family: Arial;

            font-size: 10pt;

            border: 5px solid #67CFF5;

            width: 200px;

            height: 100px;

            display: none;

            position: fixed;

            background-color: White;

            z-index: 999;

        }

    </style>

View Code

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>

View Code

The code behind page

 1  protected void Page_Load(object sender, EventArgs e)

 2         {

 3             if (!IsPostBack)

 4             {

 5                 string script = "$(document).ready(function () { $('[id*=btnSubmit]').click(); });";

 6                 ClientScript.RegisterStartupScript(this.GetType(), "load", script, true);

 7             }

 8         }

 9 

10         protected void btnSubmit_Click(object sender, EventArgs e)

11         {

12             System.Threading.Thread.Sleep(5000);

13             LoadCustomers();

14         }

15         private void LoadCustomers()

16         {

17             string strConnString = ConfigurationManager.ConnectionStrings["ConnStr"].ConnectionString;

18             string sql = "select * from Customers where City=@Country or @Country = ''";

19             SqlCommand cmd = new SqlCommand(sql);

20             cmd.Parameters.AddWithValue("@Country", ddlCountries.SelectedItem.Value);

21    

22             using (SqlConnection con = new SqlConnection(strConnString))

23             {

24                 con.Open();

25                 using (SqlDataAdapter sda = new SqlDataAdapter())

26                 {

27                     cmd.Connection = con;

28                     sda.SelectCommand = cmd;

29                     using (DataTable  ds = new DataTable())

30                     {

31                         sda.Fill(ds);

32                         int m = ds.Rows.Count;

33                         int n = m;

34                         gvCustomers.DataSource = ds;

35                         gvCustomers.DataBind();

36                     }

37                 }

38             }

39 

40         }

View Code

资料来源：
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; width: 300px">

                        <div id="bar" runat="server" style="height: 10px; width: 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>

View Code

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();

        }

View Code

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