Asp.net MVC 3 인스턴스 학습의 ExtShop(둘) - 마스터 페이지 만들기
6915 단어 ASP/ASP.NET
그림 1
모판 페이지를 수정하기 전에 프로젝트 루트 디렉터리에 'Images' 디렉터리를 추가하여 프로젝트 그림을 저장합니다.솔루션 자원 관리자에서 "Extshop"을 선택한 다음 "추가"를 오른쪽 단추로 누르고 하위 메뉴에서 "새 폴더"를 선택한 다음 폴더의 이름을 "Images"로 변경하고 프로젝트 그림을 "Images"파일에 추가합니다.
이전 블로그에서 알 수 있듯이 기본적인 모판 페이지는 이다Layout.cshtml 파일입니다. 따라서 이 파일을 수정해야 합니다.편집기에서 파일을 열고 Site를 엽니다.css 파일.
먼저 수정해야 할 것은 사이트입니다.css, body 정의의 font-size를 14px로 수정하고 다음 두 줄의 코드를 추가합니다.
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 값을 "ViewData ["id "]"에 저장해서 보기 호출을 편리하게 해야 합니다.코드의 마지막 문장은'View'가 아니라'PartialView'로 사용자 정의 컨트롤을 되돌려주는 것과 유사하다.
코드를 제대로 실행하려면 참조에 다음 문을 추가해야 합니다.
using Extshop.Models; using System.Linq.Dynamic;
코드 두 번째 문장은 Linq의 동적 라이브러리를 인용해야 하기 때문에 프로젝트에'App LocalResources'디렉터리를 추가하고'다이너믹Library.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 방법의 역할은 링크를 구성하는 것이다. 첫 번째 파라미터는 실행할 동작을 나타내고, 두 번째 파라미터는 그 컨트롤러를 사용하며, 세 번째 파라미터는 전달할 파라미터를 나타낸다.
이제 항목에 대해 "Home Controller.cs"를 추가한 다음 Index 작업에 대한 뷰를 추가합니다.마지막으로 Index.cshtml 파일 코드를 다음과 같이 수정합니다.
@{
ViewBag.Title = "Index";
PageData["id"] = "";
}
첫 페이지이기 때문에 분류 탐색의 분류는 루트 클래스를 열거해야 하기 때문에 페이지에 파라미터'PageData["id"]'를 빈 문자열로 설정해야 합니다.
마지막으로 "Extshop"을 선택하고 오른쪽 단추 메뉴 "디버깅"의 하위 메뉴에서 "새 실례 사용하기"를 선택하면 브라우저에서 그림1과 같은 결과를 볼 수 있습니다.
좋은 웹페이지 즐겨찾기
