广

ASP.NET

  • IOS开发
  • android开发
  • PHP编程
  • JavaScript
  • ASP.NET
  • ASP编程
  • JSP编程
  • Java编程
  • 易语言
  • Ruby编程
  • Perl编程
  • AJAX
  • 正则表达式
  • C语言
  • 编程开发

    利用Asp.Net回调机制实现进度条

    2018-05-16 07:54:50 次阅读 稿源:互联网
    广告
    其效果如下:
    进度条效果图
    首先,在HTML文档中加入如下代码:
    <div>
    <table class="statusTable">
    <tr>
    <td id="progress1">
    </td>
    <td id="progress2">
    </td>
    <td id="progress3">
    </td>
    <td id="progress4">
    </td>
    <td id="progress5">
    </td>
    <td id="progress6">
    </td>
    <td id="progress7">
    </td>
    <td id="progress8">
    </td>
    <td id="progress9">
    </td>
    <td id="progress10">
    </td>
    </tr>
    </table>
    <asp:Label ID="Label1" runat="server" ForeColor="Red" Text="0"></asp:Label>
    </div>
    <div>
    <input id="btnRequest" type="button" value="请求" onclick="Request()" />
    <input id="btnStop" type="button" value="停止" disabled="disabled" onclick="Stop()" />
    </div>
    Js部分加入如下Js代码:
    <script language="javascript" type="text/javascript">
    var idx = 0;
    var progressTimer;
    var progressInterval = 1000;
    function Request()
    {
    document.getElementById("btnStop").disabled = "";
    document.getElementById("btnRequest").disabled = "disabled";
    if(idx >= 10)
    {
    Clear();
    return;
    }
    var arg = idx;
    <%= ClientScript.GetCallbackEventReference(this, "arg", "GetMsgBack",null) %>;
    idx++;
    progressTimer = setTimeout('Request()',progressInterval);
    }
    function GetMsgBack(result)
    {
    document.getElementById('progress'+idx).style.backgroundColor = 'blue';
    var status = Number(result) * 10;
    document.getElementById("Label1").innerHTML = status + "%";
    }
    function Stop()
    {
    clearTimeout(progressTimer);
    Clear();
    }
    function Clear()
    {
    idx = 0;
    document.getElementById("btnStop").disabled = "disabled";
    document.getElementById("btnRequest").disabled = "";
    document.getElementById("Label1").innerHTML = "0";
    for (var i = 1; i <= 10; i++)
    document.getElementById('progress' + i).style.backgroundColor = 'transparent';
    }
    </script>
    css样式文件中加入如下代码:
    .statusTable
    {
    width:100px;
    border:solid 1px #000000;
    padding-bottom:0px;
    margin-bottom:0px;
    }
    .statusTable td
    {
    height:20px;
    }
    Asp.Net服务端实现回调代码如下:
    public partial class DigitStatus : System.Web.UI.Page, ICallbackEventHandler
    {
    private string AspEventArgs;
    protected void Page_Load(object sender, EventArgs e)
    {
    }
    public void RaiseCallbackEvent(string EventArgs)
    {
    AspEventArgs = EventArgs;
    }
    public string GetCallbackResult()
    {
    int i = Convert.ToInt32(AspEventArgs);
    i++;
    return i.ToString();
    }
    }
    这样,一个简易的进度条就实现了,运行即可得到如页首处的效果。

    一起学吧部分文章转载自互联网,供读者交流和学习,若有涉及作者版权等问题请及时与我们联系,以便更正、删除或按规定办理。感谢所有提供资讯的网站,欢迎各类媒体与一起学吧进行文章共享合作。

    广告
    广告
    广告