【ASP.NET】jQueryを利用して処理中メッセージ表示するには [1]

UpdateProgressコントロールだけじゃ、限界がありそうなのでJQueryを利用する方法を学ぶ。

http://blogs.yahoo.co.jp/dk521123/26721609.html

■同期型のPost Back処理中にメッセージを表示

サンプル

Header部

<style type="text/css">  
.divProgress{
  display: none;
}
</style>  
<link type="text/css" rel="stylesheet" href="./jquery/themes/base/jquery.ui.all.css" />
<script type="text/javascript" src="./jquery/jquery-1.6.2.js"></script>
<script type="text/javascript">
$(function () {
$(".btnSubmit").click(function () {
    // 検証コントロールがあるかどうか確認
    if (typeof (Page_ClientValidate) == 'function') {
        // エラーを検出したかどうか確認
        if (Page_ClientValidate() == false) {
            return false;
        }
    }
    $('.divProgress').show();
    $('.btnSubmit').attr('disabled', 'disabled');
    $('form').submit();
});
});
</script>

Body部

<asp:Label ID="Label1" runat="server" Text="Label"></asp:Label>
<br />
<asp:TextBox ID="TextBox1" runat="server"></asp:TextBox>
    <asp:RequiredFieldValidator ID="rqrdVal" runat="server" 
        ErrorMessage="Required Error!" ControlToValidate="TextBox1"></asp:RequiredFieldValidator>
<br />
<asp:Button ID="Button1" runat="server" CssClass="btnSubmit" Text="Click Me!" />
<div class="divProgress">
    <img src="Images/loading.gif" alt="" />
    処理中...
</div>

コードビハインド

Protected Sub Page_Load(ByVal sender As Object, ByVal e As System.EventArgs) Handles Me.Load
    Threading.Thread.Sleep(3000)
    If Me.IsPostBack Then
        Me.Label1.Text = Me.TextBox1.Text & "が指定"
    End If
End Sub

問題点

 * アニメgifが動かない

■非同期型のPost Back処理中にメッセージを表示

サンプル

 * コードビハインドは上と同じ

Header部

<style type="text/css">  
.divProgress{
  display: none;
}
</style>  
<link type="text/css" rel="stylesheet" href="./jquery/themes/base/jquery.ui.all.css" />
<script type="text/javascript" src="./jquery/jquery-1.6.2.js"></script>
<script type="text/javascript">
function pageLoad() {
    var req = Sys.WebForms.PageRequestManager.getInstance();
    req.add_initializeRequest(req_InitializaRequest);
    req.add_endRequest(req_EndRequest);
}
function req_InitializaRequest(sender, args) {
    // 検証コントロールがあるかどうか確認
    if (typeof (Page_ClientValidate) == 'function') {
        // エラーを検出したかどうか確認
        if (Page_ClientValidate() == false) {
            return false;
        }
    }
    $('.divProgress').show();
    $('.btnSubmit').attr('disabled', 'disabled');
}
function req_EndRequest(sender, args) {
    $('.divProgress').hide();
    $('.btnSubmit').attr('disabled', '');
}
</script>

Body部

<asp:ScriptManager ID="ScriptManager1" runat="server">
</asp:ScriptManager>
<asp:UpdatePanel ID="UpdatePanel1" runat="server">
    <ContentTemplate>
        <asp:Label ID="Label1" runat="server" Text="Label"></asp:Label>
        <br />
        <asp:TextBox ID="TextBox1" runat="server"></asp:TextBox>
            <asp:RequiredFieldValidator ID="rqrdVal" runat="server" 
                ErrorMessage="Required Error!" ControlToValidate="TextBox1"></asp:RequiredFieldValidator>
        <br />
        <asp:Button ID="Button1" runat="server" CssClass="btnSubmit" Text="Click Me!" />
        <div class="divProgress">
            <img src="Images/loading.gif" alt="" />
            処理中...
        </div>
    </ContentTemplate>
</asp:UpdatePanel>

問題点

 * ボタンが非活性のまま