11.6　网站前台功能实现

学习目标

学习网站后台的实现。

企业宣传网站前台涉及的页面并不是很多，功能主要涉及主页index、最新动态NewsList、产品展示ProdList、关于我们About、最新动态详细NewsDetail、产品展示详细ProdDetail，可以创建一个HomeController控制器，在其中创建功能方法及其对应的视图页面即可。

11.6.1　前台顶部top、底部foot用户控件页面

通常多数Web网站每个页面的顶部top信息和底部foot信息都是一样的，在ASP.NET中可以制作顶部top的用户控件和底部foot的用户控件来实现页面重用。而在MVC 4项目中，通常创建的用户控件都放在Views文件夹中。接下来以顶部top用户控件为例来说明创建用户控件的方法。

(1）项目Company_MvcApplication的“Views”文件夹，如图11-41所示。

(2）然后依次选择“添加”|"Web用户控件”命令，弹出如图11-42所示的对话框。

(3）这里设置文件名为“TopUserControl"，然后单击“确定”按钮，系统就会在Views文件夹中生成一个名称为TopUserControl.ascx的文件，即为创建好的Web用户控件页面，默认情况下页面代码如下。

<%@ Control Language="C#" AutoEventWireup="true"
CodeBehind="WebUserControl1.ascx.cs" Inherits="Company_
MvcApplication.Views.TopUserControl" %>

(4）接下来，就直接在下面编排显示效果就可以了，用户自定义的TopUserControl.ascx这个Web用户控件的完整源代码如下。

<%@ Control Language="C#" AutoEventWireup="true" CodeBehind="
TopUserControl.ascx.cs" Inherits="Company_MvcApplication.Views
.TopUserControl" %>
<%@ Import Namespace="Company_MvcApplication.Models" %>
<!--top-->
<div class="top">
    <div class="logo">
        <img src="<%:Common.GetConfig("logo") %>" />
    </div>
    <div class="company"><%: Common.GetConfig("company") %></div>
</div>
<!--top-->
<!--nav-->
<div class="nav">
    <ul>
       <li class="current" onclick="location.href='/Home/
       Index'">网站首页</li>
       <li class="common" onclick="location.href='/Home/
       NewsList'">最新动态</li>
       <li class="common" onclick="location.href='/Home/
       ProdList'">产品展示</li>
       <%
          for (int i = 4; i < 10; i++)
          {
       %>
          <li class="common"
          onclick="location.href='/Home/About/<%:i.ToString() %>'">
          <%:Common.GetFixRow(i)["title"] %></li>
       <%
          }
       %>
    </ul>
</div>
<!--nav-->

通过上述代码，容易看出，其实就是把前面讲的网站前台主页index.html设计中的顶部HTML代码复制到其中，然后把程序代码添加其中，使得其中显示的数据从数据库读取出来。用类似的方法可以创建FootUserControl.ascx，接下来也给出FootUserControl.ascx这个Web用户控件完整代码。

<%@ Control Language="C#" AutoEventWireup="true" CodeBehind="
FootUserControl.ascx.cs" Inherits="Company_MvcApplication.Views.
FootUserControl" %>
<%@ Import Namespace="Company_MvcApplication.Models" %>

<div style="width: 950px; background-color: #fff; margin-top: 10px;">
    <table cellpadding="0" cellspacing="0" style="width: 950px;">
       <tr>
          <td height="35" align="left" style="background-color:
          #2aa226; color: #fff; padding-left: 10px;">产品展示</td>
       </tr>
       <tr>
          <td>
              <!--下面是向左滚动代码-->
              <div id="colee_left" style="overflow: hidden;
              width: 940px;">
                   <table cellpadding="0" cellspacing="0"
              border="0">
                       <tr>
                           <td id="colee_left1" valign="top"
              align="center">
                              <table cellpadding="5" cellspacing
              ="5" border="0" id="mytable">
                                  <tr align="center">
       <%

       System.Data.DataTable table = Common.GetProdTable();
       for (int i = 0; i < table.Rows.Count; i++)
       {
       %>
       <td style="border: 1px solid #ccc; background-color: #eee">
       <p style="margin: 5px;">
<a href="/Home/ProdDetail/<%:table.Rows[i]["id"] %>" target="_blank">
<img src="<%:table.Rows[i]["pic"] %>" width="200" height="130"
border="0" /><a>
       </p>
       </td>
       <%
       }
       %>
                                  </tr>
                              </table>
                           </td>
                           <td id="colee_left2" valign="top"></td>
                       </tr>
                   </table>
              </div>
              <script>
                   //使用div时，请保证colee_left2与colee_left1是在
                       同一行上
                       var speed = 30//速度数值越大速度越慢
                       var colee_left2 = document.getElementById
                   ("colee_left2");
                   var colee_left1 = document.getElementById
                   ("colee_left1");
                   var colee_left = document.getElementById
                   ("colee_left");
                   colee_left2.innerHTML = colee_left1.innerHTML
                   function Marquee3() {
                       if (colee_left2.offsetWidth - colee_left.
                       scrollLeft <= 0)//offsetWidth是对象的可见
                             宽度
                                 colee_left.scrollLeft -= colee_left1.
                          offsetWidth//scrollWidth是对象的实际
                                内容的宽度，不包括边线宽度
                         else {
                           colee_left.scrollLeft++
                       }
                   }
                   var MyMar3 = setInterval(Marquee3, speed)
                   colee_left.onmouseover = function () { clear
                   Interval(MyMar3) }
                   colee_left.onmouseout = function () { MyMar3
                   = setInterval(Marquee3, speed) }
              </script>
              <!--向左滚动代码结束-->
          </td>
       </tr>
    </table>
  </div>
  <!--foot-->
  <div class="foot">
    <a href="/">网站首页</a> | <a href="/Home/About">关于我们</a> |友情链接：
    <select id="friend" name="friend" style="font-size:12px;"
    onchange="window.open($(this).val());">
       <option value="#">==选择友情链接==</option>
       <%
          System.Data.DataTable friendTable = Common.
          GetFriendTable();
          for (int i = 0; i < friendTable.Rows.Count; i++)
          {
              Response.Write("<option value='" + friendTable.Rows
              [i]["url"] + "'>" + friendTable.Rows[i]["title"] +
              "</option>");
          }
          %>
    </select>
    <br />
    <%=Common.GetFixRow(3)["content"].ToString () %>
    <br />
    版权所有：<%:Common.GetConfig("company") %><br />
    技术支持：<a href="http://www.haisitong.com/" target="_blank">
    北京海思通科技公司</a>
</div>
<!--foot-->

当然，也是由于每个页面下面都需要显示图片展示滚动效果，那就把这部分代码也放置到底部FootUserControl.ascx文件来完成，这样一来，其他页面直接调用TopUserControl和FootUserControl这两个用户控件就可以了，如果需要修改，就只需要修改对应的用户控件即可快速完成维护。

11.6.2　前台主页

前台主页的设计，首先要增加一个HomeController控制器，在其中添加Index方法，接下来给出Index方法完整源代码如下。

  public ActionResult Index()
       {
          ViewBag.PageTitle = Common.GetConfig("company");
          return View();
       }

然后就可以添加对应的视图Index.aspx，默认添加后显示的源带代码如下。

  <%@ Page Language="C#" Inherits="System.Web.Mvc.ViewPage<dynamic>" %>

  <!DOCTYPE html>

  <html>
  <head runat="server">
    <meta name="viewport" content="width=device-width" />
    <title>Index</title>
  </head>
  <body>
    <div>

    </div>
  </body>
  </html>

然后，在项目文件列表中，直接拖动TopUserControl.ascx和FootUserControl.ascx文件到视图Index.aspx页面中，拖动完毕后的代码如下。

<%@ Page Language="C#" Inherits="System.Web.Mvc.ViewPage<dynamic>" %><br/><br/>

<%@ Register Src="～/Views/FootUserControl.ascx" TagPrefix="uc1"
TagName="FootUser Control" %>
<%@ Register Src="～/Views/TopUserControl.ascx" TagPrefix="uc1"
TagName="TopUser Control" %>

<!DOCTYPE html>
<html>
<head runat="server">
    <meta name="viewport" content="width=device-width" />
    <title>Index</title>
</head>
<body>
    <uc1:TopUserControl runat="server" ID="TopUserControl" />

    <uc1:FootUserControl runat="server" ID="FootUserControl" />
</body>
</html>

然后再把其他功能代码静态代码从html中的index.html中复制到视图Index.aspx中，同时增加程序代码，让页面显示的数据源自数据库及ViewBag参数即可。视图Index.aspx完整脚本代码如下。

<%@ Page Language="C#" Inherits="System.Web.Mvc.ViewPage<dynamic>" %>

<%@ Import Namespace="Company_MvcApplication.Models" %>

<%@ Register Src="～/Views/FootUserControl.ascx" TagPrefix="uc1"
TagName="FootUser Control" %>
<%@ Register Src="～/Views/TopUserControl.ascx" TagPrefix="uc1"
TagName="TopUser Control" %>

<!DOCTYPE html>
<html>
<head runat="server">
    <meta name="viewport" content="width=device-width" />
    <title><%:ViewBag.PageTitle %></title>
    <link href="/Content/Style.css" rel="stylesheet" />
    <script src="/Scripts/jquery-1.7.2.min.js"></script>
</head>
<body>
    <uc1:TopUserControl runat="server" ID="TopUserControl" />
    <!--focus-->
    <div style="width: 950px; margin-top: 10px;">
       <iframe src="/Focus/Index" width="950" height="401"
       frameborder="0" scrolling="no"></iframe>
    </div>
  <!--focus-->

  <div style="width: 950px; margin-top: 10px;">
    <table cellpadding="0" cellspacing="0" style="width: 950px;">
       <tr>
          <td height="35" align="left" style="backgroundcolor: #2aa226; color: #fff; padding-left: 10px;">
          <%=Common.GetFixRow(1)["title"].ToString() %></td>
          <td height="35" align="right">&nbsp;</td>
          <td height="35" align="left" style="backgroundcolor: #2aa226; color: #fff; padding-left: 10px;">
          <%=Common.GetFixRow(2)["title"].ToString() %></td>
       </tr>
       <tr>
          <td width="666" align="left" valign="top">
              <table cellpadding="0" cellspacing="0<sup>"</sup>
              style="width: 100%; background-color: #fff;">
                   <tr>
                       <td align="left" valign="top" style="
                       padding: 5px; min-height: 200px;">
                           <%=Common.GetFixRow(1)
                           ["content"].ToString() %>
                       </td>
                       </tr>
                   </table>
              </td>
              <td width="12">&nbsp;</td>
              <td width="270" align="left" valign="top" style=
              "background-color: #fff; padding-left: 10px;">
                   <%=Common.GetFixRow(2)["content"].ToString() %>
              </td>

          </tr>
       </table>
    </div>
    <uc1:FootUserControl runat="server" ID="FootUserControl" />
</body>
</html>

其中的iframe引用的/Focus/Index地址，是专门为焦点图效果展示设计了一个FocusController，并增加了一个默认的Index方法，实际iframe中src访问的就是FocusController控制器中的Index方法，FocusController控制器的Index方法代码如下。

public class FocusController : Controller
    {
       //
       // GET: /Focus/

       public ActionResult Index()
       {
          return View();
       }
    }

然后增加对应的视图文件Index.aspx，接下来给出FocusController控制器中Index方法对应的视图文件Index.aspx的完整源代码。

<%@ Page Language="C#" Inherits="System.Web.Mvc.ViewPage<dynamic>" %>
<!DOCTYPE html>
<html>
<head runat="server">
    <meta name="viewport" content="width=device-width" />
    <title>Index</title>
    <link href="/Content/FocusImages/css.css" rel="stylesheet" />
<script src="/Content/FocusImages/jquery-1.9.1.min.js"
type="text/javascript"></script>
<script src="/Content/FocusImages/simplefoucs.js" type="text/
javascript"></script>
</head>
<body style="margin: 0px; padding: 0px;">
    <!--代码开始-->
    <div class="bannerbox">
       <div id="focus">
<ul>
          <li><a href="#"><img src="/Content/FocusImages/bn1.
          jpg" alt="" /></a></li>
<li><a href="#"><img src="/Content/FocusImages/bn2.jpg"
alt="" /></a></li>
<li><a href="#"><img src="/Content/FocusImages/bn3.jpg"
alt="" /></a></li>
<li><a href="#"><img src="/Content/FocusImages/bn4.jpg"
alt="" /></a></li>
</ul>
       </div>
    </div>
    <!--代码结束--></h6>
</body>
</html>

访问/Home/Index，就可以看到网站首页显示效果如图11-43所示。

11.6.3　最新动态

最新动态实际上就是新闻条展示，并且有分页功能，需要在HomeController控制器中增加新的方法NewsList，接下来给出方法NewsList的完整代码。

public ActionResult NewsList(int? id)
       {
          if (id == null)
          {
              id = Convert.ToInt32(db.GetValue("select top 1
              classid from tb_class where parentid=1 order by
              sortid asc"));
          }
          ViewBag.ClassID = id;
          //把新闻的类别信息传递过去ClassTable
          Hashtable ht = new Hashtable();
          ht.Add("@id",id);
          ViewBag.ClassTable = db.GetTable("select classid,class
          name from tb_class where parentid=1 order by sortid asc");
          ViewBag.ClassName = db.GetValue("select classname
          from tb_class where classid=@id", ht);
          ViewBag.InfoTable = db.GetTable("select id,title,dt
          from tb_info where classid=@id",ht);
          return View();
       }

当然也需要给NewsList方法增加一个对应的视图NewsList.aspx，接下来给出视图NewsList.aspx完整代码。

<%@ Page Language="C#" Inherits="System.Web.Mvc.ViewPage<dynamic>" %>

<%@ Import Namespace="Company_MvcApplication.Models" %>

<%@ Register Src="～/Views/TopUserControl.ascx" TagPrefix="uc1"
TagName="TopUser Control" %>
<%@ Register Src="～/Views/FootUserControl.ascx" TagPrefix="uc1"
TagName="FootUser Control" %>

<!DOCTYPE html>

<html>
<head runat="server">
    <meta name="viewport" content="width=device-width" />
    <title><%:ViewBag.ClassName %>-最新动态</title>
    <link href="/Content/Style.css" rel="stylesheet" />
    <script src="/Scripts/jquery-1.7.2.min.js"></script>
    <script>
       $(document).ready(function () {
          $(".classlist").hover(function () {
              $(this).css("background-color", "#ffffff");
          }, function () {
              $(this).css("background-color", "#eeeeee");
          });
       });
    </script>

</head>
<body>
    <%
       System.Data.DataTable table;
    %>
       <uc1:TopUserControl runat="server" ID="TopUserControl" />

    <!--banner-->
    <div style="width: 950px; margin-top: 10px;">
       <img src="/Content/Images/banner.jpg" width="950"
       height="133" />
    </div>
    <!--banner-->

    <div style="width: 950px; margin-top: 5px;">
       <table cellpadding="0" cellspacing="0" style="width: 950px;">
          <tr>
              <td width="666" align="left" valign="top">
                   <!--left-->
                   <table cellpadding="0" cellspacing="0"
                   style="width: 666px;">
                       <tr>
                           <td height="35" style="background-
                           color: #2aa226; color: #fff; padding-
                           left: 10px;">最新动态-<%:ViewBag.
                           ClassName %></td>
                       </tr>
                       <tr>
                           <td align="left" valign="top">
                              <div style="min-height: 365px;
                              width: 646px;" class="news">
                                  <ul>
    <%
    table = ViewBag.InfoTable;
    int recordcount = table.Rows.Count;
    int pagesize = 10;
    int pagecount = Convert.ToInt32(Math.Ceiling(Convert.
    ToDouble(recordcount) / Convert.ToDouble(pagesize)));
    string pagestring = Request.QueryString["page"];
    int page = Common.GetPage(pagestring, pagecount);

    int startindex = (page - 1) * pagesize;
    int endindex = pagesize * page - 1;
    if (endindex >= recordcount - 1) endindex = recordcount - 1;
    int minpageno = 5;//最少页号个数起始页号数
     int maxpageno = 10;//最多页号个数
     int endpageno;
    int startpageno = Common.GetStartPageno(minpageno, maxpageno,
    pagecount, page, out endpageno);
    for (int i = startindex; i <= endindex; i++)
    {
    %>
       <li>
       <div class="title">
<a href="/Home/NewsDetail/<%:table.Rows[i]["id"].ToString () %>">
<%:table.Rows[i]["title"].ToString () %></a>
    </div>
    <div class="date"><%:table.Rows[i]["dt"].ToString () %></div>
    </li>
<%
  }
%>
                              </ul>
<div style="margin-top: 10px; text-align: center">
<% Common.ShowPage(recordcount,pagesize, page, pagecount,
startpageno, endpageno, "?");%>
</div>
                           </div>
                       </td>
                   </tr>
              </table>
              <!--left-->
          </td>
          <td width="12">&nbsp;</td>
          <td width="270" align="left" valign="top">
              <!--right-->
              <table cellpadding="0" cellspacing="0"
              style="width: 270px;">
                   <tr>
                       <td height="35" style="background-color:
                       #2aa226; color: #fff; padding-left: 10px;"
                       >最新动态</td>
                   </tr>
                   <tr>
                       <td align="left" valign="top" style="
                       height: 150px; background-color:#fff;
                       font-size:12px; font-weight: bold;">
                           <%
                              table = ViewBag.ClassTable;
                              for (int i = 0; i < table.Rows.
                              Count; i++)
                              {
                           %>
<div class="classlist"
onclick="location.href='/Home/NewsList/<%:table.Rows[i]
["classid"].ToString() %>'">
<%:table.Rows[i]["classname"].ToString() %></div>
                           <%
                              }
                           %>
                       </td>
                   </tr>
              </table>
              <table cellpadding="0" cellspacing="0" style=
              "width: 270px;">
                   <tr>
  <td height="35" style="background-color: #2aa226; color: #fff;
padding-left: 10px;">
<%=Common.GetFixRow(2)["title"].ToString() %></td>
                       </tr>
                       <tr>
                           <td align="left" valign="top">
<div style="min-height: 150px; background-color: #fff; font-size:
12px; padding: 10px;">
    <%=Common.GetFixRow(2)["content"].ToString() %>
</div>
                           </td>
                       </tr>
                   </table>
                   <!--right-->
              </td>
          </tr>
       </table>
    </div>
    <uc1:FootUserControl runat="server" ID="FootUserControl" />
</body>
</html>

访问/Home/NewsList/即可查看相关类别的最新动态信息，如图11-44所示。

11.6.4　最新动态详细

最新动态详细信息，就在HomeController控制器中增加一个NewsDetail方法，接下来给出该方法的完整代码。

public ActionResult NewsDetail(int? id)
{
if (id==null)
{
       Response.Redirect("/");
}
//这里传递的id默认是指info表的id号
Hashtable ht = new Hashtable();
ht.Add("@id", id);
int classid = Convert.ToInt32(db.GetValue("select classid from tb_info where id=@id", ht));
ViewBag.InfoRow = db.GetRow("select id,title,content,pic,dt,author
from tb_info where id=@id", ht);
ViewBag.ClassTable = db.GetTable("select classid,classname from
tb_class where parentid=1 order by sortid asc");
ht = new Hashtable();
ht.Add("@classid",classid);
ViewBag.ClassName = db.GetValue("select classname from tb_class
where classid=@classid", ht);
return View();
}

当然，也需要给NewsDetail方法添加对应的视图文件NewsDetail.aspx，接下来给出该视图的完整代码。

<%@ Page Language="C#" Inherits="System.Web.Mvc.ViewPage<dynamic>" %>
<%@ Import Namespace="Company_MvcApplication.Models" %>
<%@ Register Src="~/Views/TopUserControl.ascx" TagPrefix="uc1"
TagName="TopUserControl" %>
<%@ Register Src="~/Views/FootUserControl.ascx" TagPrefix="uc1"
TagName="FootUserControl" %>
<!DOCTYPE html>
<html>
<head runat="server">
    <meta name="viewport" content="width=device-width" />
    <title><%:ViewBag.InfoRow["title"] %>-<%:ViewBag.ClassName %>-
    最新动态</title>
    <link href="/Content/Style.css" rel="stylesheet" />
    <script src="/Scripts/jquery-1.7.2.min.js"></script>
    <script>
       $(document).ready(function () {
          $(".classlist").hover(function () {
              $(this).css("background-color", "#ffffff");
          }, function () {
              $(this).css("background-color", "#eeeeee");
          });
       });
    </script>
</head>
<body>
    <%
       System.Data.DataTable table;
    %>
    <uc1:TopUserControl runat="server" ID="TopUserControl" />
    <!--banner-->
    <div style="width: 950px; margin-top: 10px;">
       <img src="/Content/Images/banner.jpg" width="950" height=
       "133" />
    </div>
    <!--banner-->
    <div style="width: 950px; margin-top: 5px;">
       <table cellpadding="0" cellspacing="0" style="width: 950px;">
          <tr>
              <td width="666" align="left" valign="top">
                   <!--left-->
                   <table cellpadding="0" cellspacing="0"
                   style="width: 666px;">
                       <tr>
                           <td height="35" style="background-
                           color: #2aa226; color: #fff; padding
                           -left: 10px;">最新动态-<%:ViewBag.
                           ClassName %></td>
                       </tr>
                       <tr>
                           <td align="left" valign="top">
                              <div style="min-height: 365px;
                              width: 646px; line-height:
                              25px;" class="news">
                                  <div style="font-size: 24px;
                                  color: #2aa226; font-weight:
                                  normal; height: 35px; text-align:
                                  center; line-height: 35px;">
                                        <%:ViewBag.InfoRow
                                         ["title"] %>
                                  </div>
    <div style="border-bottom: 1px dotted #cccccc; color: #aaaaaa;
    text-align: center;">
    时间：<%:ViewBag.InfoRow["dt"] %>来源：<%:ViewBag.InfoRow
    ["author"] %>
    </div>
    <%
    if (ViewBag.InfoRow["pic"] != "/Content/Images/nopic.jpg")
    {
    %>
    <div style="text-align:center;margin:10px;">
       <img src=" <%:ViewBag.InfoRow["pic"] %>" onload="if (this.
       width>500) this.width=500;" />
    </div>
    <%
    }
    %>
    <%=ViewBag.InfoRow["content"] %>
  </div>
                       </td>
                   </tr>
              </table>
              <!--left-->
          </td>
          <td width="12">&nbsp;</td>
          <td width="270" align="left" valign="top">
              <!--right-->
              <table cellpadding="0" cellspacing="0" style
              ="width: 270px;">
                   <tr>
                       <td height="35" style="background-
                       color: #2aa226; color: #fff;padding
                       -left: 10px;">最新动态</td>
                   </tr>
                   <tr>
                       <td align="left" valign="top" style
                       ="height: 150px; background-color:#
                      fff; font-size: 12px; font-weight: bold;">
    <%
       table = ViewBag.ClassTable;
       for (int i = 0; i < table.Rows.Count; i++)
       {
    %>
       <div class="classlist"
       onclick="location.href='/Home/NewsList/<%:table.Rows[i]
       ["classid"].ToString() %>'">
       <%:table.Rows[i]["classname"].ToString() %>
       </div>
    <%
       }
    %>
                           </td>
                       </tr>
                   </table>
                   <table cellpadding="0" cellspacing="0" style<br/>
                   ="width: 270px;">
                       <tr>
                           <td height="35" style="background-
                           color: #2aa226; color: #fff; padding
                           -left: 10px;"><%=Common.GetFixRow(2)
                           ["title"].ToString() %></td>
                       </tr>
                       <tr>
                           <td align="left" valign="top">
                              <div style="min-height: 150px;
                              background-color: #fff; font-size:
                              12px; padding: 10px;">
                                  <%=Common.GetFixRow(2)
                                  ["content"].ToString() %>
                              </div>
                           </td>
                       </tr>
                   </table>
                   <!--right-->
              </td>
          </tr>
       </table>
    </div>
    <uc1:FootUserControl runat="server" ID="FootUserControl" />
</body>
</html>

然后在/Home/ProdList/中单击任意标题即可查看标题的详细信息，如图11-45所示。

11.6.5　产品展示

产品展示功能ProdList和最新动态NewsList的实现基本一致，只是视图展示以图片风格展示，而不是以新闻条的模式展示，读者可以参照最新动态功能模仿实现。

11.6.6　产品展示详细

产品展示详细ProdDetail和最新动态详细NewsDetail实现基本一致，读者可以参照最新动态详细功能模仿实现。

11.6.7　关于我们

其实，关于我们、公司荣誉、最新优惠、人才招聘、广告服务、联系我们都是属于单个页面展示信息，获取的是tb_fix表中的标题title和详细内容content中的数据信息。

于是，可以在HomeController控制器中增加一个带参数的About方法，完整代码如下。

public ActionResult About(int? id)
{
  if (id == null)
  {
     Response.Redirect("/");
  }
  ViewBag.FixID = id;
  ViewBag.ClassTable = db.GetTable("select classid,classname from
  tb_class where parentid=1 order by sortid asc");
  return View();
}

然后，再添加对应的视图About.aspx文件，接下来给出该视图文件的完整代码。

<%@ Page Language="C#" Inherits="System.Web.Mvc.ViewPage<dynamic>" %>
<%@ Import Namespace="Company_MvcApplication.Models" %>
<%@ Register Src="～/Views/TopUserControl.ascx" TagPrefix="uc1"
TagName="TopUserControl" %>
<%@ Register Src="～/Views/FootUserControl.ascx" TagPrefix="uc1"
TagName="FootUserControl" %>
<!DOCTYPE html>
<html>
<head runat="server">
    <meta name="viewport" content="width=device-width" />
    <title><%:Common.GetFixRow(ViewBag.FixID)["title"] %></title>
    <link href="/Content/Style.css" rel="stylesheet" />
    <script src="/Scripts/jquery-1.7.2.min.js"></script>
    <script>
       $(document).ready(function () {
          $(".classlist").hover(function () {
              $(this).css("background-color", "#ffffff");
          }, function () {
              $(this).css("background-color", "#eeeeee");
          });
       });
    </script>
</head>
<body>
    <%
       System.Data.DataTable table;
    %>
    <uc1:TopUserControl runat="server" ID="TopUserControl" />
    <!--banner-->
    <div style="width: 950px; margin-top: 10px;">
       <img src="/Content/Images/banner.jpg" width="950" height
       ="133" />
    </div>
    <!--banner-->

    <div style="width: 950px; margin-top: 5px;">
       <table cellpadding="0" cellspacing="0" style="width: 950px;">
          <tr>
              <td width="666" align="left" valign="top">
                   <!--left-->
                   <table cellpadding="0" cellspacing="0" style
                   ="width: 666px;">
                       <tr>
                           <td height="35" style="background-
                           color:#2aa226; color: #fff; padding
                           -left: 10px;"><%:Common.GetFixRow
                           (ViewBag.FixID)
                              ["title"] %></td>
                       </tr>
                       <tr>
                           <td align="left" valign="top">
<div style="min-height: 365px; width: 646px; line-height: 25px;"class
="news">
<div style="font-size: 24px; color: #2aa226; font-weight: normal;
height: 35px; text-align: center; line-height: 35px;"><%:Common.
GetFixRow(ViewBag.FixID)["title"] %></div>
    <%=Common.GetFixRow(ViewBag.FixID)["content"] %>
</div>
                       </td>
                   </tr>
              </table>
              <!--left-->
          </td>
          <td width="12">&nbsp;</td>
          <td width="270" align="left" valign="top">
              <!--right-->
              <table cellpadding="0" cellspacing="0" style
              ="width: 270px;">
                   <tr>
                       <td height="35" style="background-
                       color: #2aa226; color: #fff; padding
                       -left: 10px;">最新动态</td>
                   </tr>
                   <tr>
                       <td align="left" valign="top"
                       style="height: 150px; background-
                       color:#fff; font-size: 12px; font-
                       weight: bold;">
    <%
    table = ViewBag.ClassTable;
    for (int i = 0; i < table.Rows.Count; i++)
    {
    %>
<div class="classlist"
onclick="location.href='/Home/NewsList/<%:table.Rows[i]["classid"].
ToString() %>'">
<%:table.Rows[i]["classname"].ToString() %></div>
    <%
    }
    %>
                       </td>
                   </tr>
              </table>
              <table cellpadding="0" cellspacing="0" style
              ="width: 270px;">
                   <tr>
                       <td height="35" style="background-
                       color: #2aa226; color: #fff; padding-
                       left: 10px;"><%=Common.GetFixRow(2)
                      ["title"].
                           ToString() %></td>
                   </tr>
                   <tr>
                       <td align="left" valign="top">
                           <div style="min-height: 150px;
                           background-color: #fff; font-
                           size: 12px; padding: 10px;">
                              <%=Common.GetFixRow(2)
                              ["content"].ToString() %>
                           </div>
                       </td>
                   </tr>
              </table>
              <!--right-->
          </td>
       </tr>
    </table>
  </div>
    <uc1:FootUserControl runat="server" ID="FootUserControl" />
</body>
</html>

访问企业网站导航中的关于我们，显示效果如图11-46所示。