jquery-blockui - JQUERY BLOCKUI プラグイン使用中の ASP.NET 更新の進行状況

Question

次のコードを含むマスター ページがあります。

<asp:ContentPlaceHolder ID="HeadContent" runat="server"></asp:ContentPlaceHolder>

<style type="text/css">
    .style1
    {
        height: 50px;
    }

    .style2
    {
        font-size: 1.1em;
        display: block;
        text-align: left;
        padding: 10px;
        color: White;
        height: 61px;
        width: 850;
    }
     .style3
    {
        color: #FFFFFF;
    }
</style>

    <link href="../Styles/Site.css" rel="stylesheet" type="text/css" />
    <script type = "text/javascript" src = "../scripts/jquery-1.3.2.min.js"></script>
    <script type = "text/javascript" src = "../scripts/jquery.blockUI.js"></script>
    <script type = "text/javascript">

        function BlockUI(elementID) {
            var prm = Sys.WebForms.PageRequestManager.getInstance();

            prm.add_beginRequest(function () {
                $("#" + elementID).block({ message: '<table align = "center"><tr><td style="text-align: center"><img src="../images/loadingAnim.gif"/></td></tr>
                        <tr><td align="center" class="style3"><strong style="text-align: center">
                        In progress</td></tr></table>',
                    css: {'z-index':'1000000'},
                    overlayCSS: { backgroundColor: '#000000', opacity: 0.6, border: '3px solid #63B2EB'
                    }
                });
            });
            prm.add_endRequest(function () {
                $("#" + elementID).unblock();
            });
        }
        $(document).ready(function () {
            BlockUI("masterpage");
            $.blockUI.defaults.css = {};
        });
</script> 

<form id="Form1" runat="server">

        <div class="page" id="masterpage">
            <div class="header">
                <div class="style2">

                    <table width='100%' class="style1">
                        <tr>
                            <td width='50%' align='left' valign="bottom"><asp:Image ID="Image2" runat="server" 
                                    ImageUrl="~/images/img.jpg" Height="63px" Width="119px" />
                                &nbsp;</td>
                            <td width='50%' align='right' valign="bottom">
                                <asp:Image ID="Image3" runat="server" Height="64px" Width="64px" />
                                <asp:Image ID="Image1" runat="server" BorderStyle="Solid" ImageUrl="~/images/logo.jpg" />
                            </td>
                        </tr> 
                    </table>

                </div>

                <div class="clear hideSkiplink">
                    <asp:Menu ID="myNavigationMenu" runat="server" CssClass="menu" 
                        EnableViewState="false" IncludeStyleBlock="False" Orientation="Horizontal" 
                        DataSourceID="SiteMapDataSource1" DynamicHorizontalOffset="2" 
                        StaticDisplayLevels="2">
                    </asp:Menu>
                <asp:SiteMapDataSource ID="SiteMapDataSource1" runat="server" SiteMapProvider="MyProvider" />
                </div>
            </div>
            <div class="main">
                <asp:ContentPlaceHolder ID="MainContent" runat="server"></asp:ContentPlaceHolder>
            </div>
            <div class="clear">
            </div>
        </div>

    <div class="footer">

    </div>

</form>

そして私のページに次のコード

.style3 { 幅: 98%; } .style4 { 高さ: 21px; } .style6 { 色: #000000; }

 <ContentTemplate>

        <table class="style3">

                    <asp:Button ID="runButton" runat="server" 
                        Text="Run Process" Height="35px" style="font-weight: 700" 
                        Width="344px" />

                    </asp:ConfirmButtonExtender>
                </td>
            </tr>
            <tr>
                <td class="style4" align="center">
                    <asp:Label ID="lbl_Message" runat="server" style="color: #FF0000"></asp:Label>
                </td>
            </tr>
            <tr>
                <td align="center" class="style4">
                    <asp:ScriptManager ID="ScriptManager1" runat="server" 
                        AsyncPostBackTimeout="360000">
                    </asp:ScriptManager>
                    <asp:SqlDataSource ID="DS" runat="server"></asp:SqlDataSource>
                </td>
            </tr>
            <tr>
                <td align="center" class="style4">
                    <uc1:popupmsg ID="popupmsg1" runat="server" />
                </td>
            </tr>
        </table>

</ContentTemplate> 

    <Triggers>
        <asp:AsyncPostBackTrigger ControlID = "runButton" /> 
    </Triggers> 

</asp:UpdatePanel> 

ブロック UI は問題なく動作しています。

ブロック div の進行状況を更新する方法を見つける必要があります。

たとえば、1237652 件中 678 件のトランザクションを処理したとします。

これどうやってするの？