Asp.NetMVC 3インスタンス学習のExtShop(二)-マスターページの作成
6616 ワード
マスターページの役割は、Webサイト全体の共通要素を集中させ、メンテナンスを容易にすることです.この例のマスターページの内容は、主に図1に示すように、ページの上部のナビゲーションバー、左側の分類バー、および下部の著作権情報を集約します.
図1
マスターページを変更する前に、プロジェクトのルートディレクトリにプロジェクトピクチャを保存するための「Images」ディレクトリを追加します.ソリューションエクスプローラで「Extshop」を選択し、右クリックして「追加」を選択し、サブメニューから「新規フォルダ」を選択し、フォルダ名を「Images」に変更し、最後にプロジェクトピクチャを「Images」ファイルに追加します.
前のブログから分かるように、デフォルトのマスターページは_Layout.cshtmlファイルなので、ファイルを変更する必要があります.エディタでファイルを開き、Siteを開きます.cssファイル.
まず最初に修正するのはSiteです.cssは、body定義のfont-sizeを14 pxに変更し、次の2行のコードを追加します.
そして_に切り替えLayout.cshtmlファイル、まずトップナビゲーションバーを完了し、@RenderBodyに次のコードを追加します.
CSSコードの背景画像のパスは、ルートディレクトリの下にある「Images」ディレクトリの下にあるファイルを「/」で始まることに注意してください.このようにする目的は、便利のためにほかならない.
残りのセクションを続行し、ページに次のコードを追加します.
ページ全体のフレームワークは基本的に完成しました.しかし、フレームワークをテストするには、まだ何かをする必要があります.Controllersディレクトリを選択し、CatalogControlのコントローラを追加します.次にコントローラにLeftList操作を追加します.コードは以下の通りです.
[ChildActionOnly] public ActionResult LeftList(string id) { string condition = ""; if (id.Length > 0) { condition = "CategoryID.Substring(0,@1)==@0 && CategoryID.Length>@1"; } else { condition = "CategoryID.Length<7"; } ViewData["id"] = id; ExtShopDataContext dc = new ExtShopDataContext(); var q = dc.T_Categories.Where(condition, id,id.Length).OrderBy(m => m.CategoryID); return PartialView(q); }
コードでは、「ChildActionOnly」属性の目的は、この操作をブラウザで直接アクセスできず、RenderActionでのみ呼び出すことです.idをビューに渡す必要があるため、ビュー呼び出しを容易にするためにid値を「View Data[「id」」」に保存します.コードの最後の文は「View」ではなく、ユーザー定義コントロールを返すのと同じ「PartialView」を返します.
コードを正常に動作させるには、リファレンスに次の文を追加する必要があります.
using Extshop.Models; using System.Linq.Dynamic;
コード2文目はLinqのダイナミックライブラリを参照する必要があるので、プロジェクトに「App_LocalResources」ディレクトリを追加し、「DynamicLibrary.cs」ファイルをディレクトリに追加する必要があります.
操作にビューを追加するには、「LeftList」を右クリックし、メニューから「Add View」を選択すると、図2に示す結果が表示されます.
図2
「Create a strongly-typed view」にチェックマークを付け、「Model class」で「Extshop.Models.T_Categories」を選択し、「Create as a partial view」にチェックマークを付け、「Add」ボタンをクリックして操作を完了します.「LeftList.cshtml」ファイルに次のコードを追加します.
@model IEnumerable @foreach (var c in Model) { if (c.CategoryID.Length == (((string)ViewData["id"]).Length+3)) { @c.Titel } else { @c.Titel } }
コードでは、Modelはコントローラからのデータを表します.Url.Actionメソッドの役割はリンクを構築することであり,1番目のパラメータは実行する操作を表し,2番目のパラメータはそのコントローラを用い,3番目のパラメータは伝達するパラメータを表す.
プロジェクトに「HomeController.cs」を追加し、Index操作にビューを追加します.最後に「Index.cshtml」ファイルコードを変更します.
トップページであるため、分類ブラウズの分類はルートクラスに列挙されるので、ページでパラメータ「PageData["id"]」を空文字列に設定する必要があります.
最後に[Extshop]を選択し、右クリックメニュー[デバッグ]のサブメニューから[新しいインスタンスを有効にする]を選択すると、ブラウザで図1に示すような結果が表示されます.
図1
マスターページを変更する前に、プロジェクトのルートディレクトリにプロジェクトピクチャを保存するための「Images」ディレクトリを追加します.ソリューションエクスプローラで「Extshop」を選択し、右クリックして「追加」を選択し、サブメニューから「新規フォルダ」を選択し、フォルダ名を「Images」に変更し、最後にプロジェクトピクチャを「Images」ファイルに追加します.
前のブログから分かるように、デフォルトのマスターページは_Layout.cshtmlファイルなので、ファイルを変更する必要があります.エディタでファイルを開き、Siteを開きます.cssファイル.
まず最初に修正するのはSiteです.cssは、body定義のfont-sizeを14 pxに変更し、次の2行のコードを追加します.
margin:0;
padding:0;そして_に切り替えLayout.cshtmlファイル、まずトップナビゲーションバーを完了し、@RenderBodyに次のコードを追加します.
从代码中可以看到，因为具体的页面还没有实现，所以所有链接目前都是空的，而“登录”、“免费注册”和“购物车”3个链接因为是调用脚本的，所以都设置了ID，其连接都为“#”。
在Site.css文件尾加入以下CSS代码：
ul,li{padding:0;margin:0;}
li {list-style: none;}
a{text-decoration:none}
a:visited{text-decoration:none;}
#navBar {height:41px;width:980px;margin:auto;display:block;overflow:hidden;}
#navBar div{float:left;font-weight:bold;color:#fff;line-height:30px;}
#navBar a{color:#fff;}
#navBar a:hover{color:#f90;}
#navBar a:visited {color:#fff;}
#navBar .logo{width:178px;height:41px;background:transparent url(/images/top1.jpg) no-repeat}
#navBar .nav{width:789px;height:41px;display:block;background:url(/images/top2.jpg) repeat-x;padding-top:10px;}
#navBar .nav span{font-weight:bold;width:80px;display:block;text-align:center;float:left;}
#navBar .nav .right{width:220px;height:41px;display:block;float:right;font-size:12px;line-height:24px;padding-top:8px;}
#navBar .nav .right a{width:auto;font-weight:normal;}
#navBar .last{width:13px;height:41px;background:transparent url(/images/top3.jpg) no-repeat}
CSSコードの背景画像のパスは、ルートディレクトリの下にある「Images」ディレクトリの下にあるファイルを「/」で始まることに注意してください.このようにする目的は、便利のためにほかならない.
残りのセクションを続行し、ページに次のコードを追加します.
@RenderBody()
因为左边的分类浏览是动态的，所以在第4行代码中，通过RenderAction方法调用Catalog控制器里的LeftList方法返回需要的分类信息，而“new {id=PageData["id "]}”参数的目的是允许页面通过具体的id控制列表。
第8行就是要插入的内容页。
最后在Site.css加入以下的css代码：
.wrap {width:980px;margin:10px auto 10px auto;}
.wrap .clear{clear:both;}
.left {float:left;width:160px;margin-right:10px;border:1px solid #d3d3d3;padding:1px;}
.left .header{background:url(/images/leftHeader.jpg) repeat-x;height:28px;line-height:28px;width:150px;display:block;color:#fff;font-size:14px;margin:0px;}
.left span{width:140px;display:block;height:20px;line-height:20px;padding-left:10px;background:transparent url(/images/point02.jpg) no-repeat scroll 0 10px;margin-left:5px;}
.left a{color:#000;}
.left a:hover{text-decoration:underline;}
#main {float:right;width:800px}
#footer {height:30px;width:980px;display:block;text-align:center;margin:auto;line-height:30px;border-top:1px solid #d2d2be}
ページ全体のフレームワークは基本的に完成しました.しかし、フレームワークをテストするには、まだ何かをする必要があります.Controllersディレクトリを選択し、CatalogControlのコントローラを追加します.次にコントローラにLeftList操作を追加します.コードは以下の通りです.
[ChildActionOnly] public ActionResult LeftList(string id) { string condition = ""; if (id.Length > 0) { condition = "CategoryID.Substring(0,@1)==@0 && CategoryID.Length>@1"; } else { condition = "CategoryID.Length<7"; } ViewData["id"] = id; ExtShopDataContext dc = new ExtShopDataContext(); var q = dc.T_Categories.Where(condition, id,id.Length).OrderBy(m => m.CategoryID); return PartialView(q); }
コードでは、「ChildActionOnly」属性の目的は、この操作をブラウザで直接アクセスできず、RenderActionでのみ呼び出すことです.idをビューに渡す必要があるため、ビュー呼び出しを容易にするためにid値を「View Data[「id」」」に保存します.コードの最後の文は「View」ではなく、ユーザー定義コントロールを返すのと同じ「PartialView」を返します.
コードを正常に動作させるには、リファレンスに次の文を追加する必要があります.
using Extshop.Models; using System.Linq.Dynamic;
コード2文目はLinqのダイナミックライブラリを参照する必要があるので、プロジェクトに「App_LocalResources」ディレクトリを追加し、「DynamicLibrary.cs」ファイルをディレクトリに追加する必要があります.
操作にビューを追加するには、「LeftList」を右クリックし、メニューから「Add View」を選択すると、図2に示す結果が表示されます.
図2
「Create a strongly-typed view」にチェックマークを付け、「Model class」で「Extshop.Models.T_Categories」を選択し、「Create as a partial view」にチェックマークを付け、「Add」ボタンをクリックして操作を完了します.「LeftList.cshtml」ファイルに次のコードを追加します.
@model IEnumerable @foreach (var c in Model) { if (c.CategoryID.Length == (((string)ViewData["id"]).Length+3)) { @c.Titel } else { @c.Titel } }
コードでは、Modelはコントローラからのデータを表します.Url.Actionメソッドの役割はリンクを構築することであり,1番目のパラメータは実行する操作を表し,2番目のパラメータはそのコントローラを用い,3番目のパラメータは伝達するパラメータを表す.
プロジェクトに「HomeController.cs」を追加し、Index操作にビューを追加します.最後に「Index.cshtml」ファイルコードを変更します.
@{
ViewBag.Title = "Index";
PageData["id"] = "";
}
トップページであるため、分類ブラウズの分類はルートクラスに列挙されるので、ページでパラメータ「PageData["id"]」を空文字列に設定する必要があります.
最後に[Extshop]を選択し、右クリックメニュー[デバッグ]のサブメニューから[新しいインスタンスを有効にする]を選択すると、ブラウザで図1に示すような結果が表示されます.