【ASP.NET MVC】【VB】【Ajax】ASP.NET MVC において、 Ajax通信中 にローディング中を表示するには...

■ポイント

http://blogs.yahoo.co.jp/dk521123/35577527.html
より

 * ポイントは以下の2点。
  (1) Ajax通信前に、ローディング中の処理を行い
  (2) 通信完了時のコールバック関数「always()」で消す。

 * always()について、以下の関連記事を参照のこと。
http://blogs.yahoo.co.jp/dk521123/35781333.html

■サンプル

コントローラ側

/Controllers/DemoAjaxController.vb
Imports System.Web.Mvc

Namespace Controllers
    Public Class DemoAjaxController
        Inherits Controller

        Function DemAjaxView() As ActionResult
            Return View()
        End Function

        <AcceptVerbs(HttpVerbs.Post)>
        Public Function SayHelloWorld() As ActionResult
            '3秒間(3000ミリ秒)停止する
            System.Threading.Thread.Sleep(3000)

            Return Json(New With {Key .result = "Hello World!"},
                        JsonRequestBehavior.AllowGet)
        End Function
    End Class
End Namespace

ビュー側

/Views/DemoAjax/DemAjaxView.vbhtml
<script src="@Url.Content("~/Scripts/jquery-1.10.2.js")" type="text/javascript"></script>
<script type="text/javascript">
$(function () {
    $('#loadingHere').hide();

    $(".ajaxDemo").on("click", function () {
        // ★ローディング中★
        $('#loadingHere').show();
        $.ajax({
            type: 'POST',
            dataType: "json",
            url: '/DemoAjax/SayHelloWorld', // アクセス先のURL
        })
        .done(function (returnData) {
            $("#result").text(" Result : " + returnData.result).html();
        })
        .always(function (returnData) {
            // ★ローディング完了★
            $('#loadingHere').hide();
        });
    })
});
</script>
<style type="text/css">
.loading {
 width: 100%;
 height: 100%;
 z-index: 9999;
 position: fixed;
 opacity: 0.5;
 top: 50%;
 left: 50%;
}
</style>
@Code
    ViewData("Title") = "DemAjaxView"
End Code

<h2>Ajax Demo In ASP.NET MVC</h2>
<button id="demo" class="ajaxDemo">Click Me!</button>
<div>
    <p id="result">Result : </p>
</div>
<div id="loadingHere" class="loading">
    <img src="@Url.Content("~/Images/loading.gif")" />
</div>

関連記事

jQueryを使ったAjax通信 ~Ajax あれこれ編~

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

jQueryを使ったAjax通信 ~基本編~

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