MVC4 Production Website Tutorial Fourth chapter Front column browsing 4.5_ practical skills

Third, column
3.4 Front Section View
Site's front page, the top to be able to display the root column, click the column name into the column to the sub-column navigation, the section page must also have the current path. Do these three parts first
1), root column
Open "Categorycontroller" and add [partialroot]action

<summary>
  ///root column
  ///</summary>
  ///<returns></returns>
  Public ActionResult Partialroot ()
  {return
   View (Categoryrsy.root ());
  }

Right-click to add view Model class Select category, bracket template select list, hook up to create a partial view, OK.
In addition to removing other code from the top @model ienumerable<ninesky.models.category>, write your code manually as follows:

@model the ienumerable<ninesky.models.category>

@Html. ActionLink ("Home", "Index", "a") @foreach (Var item In Model)
           {
 @Html. ActionLink (item. Name, "Index", "Category", new {id = Item. CategoryID}, NULL)
           }

2), Sub-column navigation
add [Partialchildren (int id)]action in ' Categorycontroller '

<summary>
  ///
  ///</summary>
  ///<param name= "id" > column id</param>
  /// <returns></returns> public
  actionresult partialchildren (int id)
  {return
   View ( Categoryrsy.children (ID));
  

Right-click to add partial view

@model ienumerable<ninesky.models.category>

<ul>
 @foreach (var item in model)
 {
  <li> @Html. ActionLink (item. Name, "Index", "Category", new {id = Item. CategoryID}, NULL) </li>
 }
</ul>

3), Path
add [Partialpath (int id)]action in ' Categorycontroller '

<summary>
  ///column path
  ///</summary>
  ///<param name= "id" > Current column id</param>
  / <returns></returns> public
  actionresult partialpath (int id)
  {
   list<category> _path = new list<category> ();
   var _category = categoryrsy.find (ID);
   while (_category!= null)
   {
    _path. Insert (0, _category);
    _category = Categoryrsy.find (_category. ParentID);  
   }
   Return View (_path);
  }

Right-click to add partial view

@model ienumerable<ninesky.models.category>

You are here: @Html. ActionLink ("Home", "Index", "a") @foreach ( VAR item in Model
            {
 @Html. Raw (">>") @Html. ActionLink (item. Name, "Index", "Category", new {id = Item. CategoryID}, NULL)
 }

We can see the effect right away.

Open the Layout\_layout.cshtml layout page, add write @html.action to the top navigation position <div class= "NAV" ></div> ("Partialroot", "Category" )

Open http://localhost:52270/Category/ManageAddand add a few columns.

Run a look at the site home page

It works!
Start making index pages
add [Index (int id)]action in ' Categorycontroller '

If the column type=2 jumps to navigation, otherwise return Categoryview view.

<summary>
  ///index
  ///</summary>
  ///<param name= "id" > column id</param>
  /// <returns></returns> public
  actionresult Index (int id)
  {
   var _category = categoryrsy.find (ID) ;
   if (_category = = null)
   {error
    _e = new Error {Title = "error", Details = "The specified column does not exist", cause = "The column you visited has been deleted", Solutio n = Server.URLEncode ("<li> return <a href= '" + url.action ("Index", "Home") + "' > Homepage </a></li>")};< C11/>return redirecttoaction ("Error", "Prompt", _e);
   }
   if (_category. Type = = 2) return Redirect (_category. Navigation);
   Return View (_category. categoryview,_category);
  }

Add Enhanced Type View

@model Ninesky.Models.Category

@{
 viewbag.title = "column default page";
 Layout = "~/views/layout/_layout.cshtml";
}
<div class= "banner" >
 
</div>
<div Class= "Left" >
 <div class= "Children" >
  <dl>
   <dt> @Model .name</dt>
   <dd> @Html. Action ("Partialchildren", "Category", new {id = Model.categoryid}) </dd>
  </dl>
 </div>
</div>
<div class= "content_cnt" >
 <div class= "path" >@ Html.action ("Partialpath", "Category", new {id = Model.categoryid}) </div>
</div>

This is the default page of the column.

Copy a index.cshtml named indexsingle.cshtml as a single page column view

Duplicate a copy of index.cshtml named indexabout.cshtml as a private view of our column, and modify the corresponding code

 @model Ninesky.Models.Category @{viewbag.title = "About Us";
Layout = "~/views/layout/_layout.cshtml"; } <div class= "banner" >  </div> <div class= "left" > <div class= "Children" > <dl> <dt> @Model .name</dt> <dd> @Html. Action ("Partialchil dren "," Category ", new {id = Model.categoryid}) </dd> </dl> </div> </div> <div class=" Conte Nt_cnt "> <div class=" path "> @Html. Action (" Partialpath "," Category ", new {id = Model.categoryid}) </div> & Lt;div class= "Singlepage" > <div class= "title" > @Model. Name about </div> <p> <b>ninesky< /b>® is a project for studying MVC at sunset in the dongting. is to complete a website to constantly urge themselves, continuous learning and practice.
  Finally hope to write a concise, Easy-to-use website. </p> <p> Purpose: Learning mvc4</p> <p> Goals: Simple, easy-to-use, practical </p> </div> </div> 

Open the "About Us" information page HTTP://LOCALHOST:52270/CATEGORY/MANAGEDETAILS/6

Modify Column View

Run look at the effect

The above is the entire content of this article, I hope to help you learn, but also hope that we support the cloud habitat community.