滚动条的显示

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

 

posted @ 2014-12-29 16:37  songxia777  阅读(216)  评论(0编辑  收藏  举报