Asp.net MVC 3实例学习之ExtShop（二）——创建母版页

母版页的作用就是将整个网站的公共元素集中起来，便于维护。在本实例中的母版页内容主要如图1所示，将页面中顶部的导航栏、左边的分类栏和底部的版权信息集中起来。

 

在修改母版页之前，首先在项目根目录增加一个“Images”的目录，用来存放项目图片。在解决方案资源管理器中选择“Extshop”，然后单击鼠标右键选择“添加”，从子菜单中选择“新建文件夹”，然后将文件夹的名称修改为“Images”，最后将项目图片添加到“Images”文件中。

从上一篇博文可以了解到，默认的母版页是_Layout.cshtml文件，因此我们需要修改该文件。在编辑器中打开该文件，同时打开Site.css文件。

首先要修改的是Site.css，将body定义中的font-size修改为14px，并增加以下两行代码：

1. margin:0;  
2. padding:0; 

然后切换到_Layout.cshtml文件，首先完成顶部导航栏，在@RenderBody上加入以下代码：

1. <div id='navBar'> 
2.     <div class="logo"></div> 
3.     <div class="nav"> 
4.         <span><a href="/" mce_href="">首页</a></span> 
5.         <span><a href="">优惠信息</a></span> 
6.         <span><a href="">联系我们</a></span> 
7.         <div class="right">   
8.             <a href="#" mce_href="#" id="login">登录</a>&nbsp;&nbsp;|&nbsp;&nbsp;  
9.             <a href="#" mce_href="#" id="reg">免费注册</a>&nbsp;&nbsp;|&nbsp;&nbsp;  
10.             <a href="#" mce_href="#" id="cart">购物车</a>&nbsp;&nbsp;|&nbsp;&nbsp;  
11.             <a href="">帮助</a> 
12.         </div> 
13.     </div> 
14.     <div class="last"></div> 
15. </div>   

从代码中可以看到，因为具体的页面还没有实现，所以所有链接目前都是空的，而“登录”、“免费注册”和“购物车”3个链接因为是调用脚本的，所以都设置了ID，其连接都为“#”。

在Site.css文件尾加入以下CSS代码：

1. ul,li{padding:0;margin:0;}  
2. li {list-style: none;}  
3. a{text-decoration:none}  
4. a:visited{text-decoration:none;}  
5. #navBar {height:41px;width:980px;margin:auto;display:block;overflow:hidden;}  
6. #navBar div{float:left;font-weight:bold;color:#fff;line-height:30px;}  
7. #navBar a{color:#fff;}  
8. #navBar a:hover{color:#f90;}  
9. #navBar a:visited {color:#fff;}  
10. #navBar .logo{width:178px;height:41px;background:transparent url(/images/top1.jpg) no-repeat}  
11. #navBar .nav{width:789px;height:41px;display:block;background:url(/images/top2.jpg) repeat-x;padding-top:10px;}  
12. #navBar .nav span{font-weight:bold;width:80px;display:block;text-align:center;float:left;}  
13. #navBar .nav .right{width:220px;height:41px;display:block;float:right;font-size:12px;line-height:24px;padding-top:8px;}  
14. #navBar .nav .right a{width:auto;font-weight:normal;}  
15. #navBar .last{width:13px;height:41px;background:transparent url(/images/top3.jpg) no-repeat} 

请注意CSS代码中的背景图片路径，都是以“/”开头的，表示是根目录下的“Images”目录下的文件。这样做的目的，无非是为了方便。

继续完成余下部分，在页面中添加如下代码：

1. <div class="wrap"> 
2.   <div class="left"> 
3.       <span class="header">分类浏览</span> 
4.       @{Html.RenderAction("LeftList", "Catalog", new { id = PageData["id"] });}  
5.       <br /> 
6.   </div> 
7.   <div id="main"> 
8.       @RenderBody()  
9.   </div> 
10.   <div class="clear"></div> 
11. </div> 
12. div id="footer">Ext公司 © Copyright 2011</div> 

因为左边的分类浏览是动态的，所以在第4行代码中，通过RenderAction方法调用Catalog控制器里的LeftList方法返回需要的分类信息，而“new {id=PageData["id "]}”参数的目的是允许页面通过具体的id控制列表。

第8行就是要插入的内容页。

最后在Site.css加入以下的css代码：

1. .wrap {width:980px;margin:10px auto 10px auto;}  
2. .wrap .clear{clear:both;}  
3. .left {float:left;width:160px;margin-right:10px;border:1px solid #d3d3d3;padding:1px;}  
4. .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;}  
5. .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;}  
6. .left a{color:#000;}  
7. .left a:hover{text-decoration:underline;}  
8. #main {float:right;width:800px}  
9. #footer {height:30px;width:980px;display:block;text-align:center;margin:auto;line-height:30px;border-top:1px solid #d2d2be} 

整个页面的框架基本就完成了。不过要测试框架，还需要做点事情。选择“Controllers”目录，然后添加一个“CatalogControl”的控制器。然后在控制器里添加一个LeftList操作，代码如下：

1. [ChildActionOnly]  
2. public ActionResult LeftList(string id)  
3. {  
4.     string condition = "";  
5.     if (id.Length > 0)  
6.     {  
7.         condition = "CategoryID.Substring(0,@1)==@0 && CategoryID.Length>@1";  
8.     }  
9.     else 
10.     {  
11.         condition = "CategoryID.Length<7";  
12.     }  
13.     ViewData["id"] = id;  
14.     ExtShopDataContext dc = new ExtShopDataContext();  
15.     var q = dc.T_Categories.Where(condition, id,id.Length).OrderBy(m => m.CategoryID);  
16.     return PartialView(q);  
17. } 

代码中，“ChildActionOnly”属性的目的是让这个操作不能通过浏览器直接访问，只能通过RenderAction调用。因为需要将id传递给视图，所以要讲id值保存在“ViewData["id"]”中，以方便视图调用。代码最后一句返回的不是“View”，而是“PartialView”，类似于返回用户自定义控件。

要使代码能正常运行，还需要在引用中加入以下语句：

1. using Extshop.Models;  
2. using System.Linq.Dynamic; 

代码第二句需要引用Linq的动态库，所以需要在项目中增加一个“App_LocalResources”目录，将“DynamicLibrary.cs”文件添加到该目录。

现在要为操作添加一个视图，在“LeftList”上单击鼠标右键，在菜单中选择“Add View”，将看到如图2所示的结果。

勾上“Create a strongly-typed view”，接着在“Model class”中选择“Extshop.Models.T_Categories”，然后勾上“Create as a partial view”，单击“Add”按钮完成操作。在“LeftList.cshtml”文件中加入以下代码：

1. @model IEnumerable<Extshop.Models.T_Categories>  
2.  
3. @foreach (var c in Model)  
4. {  
5.       
6.           
7.     if (c.CategoryID.Length == (((string)ViewData["id"]).Length+3))  
8.     {  
9.         <span><a href="@Url.Action(" mce_href="http://mce_host/@Url.Action("List", "Catalog", new { id = c.CategoryID })" style="font-weight:bold;" mce_style="font-weight:bold;">@c.Titel</a></span>  
10.     }  
11.     else 
12.     {  
13.         <span><a href="@Url.Action(" mce_href="http://mce_host/@Url.Action("List", "Catalog", new { id = c.CategoryID })">@c.Titel</a></span>  
14.     }  
15. } 

代码中，Model表示从控制器传入的数据。Url.Action方法的作用是构造一个链接，第1个参数代表要执行的操作，第2个参数表示使用那个控制器，第3个参数表示要传递的参数。

现在为项目增加一个“HomeController.cs”，然后为Index操作增加一个视图。最后修改“Index.cshtml”文件代码如下：

1. @{  
2.     ViewBag.Title = "Index";  
3.     PageData["id"] = "";  
4. }  
5.  
6. <h2></h2> 

因为是首页，分类浏览的分类要列根类，所以在页面中需要设置参数“PageData["id"]”为空字符串。

最后选中“Extshop”，在右键菜单“调试”的子菜单中选择“启用新实例”，即可在浏览器中看到如图1所示的结果。