【asp.net小札記】實現進度條

前臺代碼:
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default" %>

<%@ Register src="ProgressBar.ascx" tagname="ProgressBar" tagprefix="uc1" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
    <script type="text/javascript">
        count = 0;
        function set(val) {
            var pb = document.getElementById('progressBar');
            var num = document.getElementById('num');
            pb.style.width = val + '%';
            num.innerHTML = val + '%';
        }       
    </script>
</head>
<body>
    <form id="form1" runat="server">
      <asp:ScriptManager ID="ScriptManager1" runat="server"></asp:ScriptManager>
      <asp:UpdatePanel ID="UpdatePanel1" runat="server">
        <ContentTemplate>
          <div>
            <table>
                <tr>
                  <td>
                     <div style="height:20px;width:100px;border:1px solid red;">
                        <div id="progressBar" style="height:20px;width:0%;background-color:Blue;float:left;"></div>              
                     </div>
                  </td>
                  <td>
                     <div id="num">0%</div>
                  </td>
                </tr>
            </table>
            <div>
              <asp:Button ID="Button1" runat="server" Text="Button" οnclick="Button1_Click" />
            </div>
          </div>
        </ContentTemplate>
        <Triggers>
          <asp:AsyncPostBackTrigger ControlID="Button1" />
        </Triggers>
      </asp:UpdatePanel>

      <!--Timer-->
      <asp:UpdatePanel ID="UpdatePanel2" runat="server">
        <ContentTemplate>
          <asp:Timer ID="timer1" runat="server" ontick="timer1_Tick" Interval="100">
          </asp:Timer>
        </ContentTemplate>
      </asp:UpdatePanel>
    </form>
</body>
</html>

後臺代碼:

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;

public partial class _Default : System.Web.UI.Page
{    
    protected void Page_Load(object sender, EventArgs e)
    {       
    }
    protected void Button1_Click(object sender, EventArgs e) {
        System.Threading.Thread  thread = new System.Threading.Thread(new System.Threading.ThreadStart(UpdateProgressBar));
        thread.Start();
        timer1.Enabled = true;       
    }
    private void UpdateProgressBar() {
        Session["progressbar"] = 0;
        for (int i = 1; i <= 100; i++) {
            System.Threading.Thread.Sleep(100);
            Session["progressbar"] = i;
        }
    }
    protected void timer1_Tick(object sender, EventArgs e) {        
        ScriptManager.RegisterStartupScript(this,this.GetType(),"key"+Session["progressbar"],"set("+Session["progressbar"]+")",true);
        if (Session["progressbar"].ToString() == "100") {
            timer1.Enabled = false;            
        }
    }
}


發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章