[VB.NET] ASP.NET MVC ビューに複数のパラメーターを渡す(List&String)

2021年9月13日

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キーを押してページを移動してみてください。

赤文字でメッセージが表示され、一覧も表示されたら成功です。

今回はビューに複数のパラメーターを渡して表示させてみました。
ヘルパーを使った記法はすっきりしているのですが、慣れないので戸惑いますね。

MVCASP.NET,MVC,REST API,VB.NET

Posted by itblogks