MVC4制作网站教程第四章 前台栏目浏览4.5

三、栏目
3.4前台栏目浏览 
网站的前台页面，顶部要能显示根栏目，点击栏目名称进入栏目中要子栏目导航，栏目页中还必须有当前路径。先做这三部分 
1）、根栏目 
打开【categorycontroller】，添加[partialroot]action 

/// <summary>
  /// 根栏目
  /// </summary>
  /// <returns></returns>
  public actionresult partialroot()
  {
   return view(categoryrsy.root());
  }

点击右键添加视图模型类选category，支架模板选list，勾上创建分部视图，确定。
 除顶部@model ienumerable<ninesky.models.category>外删除其他代码，自己手动写代码如下： 

@model ienumerable<ninesky.models.category>

@html.actionlink("网站首页", "index", "home")@foreach (var item in model)
           {
 @html.actionlink(item.name, "index", "category", new { id = item.categoryid }, null)
           }

2）、子栏目导航 
在【categorycontroller】中添加[partialchildren(int id)]action 

/// <summary>
  /// 子栏目
  /// </summary>
  /// <param name="id">栏目id</param>
  /// <returns></returns>
  public actionresult partialchildren(int id)
  {
   return view(categoryrsy.children(id));
  }

右键添加分部视图

@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）、路径
 在【categorycontroller】中添加[partialpath(int id)]action 

/// <summary>
  /// 栏目路径
  /// </summary>
  /// <param name="id">当前栏目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);
  }

右键添加分部视图 

@model ienumerable<ninesky.models.category>

您现在的位置：@html.actionlink("网站首页", "index", "home")@foreach (var item in model)
            {
 @html.raw(">>") @html.actionlink(item.name, "index", "category", new { id = item.categoryid }, null)
 }

马上可以看到效果了

打开layout\_layout.cshtml布局页，在顶部导航位置<div class="nav"></div>中添加写上@html.action("partialroot","category") 

打开http://localhost:52270/category/manageadd，添加一下几个栏目。

 

运行一下看看网站首页

有效果了！
开始做index索引页
在【categorycontroller】中添加[index(int id)]action 

如果栏目type=2则跳转到navigation，否则返回categoryview视图。 

/// <summary>
  /// 索引
  /// </summary>
  /// <param name="id">栏目id</param>
  /// <returns></returns>
  public actionresult index(int id)
  {
   var _category = categoryrsy.find(id);
   if (_category == null)
   {
    error _e = new error { title = "错误", details = "指定的栏目不存在", cause = "你访问的栏目已经删除", solution = server.urlencode("<li>返回<a href='" + url.action("index", "home") + "'>网站首页</a></li>") };
    return redirecttoaction("error", "prompt", _e);
   }
   if (_category.type == 2) return redirect(_category.navigation);
   return view(_category.categoryview,_category);
  }

添加强类型视图 

@model ninesky.models.category

@{
 viewbag.title = "栏目默认页";
 layout = "~/views/layout/_layout.cshtml";
}
<div class="banner">
 <img src="~/skins/default/images/banner.jpg" />
</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>

这个就是栏目的默认页面了。 

复制一份index.cshtml命名为indexsingle.cshtml作为单页栏目的视图 

再复制一份index.cshtml命名为indexabout.cshtml作为关于我们栏目的专用视图，并修改相应代码 

@model ninesky.models.category

@{
 viewbag.title = "关于我们";
 layout = "~/views/layout/_layout.cshtml";
}
<div class="banner">
 <img src="~/skins/default/images/banner.jpg" />
</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 class="singlepage">
  <div class="title">@model.name about </div>
  <p>
   <b>ninesky</b>® 是洞庭夕照学习mvc的一个项目。是想通过完成一个网站来不断的督促自己、不断的学习和实践。最终希望可以写出一个可简洁、易用的网站。
  </p>
  <p>目的：学习mvc4</p>
  <p>目标：简单、易用、实用</p>
 </div>
</div>

打开“关于我们”的资料页面http://localhost:52270/category/managedetails/6

修改栏目视图 

运行看下效果

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持。