Asp.net MVC 3 instance learning extshop (2) -- create a master page

The role of the master page is to centralize the public elements of the entire website for easy maintenance. In the master page of this instance, the content of the master page is mainly 1. The navigation bar on the top of the page, the Category column on the left, and the copyright information at the bottom of the page are centralized.

Figure 1

Before modifying the master page, add an "Images" directory to the project root directory to store project images. In Solution Explorer, select "extshop", right-click and select "add", select "new folder" from the sub-menu, and change the folder name to "Images ", add the project image to the "Images" file.

From previous

As you can see in the blog, the default master page is the _ layout. cshtml file, so we need to modify the file. Open the file in the editor, and open the site.css file at the same time.

First, modify site.css, change the font-size in the body definition to 14px, and add the following two lines.Code:

 
Margin: 0; padding: 0;
 

 

Switch to the _ layout. cshtml file, complete the top navigation bar, and add the following code to @ renderbody:

<Div id = 'navbar'> <Div class = "logo"> </div> <Div class = "nav"> <span> <a href = "/" mce_href = ""> homepage </a> </span> <a href = ""> discount Information </a> </span> <a href =" "> Contact Us </a> </span> <Div class =" right "> <a href =" # "mce_href =" # "id =" login "> log on </A> | <a href = "#" mce_href = "#" id = "Reg"> free registration </a> | <a href = "#" mce_href = "# "id =" cart "> shopping cart </a> | <a href =" "> help </a> </div> <Div class =" last"> </div>
 

The Code shows that all links are empty because the specific page has not been implemented, the three links "login", "free registration", and "Shopping Cart" are called scripts, so the IDs are set, and their connections are "#".

Add the following CSS code at the end of the site.css file:

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: 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}
 

 

Note that the background image paths in CSS code all start with "/", indicating files in the "Images" directory under the root directory. The purpose of doing so is nothing more than convenience.

Complete the remaining parts and add the following code to the page:

 
<Div class = "Wrap"> <Div class = "Left"> <SPAN class = "Header"> classified browsing </SPAN >@{ HTML. renderaction ("leftlist", "catalog", new {id = pagedata ["ID"]});} <br/> </div> <Div id = "Main"> @ renderbody () </div> <Div class = "clear"> </div> <Div id = "footer"> ext company copyright 2011 </div>
 

 

Because the classification browsing on the left is dynamic, the leftlist method in the catalog controller is called using the renderaction method in the 4th line code to return the required classification information.New

{Id = pagedata ["ID

The "]}" parameter allows the page to control the list by specific ID.

Row 3 is the page of content to be inserted.

Add the following CSS code to site.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}
 

 

The framework of the entire page is basically complete. However, to test the framework, you still need to do something. Select the "controllers" directory and add a "catalogcontrol" controller. Then add a leftlist operation to the controller. The Code is as follows:

 

[Childactiononly] <br/> Public actionresult leftlist (string ID) <br/>{< br/> string condition = ""; <br/> If (ID. length> 0) <br/>{< br/> condition = "categoryid. substring (0, @ 1) ==@0 & categoryid. length >@1 "; <br/>}< br/> else <br/>{< br/> condition =" categoryid. length <7 "; <br/>}< br/> viewdata [" ID "] = ID; <br/> extshopdatacontext Dc = new extshopdatacontext (); <br/> var q = dc. t_categories.where (condition, ID, id. length ). orderby (M => M. categoryid); <br/> return partialview (Q); <br/>}< br/>

 

In the code, the "childactiononly" attribute aims to prevent direct access to this operation through a browser and can only be called through renderaction. Because you need to pass the ID to the view, you need to save the id value in "viewdata [" ID "]" to facilitate view calling. The last sentence of the Code does not return "View", but "partialview", which is similar to returning a user-defined control.

To make the code run properly, add the following statement to the reference:

 

Using extshop. Models; <br/> using system. LINQ. Dynamic; <br/>

 

The second sentence of the code needs to reference the dynamic library of LINQ, so you need to add a "app_localresources" directory in the project and add the "dynamiclibrary. cs" file to this directory.

Now you want to add a view for the operation. Right-click "leftlist" and select "add view" from the menu. The result shown in 2 is displayed.

 

Figure 2

 

Check "Create a stronugly-typed View", and then click "model"
Select "extshop. Models. t_categories" in class, and then check "create as a partial
View, and click Add to complete the operation. Add the following code to the "leftlist. cshtml" file:

 

 

@ Model ienumerable <extshop. models. t_categories> </P> <p> @ foreach (var c in Model) <br/>{</P> <p> If (C. categoryid. length = (string) viewdata ["ID"]). length + 3) <br/>{< br/> <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> <br/>}< br/> else <br/> {<br/> <span> <a href = "@ URL. action ("mce_href =" http: // mce_host/@ URL. action ("list", "catalog", new {id = C. categoryid}) "> @ C. titel </a> </span> <br/>}< br/>

 

In the code, model indicates the data transmitted from the Controller. The URL. Action method constructs a link. The second parameter represents the operation to be executed, the second parameter represents the controller, and the second parameter represents the parameter to be passed.

Add "homecontroller. cs" to the project, and then add a view for the index operation. Finally, modify the "index. cshtml" File Code as follows:

 
@ {Viewbag. Title = "Index"; pagedata ["ID"] = "" ;}< H2> </H2>
 

 

Because it is the home page, the category of category browsing requires a column root class, so you need to set the parameter "pagedata [" ID "]" on the page to an empty string.

Finally, select "extshop" and select "enable new instance" in the context menu "debug" to view the result 1 in the browser.