[VB.NET] ASP.NET MVC ビューに複数のパラメーターを渡す(List&String)
REST API⑨ 一覧表示のビューを追加してみるで作成したサンプルを改造して、
ビューにレコードの一覧(List)とメッセージ(String)の2つのパラメーターを渡してみましょう。
※ VisualStudio2019
パラメーター用のモデルクラス(Model)を追加する
まずはビューを確認してみましょう。
MediaTypeが、Recordクラスのリストになっています。
今回はこのビューに対して、Recordクラスのリストとメッセージ文字列をセットで渡せるようにしたいと思います。
方法は色々あるかもしれませんが、今回は Recordクラスのリストとメッセージ文字列の2つのメンバーを持つ
モデルクラスを作成し、それを渡す方法で実現します。
まずはソリューションエクスプローラで、「Models」を右クリックして表示されるメニューから、
「追加」>「クラス」を選択します。
クラス名を入力し、「追加」をクリックします。
クラス名は「ViewTestParam」としました。
「ViewTestParam」 クラスに、Recordクラスのリストと、メッセージ用文字列のプロパティを作成します。
この例では、Recordクラスのリストを「Item1」、メッセージ用文字列を「Item2」としました。
コード
'ViewTest用モデル
Public Class ViewTestParam
''' <summary>APIから取得したデータ</summary>
Public Property Item1 As List(Of Record)
''' <summary>表示用メッセージ</summary>
Public Property Item2 As String '
End Class
ビュー(View)でパラメータを受け取れるようにする
ビュー(ViewTestのindex.vbhtml)を変更して、パラメータを受け取って表示できるようにします。
MediaTypeを、先ほど作成した「ViewTestParam」クラスに変更します。
メッセージ表示用に「message_label」というラベルを用意し、 「ViewTestParam」クラス の「Item2」の内容を赤文字で出力するようにします。
また、一覧の表示部は「ViewTestParam」クラス の「Item1」の内容を出力するようにします。
タイトル行を表示している箇所が、「model.Item1.First().col1)」 となっているので、
レコードが0件の場合はエラーになるのでは?と心配になりますが、0件の場合でもエラーにはなりません。
コード
@ModelType ViewTestParam
@Code
ViewData("Title") = "index"
End Code
<h2>index</h2>
@Html.Label("message_label", Model.Item2, New With {.style = "color:red;"})
<table class="table">
<tr>
<th>
@*最初の要素が無くてもエラーにならないので心配しなくてOK*@
@Html.DisplayNameFor(Function(model) model.Item1.First().col1)
</th>
<th>
@Html.DisplayNameFor(Function(model) model.Item1.First().col2)
</th>
<th>
@Html.DisplayNameFor(Function(model) model.Item1.First().col3)
</th>
<th></th>
</tr>
@For Each item In Model.Item1
@<tr>
<td>
@Html.DisplayFor(Function(modelItem) item.col1)
</td>
<td>
@Html.DisplayFor(Function(modelItem) item.col2)
</td>
<td>
@Html.DisplayFor(Function(modelItem) item.col3)
</td>
<td>
@*@Html.ActionLink("Edit", "Edit", New With {.id = item.PrimaryKey}) |
@Html.ActionLink("Details", "Details", New With {.id = item.PrimaryKey}) |
@Html.ActionLink("Delete", "Delete", New With {.id = item.PrimaryKey})*@
</td>
</tr>
Next
</table>
コントローラー(Controller)から、パラメータを渡す
コントローラー(ViewTestController)を変更して、ビューに 「ViewTestParam」クラス を渡します。
「ViewTestParam」 の「Item1」にRecordクラスのリストを、「Item2」にはメッセージをセットします。
コード
Imports System.Web.Mvc
Namespace Controllers
Public Class ViewTestController
Inherits Controller
' GET: ViewTest
Function Index() As ActionResult
'一覧を取得するAPIのURL
Dim url As String
url = DirectCast(Request, System.Web.HttpRequestWrapper).Url.GetLeftPart(UriPartial.Authority) & "/api/ApiTest"
Dim clt As New Net.Http.HttpClient
Dim result As New System.Net.Http.HttpResponseMessage
'GETを実行
result = clt.GetAsync(url).Result
Dim model As New ViewTestParam
If (result.StatusCode = Net.HttpStatusCode.OK) Then
'Jsonを取り出し
Dim json As String
json = result.Content.ReadAsStringAsync.Result
'デシリアライズ
Dim rec_list As List(Of Record)
rec_list = Newtonsoft.Json.JsonConvert.DeserializeObject(Of List(Of Record))(json)
'モデル作成
model.Item1 = rec_list
model.Item2 = "データを取得しました!"
Else
'モデル作成
model.Item1 = New List(Of Record)
model.Item2 = "データの取得に失敗しました!" & result.Content.ReadAsStringAsync.Result
End If
Return View(model)
End Function
' GET: ViewTest/Details/5
Function Details(ByVal id As Integer) As ActionResult
Return View()
End Function
' GET: ViewTest/Create
Function Create() As ActionResult
Return View()
End Function
' POST: ViewTest/Create
<HttpPost()>
Function Create(ByVal collection As FormCollection) As ActionResult
Try
' TODO: Add insert logic here
Return RedirectToAction("Index")
Catch
Return View()
End Try
End Function
' GET: ViewTest/Edit/5
Function Edit(ByVal id As Integer) As ActionResult
Return View()
End Function
' POST: ViewTest/Edit/5
<HttpPost()>
Function Edit(ByVal id As Integer, ByVal collection As FormCollection) As ActionResult
Try
' TODO: Add update logic here
Return RedirectToAction("Index")
Catch
Return View()
End Try
End Function
' GET: ViewTest/Delete/5
Function Delete(ByVal id As Integer) As ActionResult
Return View()
End Function
' POST: ViewTest/Delete/5
<HttpPost()>
Function Delete(ByVal id As Integer, ByVal collection As FormCollection) As ActionResult
Try
' TODO: Add delete logic here
Return RedirectToAction("Index")
Catch
Return View()
End Try
End Function
End Class
End Namespace
実行して確認する
さっそく実行してみましょう。
実行方法はこちらを参照してください。
もし、「実行したらAPIのメニュー画面が開いた」という場合は、
アドレスバーに「/ViewTest/index」と入力してEnterキーを押してページを移動してみてください。
赤文字でメッセージが表示され、一覧も表示されたら成功です。
今回はビューに複数のパラメーターを渡して表示させてみました。
ヘルパーを使った記法はすっきりしているのですが、慣れないので戸惑いますね。