たんたか

環境 ：NET Framework 3.5 Service Pack 1, ASP.NET MVC 1.0, jQuery 1.3.2

前々回、前回と ASP.NET MVC で AjaxHelperクラス を使って非同期更新を行ったので、ついでに jQuery で同じ処理を行った場合です。

前回からの修正だと少しわかりにくいので、ASP.NET MVC のデフォルトで作成されたサイトに追加しています。Controllerや結果画面は、前々回と同じため記載していません。

View

Views/Home/Index.aspx に日付表示用のタグと日付取得用のリンク、javascriptを追加します。

<script type="text/javascript">
function onClick()
{
    $.ajax({
        url: "/home/GetDateTime",
        dataType: 'script',
        timeout: 5000,
        success: Update
    });
}

function Update(result) {
    if (result == null) {
        window.alert("該当するデータがありません。");
    } else {
        $("#TimeDate").text(result);
    }
}
</script>

<p>日時：<span id="TimeDate"></span></p>
<a href='javascript:void(0);' onclick='onClick();return false'>日付更新</a>

Views/Shared/Site.Masterのheadにscriptタグを追加します。

<script type="text/javascript" src="/Scripts/jquery-1.3.2.js"></script>