ASP.NET MVC

2017/01/15

[もどる] | Razor | HtmlHelper


プロジェクトの作成

Visual Studio 2015 を使って ASP.NET MVC プロジェクトを作成するには次のようにする。

  1. 「ファイル / 新規作成 / プロジェクト」を選ぶ。(「Web サイト」を選ぶと直接、IIS 上にプロジェクトが作られるので注意)
  2. 「新しいプロジェクト」ダイアログが開くので、Visual C# または Visual Basic を展開して「Web」を選択する。オプションとして「ASP.NET Web アプリケーション」のみが表示される。
  3. ソリューションと名前を入力して OK をクリックする。
  4. 「新しい ASP.NET プロジェクト」ダイアログが開くので、MVC を選択して OK ボタンをクリックする。
  5. 次のようなソリューションが作成される。この中には認証などの機能が含まれておりかなりのサイズがある。不要なら削除したいが、下手に削除するとプロジェクト自体がおかしくなるので、削除はしないほうがよい。(メニューから削除すればよい)

 プロジェクトにはたくさんのファイルがあるが、とりあえずアプリケーションに関係するには、Controllers フォルダの下にある HomeController.vb と Views / Home フォルダの下にある Index.vbhtml である。この2つをカスタマイズすればよい。

新しく作成されたプロジェクトをそのまま実行すると、下のような画面が表示される。この画面のデザインは Bootstrap というフレームワークに基づいて作られている。よって、カスタマイズを行うには Bootstrap の基本を理解しておく必要がある。

 

トップページのカスタマイズ

ヘッダーとフッターのカスタマイズ

ログインやユーザ登録はこのアプリケーションでは不要なので削除する。このアプリケーションはクレジットカードの使用に関するものなのでタイトルをそれに合わせて変更する。メニューの Contact は不要なので削除する。つまり下のような画面に変更する。


これらの変更は、ページの共通部分なので Shared フォルダの _Layout.vbhtml を変更する。

このため、Shared / _Layout.vbhtml は次のように変更した。

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>@ViewBag.Title - My ASP.NET Application</title>
    @Styles.Render("~/Content/css")
    @Scripts.Render("~/bundles/modernizr")

</head>
<body>
    <div class="navbar navbar-inverse navbar-fixed-top">
        <div class="container">
            <div class="navbar-header">
                <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                </button>
                @Html.ActionLink("OMCCARD", "Index", "Home", New With {.area = ""}, New With {.class = "navbar-brand"})
            </div>
            <div class="navbar-collapse collapse">
                <ul class="nav navbar-nav">
                    <li>@Html.ActionLink("Home", "Index", "Home")</li>
                    <li>@Html.ActionLink("About", "About", "Home")</li>
                </ul>
                <!--
                @Html.Partial("_LoginPartial")
                    -->
            </div>
        </div>
    </div>
    <div class="container body-content">
        @RenderBody()
        <hr />
        <footer>
            <p>© @DateTime.Now.Year - OMCCARD Application</p>
        </footer>
    </div>

    @Scripts.Render("~/bundles/jquery")
    @Scripts.Render("~/bundles/bootstrap")
    @RenderSection("scripts", required:=False)
</body>
</html>

 

 タイトル部分は Views / Index.vbhtml の Bootstrap の JumboTron を変更する。ページのレイアウトも同時変更する。

@Code
    ViewData("Title") = "OMCCARD ホーム"
End Code

<div class="jumbotron">
    <h1>OMCCARD</h1>
    <p>クレジットカード利用状況</p>
</div>

<div class="row">

</div>
 

 

モデルの追加

 ページに表示するためのデータだが、通常はデータベースから取得する。ここでは、Entity Framework のデータモデルを Model フォルダに追加する。

ソリューションエクスプローラーで Model フォルダを選択して「追加 / 新しい項目 / データ」から ADO.NET Entity Data Model を追加する。



表示対象のテーブルを選択すると、下のように表示される。

 

コントローラのカスタマイズ

Controllers フォルダから HomeController.vb を開いて、モデルから表示するデータを取得する。表示先は Index.vbhtml なので、メソッド Index() をカスタマイズする。このメソッドは http://localhost/Home/Index を表示したとき呼び出される。

このアプリケーションは起動すると、最初、最新の利用状況を表示する。利用日の範囲を指定すると、それに応じた利用状況を表示する。下の画像はこの画面例であるが、利用先と利用額は塗りつぶしてある。


 コントローラでは、この画面に表示するデータをモデルを利用して取得する。取得する方法は2種類あって、最初の最新の利用状況(最大500件)と利用期間を指定して検索した場合の利用状況(最大500件)を用意する。

 下のソースで、Index() が URL "http://localhost/Home/Index" に対応するメソッドである。最初の Index() は、もともとあったもので必要なコードを追加した。もうひとつは、画面の検索ボタンをクリックしたときの応答メソッドで、引数 fromDt, toDt はフォームの input コントロールに対応する。<HttpPost> という属性が付いているが、このメソッドは HTTP POST メソッドに応答するという意味である。

データベースからは Linq を使って必要なデータを取得している。取得したデータは ViewData(key) というオブジェクトでビューに引き渡している。


Public Class HomeController
    Inherits System.Web.Mvc.Controller

    ''' <summary>
    ''' Index ページ (Get)
    ''' </summary>
    ''' <returns>ビュー</returns>
    Function Index() As ActionResult
        Dim context As New UserEntities
        Dim rs As IQueryable(Of OMCCARD) = From x In context.OMCCARD Order By x.Id Descending
        rs = rs.Take(500)  ' 新しい利用500件まで
        ViewData("data") = rs.ToArray()
        Return View()
    End Function

    ''' <summary>
    ''' Index ページ (Post)
    ''' </summary>
    ''' <param name="fromDt">検索対象利用日の開始</param>
    ''' <param name="toDt">検索対象利用日の終了</param>
    ''' <returns>ビュー</returns>
    <HttpPost>
    Function Index(ByVal fromDt As Date, ByVal toDt As Date) As ActionResult
        Dim strFromDt As String = fromDt.ToString("yyyyMMdd")
        Dim strToDt As String = toDt.ToString("yyyyMMdd")
        Dim context As New UserEntities
        Dim rs As IQueryable(Of OMCCARD) = From x In context.OMCCARD Where x.Date >= 
strFromDt And x.Date <= strToDt
        rs = rs.Take(500)  ' 新しい利用500件まで
        Dim sum As Int32 = rs.Select(Function(x) x.Amount).Sum()
        ViewData("data") = rs.ToArray()
        ViewData("sum") = sum
        'Debug.Print(rs.Count)
        Return View()
    End Function

    Function About() As ActionResult
        ViewData("Message") = "Your application description page."

        Return View()
    End Function

    Function Contact() As ActionResult
        ViewData("Message") = "Your contact page."

        Return View()
    End Function
End Class

 

 

ビューの変更

ビューは Razor というマイクロソフト独自の言語で作成されている。この言語には、VB または C# のコードを埋め込むことができる。動的な部分には @ を付けて区別する。

@Code
    ViewData("Title") = "OMCCARD ホーム"
End Code

<div class="jumbotron">
    <h1>OMCCARD</h1>
    <p>クレジットカード利用状況</p>
</div>

<div class="row">
    <form method="post" id="form1">
        期間:<input type="date" name="fromDt" id="fromDt" value="2000-01-01" /> 
から <input type="date" name="toDt" id="toDt" value="2030-12-31" /> 
<button type="submit">検索</button>
    </form>
</div>
<br />
<br />
    <table class="table">
        <tr><th>ID</th><th>日付</th><th>利用先</th>
<th>利用額</th></tr>
    @For Each x As OMCCARD.OMCCARD In ViewData("data")
        @<tr><td>@x.Id</td><td>@x.Date</td><td>@x.Shop</td>
<td>@String.Format("{0:C}", x.Amount)</td></tr>
    Next
    @If Not IsNothing(ViewData("sum")) Then
        @<tr><td></td><td></td><td>合計</td><td>@String.Format("{0:C}", ViewData("sum"))</td></tr>
    End If
    </table>

 

 

発行

動作確認が完了したらウェブサーバへ発行する。発行先はいろいろ指定できるが、自 PC の IIS に発行する例を下に示す。

「ビルド / ~の発行」メニューを実行すると、下のようなダイアログが開く。



カスタムを選んでプロファイル名を付ける。名前は適当(わかりやすいもの)でよい。次へをクリックして、発行先 FileSystem を選び、IIS からアクセス可能なフォルダを指定する(存在しなければ作成される)。ただし、Visual Studio を管理者モードで起動しておかないと、セキュリティエラーとなり失敗する。


最後に「発行」ボタンをクリックすると、リリースビルドが行われる。



このままでは、事前にアプリケーションフォルダを用意しておかない限りエラーとなる。IIS マネージャを開いて、先ほど指定(あるいは作成)したフォルダをアプリケーションに変換する。その後、ブラウザでこのURLを開けばデバッグ時と同じ画面が表示されるはずである。

(注意) Windows 認証で SQL Server にアクセスする場合、IIS でのユーザと Visual Studio でのユーザが異なることに注意すること。IIS では DefaultAppPool という偽装ユーザで SQL Server へアクセスする。このユーザを受け入れるように設定しておかないとエラーが起こる。詳しくは 「SQL Server まとめ」参照。