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%;
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>
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
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 [email protected] 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 }
资料来源：
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>
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
时间： 2024-10-03 17:58:07