■サンプル
コントローラ側
/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>