はじめに
http://blogs.yahoo.co.jp/dk521123/35578725.htmlで、ASP.NET MVC において、 Ajax でやり取りすることを取り上げたが 他にもあったので、メモっとく。
前提
* 以下のJavascriptが必要。 + jquery.unobtrusive-ajax.js + MicrosoftAjax.js + MicrosoftMvcAjax.js => なかったら、以下の環境設定を行う
準備：環境設定
http://blogs.yahoo.co.jp/dk521123/35596847.htmlで行ったNuGetでインストールする [1] Visual Studio で [ツール]-[NuGetパッケージ マネージャー]-[パッケージ マネージャー コンソール]を選択 [2] 以下のコマンドを入力する Install-Package Microsoft.jQuery.Unobtrusive.Ajax Install-Package MicrosoftMvcAjax.Mvc5https://www.nuget.org/packages/Microsoft.jQuery.Unobtrusive.Ajax/
https://www.nuget.org/packages/MicrosoftMvcAjax.Mvc5/
※ Request.IsAjaxRequest()からFalseが返ってくる（つまり、ajaxになってない）。http://suusanex.hatenablog.jp/entry/2014/09/03/121509
サンプル1
今回、取り上げるクラス・メソッド
* Ajax.BeginForm / AjaxOptions * Request.IsAjaxRequest() * PartialView
モデル
DemoAjaxModel.vbPublic Class DemoAjaxModel
Private Property _Id As Integer
Private Property _Name As String
Public Property Id As Integer
Get
Return Me._Id
End Get
Set(ByVal value As Integer)
Me._Id = value
End Set
End Property
Public Property Name As String
Get
Return Me._Name
End Get
Set(ByVal value As String)
Me._Name = value
End Set
End Property
End Class
ビュー
* SampleView.vbhtml@Code
ViewData("Title") = "SampleView"
End Code
<h2>SampleView</h2>
<script src="~/Scripts/jquery-1.10.2.js" type="text/javascript"></script>
<script src="~/Scripts/jquery.unobtrusive-ajax.js" type="text/javascript"></script>
<script src="~/Scripts/MicrosoftAjax.js" type="text/javascript"></script>
<script src="~/Scripts/MicrosoftMvcAjax.js" type="text/javascript"></script>
@Using Ajax.BeginForm("Search",
New AjaxOptions With {
.HttpMethod = "POST",
.UpdateTargetId = "result"})
@Html.TextBox("Id", "")
@<input type = "submit" value="Search" />
End Using
<!--部分更新の結果を表示するための領域を確保-->
<div id="result"></div>
* _PartialPage1.vbhtml <table border="1">
<tr>
<td>
<ul>
<li>@Html.Encode(Model.Id)</li>
<li>@Html.Encode(Model.Name)</li>
</ul>
</td>
</tr>
</table>
コントローラ
* DemoAjaxController.vbImports System.Web.Mvc Namespace Controllers Public Class DemoAjaxController Inherits Controller Function SampleView() As ActionResult Return View() End Function Public Function Search(model As DemoAjaxModel) As ActionResult ' リクエストがAjax通信（非同期通信）である場合値を返す If Request.IsAjaxRequest() Then Select Case model.Id Case 1 model.Name = "Mike" Case 2 model.Name = "Tom" Case Else model.Name = "None" End Select Return PartialView("_PartialPage1", model) Else ' リクエストがAjax通信以外の場合、何もしない Return New EmptyResult() End If End Function End Class End Namespace
サンプル2
今回、取り上げるクラス・メソッド
* Ajax.ActionLink / AjaxOptions * Request.IsAjaxRequest() * PartialView
モデル
DemoAjaxModel.vbは例1と同じビュー
* Sample2View.vbhtml@Code
ViewData("Title") = "Sample2View"
End Code
<script src="~/Scripts/jquery-1.10.2.js" type="text/javascript"></script>
<script src="~/Scripts/jquery.unobtrusive-ajax.js" type="text/javascript"></script>
<script src="~/Scripts/MicrosoftAjax.js" type="text/javascript"></script>
<script src="~/Scripts/MicrosoftMvcAjax.js" type="text/javascript"></script>
<h2>Sample2View</h2>
@Ajax.ActionLink("Click me!", "DoDemoAjax",
New With {.Id = "1"}, New AjaxOptions() With {.UpdateTargetId = "result"})
<!--部分更新の結果を表示するための領域を確保-->
<div id="result"></div>
* _PartialPage1.vbhtmlは例1と同じ コントローラ
* DemoAjaxController.vbImports System.Web.Mvc Namespace Controllers Public Class DemoAjaxController Inherits Controller Function Sample2View() As ActionResult Return View() End Function Public Function DoDemoAjax(ByVal id As String) As ActionResult ' リクエストがAjax通信（非同期通信）である場合値を返す If Request.IsAjaxRequest() = False Then Return New EmptyResult() End If Dim model As DemoAjaxModel = New DemoAjaxModel() model.Id = Integer.Parse(id) model.Name = "Mike" ' 生成した文字列をJavaScriptのコードとして返す Return PartialView("_PartialPage1", model) End Function End Class End Namespace
参考文献
http://www.atmarkit.co.jp/ait/articles/0907/10/news109_3.htmlhttp://www.atmarkit.co.jp/ait/articles/0907/10/news109_4.html
https://code.msdn.microsoft.com/ASPNet-MVC-6a7b270b
