Azureはじめました

Windows Azureで業務システムを組んでみる日記

asp.net MVC4 + Razorでインターフェースを作ってみる

Razor MVC4 EntityFramework 調査

とはいえ asp.net MVCも初めてなのでチュートリアルで流しながら構造を見てみる。

チュートリアルに従うだけなので流れは割愛して軽くファーストインプレッション。

MVCでのファイル構成

ざーっと見た感じ、こうなってるようだ

f:id:twisted0517:20130531192541p:plain:right

App_Data
まだ謎
App_Start
ルーティング定義や認証の設定などスタートアップで使われそうなグローバルなクラスが置かれてる。これらはGlobal.asaxのapplicationStart()で登録される。
Content
テーマやスタイルシートが使われてる。テーマはどこで適用するのかまだ不明。
Controllers
コントローラークラスがここに配置される。モデルからスキャフォールド作るときはここから 追加>コントローラー と。
Filters
InitializeSimpleMembershipAttributeてのが置かれてる。認証関連のDBのコネクションの準備をしてるようだけどなんでここでやってるのかは不明
Images
画像
Migrations
Code First Migrationsの移行クラスが作成される。
Models
Model置き場。
Scripts
Javascript置き場。Content/themesにもJavascriptが入ってるのでそのへんどうなのか。
Views
Viewのcshtmlが置かれる。Views以下にControllerと同名のフォルダ、その中にActionと同名のcshtmlを置かれる。

Viewの構成

チュートリアルのまま作られた場合呼び出し構成は

/Views/_ViewStart.cshtml
↓ @{Layout="~"}
/Views/Shared/_Layout.cshtml --(@Partial)→ LoginPartial.cshtml
↓ @RenderBody
<各Actionのcshtml>

という感じに呼ばれてる。
最初の_ViewStart.cshtmlというファイルをどこかで特に指定したりしてないようなので、デフォルトでロードされるファイル名なのかもしれない*1

　正確には、「Razorは、名前がアンダースコアで始まるビューへの直接アクセスを禁止」している。通常、部分ビューへの直接アクセスは想定していないはずなので、あらかじめ名前付けレベルでガードしておくのが望ましい。
第7回　レイアウト／部分ビューでアプリ共通のデザインを定義 － ＠IT

という理由もあるようだ。

_Layout.cshtml の構造について
<!DOCTYPE html>
<html lang="ja">
    <head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
        <meta charset="utf-8" />
        <title>@ViewBag.Title - TodoList アプリケーション</title>
        <link href="~/favicon.ico" rel="shortcut icon" type="image/x-icon" />
        <meta name="viewport" content="width=device-width" />
        @Styles.Render("~/Content/css")
        @Scripts.Render("~/bundles/modernizr")
    </head>
    <body>
        <header>
            <div class="content-wrapper">
                <div class="float-left">
                    <p class="site-title">@Html.ActionLink("ToDo", "Index", "Home")</p>
                </div>
                <div class="float-right">
                    <section id="login">
                        @Html.Partial("_LoginPartial")
                    </section>
                    <nav>
                        <ul id="menu">
                            <li>@Html.ActionLink("ホーム", "Index", "Home")</li>
                            <li>@Html.ActionLink("バージョン情報", "About", "Home")</li>
                            <li>@Html.ActionLink("連絡先", "Contact", "Home")</li>
                        </ul>
                    </nav>
                </div>
            </div>
        </header>
        <div id="body">
            @RenderSection("featured", required: false)
            <section class="content-wrapper main-content clear-fix">
                @RenderBody()
            </section>
        </div>
        <footer>
            <div class="content-wrapper">
                <div class="float-left">
                    <p>&copy; @DateTime.Now.Year -Todo List アプリケーション</p>
                </div>
            </div>
        </footer>

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

metaの中にある@Scripts.Renderや@Styles.Renderで指定してるパスはっぽい文字列はディレクトリ名じゃなくてApp_StartのBundleConfigで指定されてるバンドル名かな。

 public static void RegisterBundles(BundleCollection bundles)
        {
            bundles.Add(new ScriptBundle("~/bundles/jquery").Include(
                        "~/Scripts/jquery-{version}.js"));
            bundles.Add(new ScriptBundle("~/bundles/modernizr").Include(
                        "~/Scripts/modernizr-*"));
            bundles.Add(new StyleBundle("~/Content/themes/base/css").Include(
                        "~/Content/themes/base/jquery.ui.core.css",
                        "~/Content/themes/base/jquery.ui.resizable.css",
                        "~/Content/themes/base/jquery.ui.selectable.css",
                        "~/Content/themes/base/jquery.ui.accordion.css",
                        "~/Content/themes/base/jquery.ui.autocomplete.css",
                        "~/Content/themes/base/jquery.ui.button.css",
                        "~/Content/themes/base/jquery.ui.dialog.css",
                        "~/Content/themes/base/jquery.ui.slider.css",
                        "~/Content/themes/base/jquery.ui.tabs.css",
                        "~/Content/themes/base/jquery.ui.datepicker.css",
                        "~/Content/themes/base/jquery.ui.progressbar.css",
                        "~/Content/themes/base/jquery.ui.theme.css"));
(ﾟ∀ﾟ)

長くなりすぎたので一旦区切る。

*1:要確認