Mvc示例代码之四Razor模板（二）

这节我们用一个实际的Action例子讲解一下mvc前后台传递数据。

前后台数据传递例子

public ActionResult GetList(string BigClassName,int? pageIndex)        {            int pageCount=0;            int recordCount=0;            string whereSql=" where 1=1 ";            if(!string.IsNullOrEmpty(BigClassName))            {                whereSql+=" and BigClassName='"+BigClassName+"'";            }            DataTable dt=AccessHelper.ExecutePager(pageIndex??1,15,"[ID]","*","News",whereSql," AddDate desc,Hits desc",out pageCount,out recordCount);            NewsS news = new NewsS();            news.FromDataTable(dt);            ViewBag.pageIndex = pageIndex;//记住当前页数            ViewBag.Pager = MakePager(BigClassName,pageCount, pageIndex ?? 1);//生成页码            BigClass_NewS bigNews = new BigClass_NewS();            bigNews.FromDataTable(EntityDMHelper.GetBigClass_New());            ViewBag.BigNews = bigNews;//文章列表            ViewBag.BigClassName = BigClassName;//文章类别            return View(news);        }              //生成页码       private string MakePager(string BigClassName,int pageCount, int pageIndex)        {            StringBuilder sbPager = new StringBuilder();            string url = string.Format("{0}?BigClassName={1}",Url.Action("GetList"),BigClassName);            if (pageIndex > 1)            {                sbPager.Append(string.Format("<a href='{0}'>首 页</a>  ",url));                sbPager.Append(string.Format("<a href=\"{1}&pageIndex={0}\">上一页</a>  ", pageIndex - 1, url));            }            else            {                sbPager.Append("<span style='color:gray;'>首 页</span>  ");                sbPager.Append("<span style='color:gray;'>上一页</span>  ");            }            if (pageIndex < pageCount)            {                sbPager.Append(string.Format("<a href=\"{1}&pageIndex={0}\">下一页</a>  ", pageIndex + 1, url));                sbPager.Append(string.Format("<a href='{1}&pageIndex={0}'>尾 页</a>", pageCount, url));            }            else            {                sbPager.Append("<span style='color:gray;'>下一页</span>  ");                sbPager.Append("<span style='color:gray;'>尾 页</span>");            }            return sbPager.ToString();        }

ViewBag实际上是一种向前台传递数据的方法。可以翻译为包裹。这个包裹是强类型的。在Mvc2中，我们用ViewData传递数据就需要类型转换；ViewBag可以直接使用。

在Action方法上点击右键，选择添加视图。在弹出页面中选择如下：

图一、创建强类型View

注意选中强类型视图，并且选择模板页。强类型选择时，要选中我们主要表现的数据。这是强类型数据可以用Model获取；如果像我们这次要表示很多数据，其他数据就要用ViewBag.xxx来获取。前台代码如下：

@model Entity.NewsS  @using Entity;@{    ViewBag.Title = "";    Layout = "~/Views/Shared/_Layout.cshtml";}<script type="text/javascript">    function SelectAll() {        if ($("#selectA").attr("checked")) {            $("input").attr("checked", true);        }        else {            $("input").attr("checked", false);        }    }    function delItem(id){        if(confirm("是否确定删除该条新闻？")){        $.post(" @Url.Action("Delete")?id="+id, function(data){            alert(data.msg);            if(data.flag){              window.location.href=window.location.href;            }         });              }    }    function delAll(){       var delIds="";       $.each($("input:checked").filter("input[name='id']"),function(i,item){          delIds+=$(item).val()+',';       });       if(delIds.length>1){          if(confirm("亲，你真的要删除这许多新闻吗？请慎重啊！")){             $.post(" @Url.Action("DeleteAll")?ids="+delIds, function(data){            alert(data.msg);            if(data.flag){              window.location.href=window.location.href;            }         });          }       }       else       {         alert('您未选中任何新闻');       }    }</script><div>  <div>     <a href="@Url.Action("GetList")" ><span  @if(string.IsNullOrEmpty(ViewBag.BigClassName??"")){@Html.Raw("style=\'color:red; font-weight:xx-blod;\'")}>全部文章</span></a>     @foreach (BigClass_New bigClass in ViewBag.BigNews)     {       <span> | </span><a href="@Url.Action("GetList")?BigClassName=@bigClass.BigClassName" @if ((ViewBag.BigClassName??"").Equals(bigClass.BigClassName))                                                                                            {@Html.Raw("style='color:red; font-weight:xx-blod;'")}>@bigClass.BigClassName</a>      }  </div>  <table class="table">    <thead>      <tr>      <th><input type="checkbox" id="selectA" onclick="SelectAll();" /></th><th>新闻标题</th><th>一级分类</th><th>二级分类</th><th>添加时间</th><th>点击次数</th><th>操作</th>      </tr>    </thead>    <tbody>    @foreach (News news in Model)    {      <tr>        <td><input type="checkbox" name="id" value="@news.ID.ToString()" /></td>        <td>@Html.Raw(news.Title)</td><td>@news.BigClassName</td><td>@news.SmallClassName</td>        <td>@news.AddDate.ToString("yyyy-MM-dd HH:mm:ss")</td><td>@news.Hits</td>        <td>          <a href="javascript:delItem('@news.ID.ToString()');">删除</a>           <a href="@Url.Action("Index")?id=@news.ID.ToString()">编辑</a>        </td>      </tr>    }    <tr>      <td colspan="6" align="right" >        @Html.Raw(ViewBag.Pager)              </td>      <td colspan="1" align="right">       <a href="javascript:delAll();">删除所有</a> |         <a href="@Url.Action("Index")">添加</a>               </td>    </tr>    </tbody>     </table></div>

看上面代码，使用model前先声明一下类型，注意是小写，使用时用大写：

@model Entity.NewsS  

而实际引用时，则用大写

@foreach (News news in Model)    {

另外要注意一下，我在输出页码时是这样写的：

 @Html.Raw(ViewBag.Pager)

因为页码是一些Html代码，如果直接写@ViewBag.Pager的话会输出<a href="'>第一页</a>类似的东东。即进行了转义。

我们模板页如下：

<!DOCTYPE html><html><head>    <title>新需能电源企业网站管理</title>    <link href="@Url.Content("~/Content/css/bootstrap.css")" rel="stylesheet" type="text/css" />    <link href="@Url.Content("~/Content/css/bootstrap-responsive.min.css")" rel="stylesheet" type="text/css" />    <link href="@Url.Content("~/Content/css/common.css")" rel="stylesheet" type="text/css" />    <link href="@Url.Content("~/Content/css/docs.css")" rel="stylesheet" type="text/css" />    <link href="@Url.Content("~/Content/css/prettify.css")" rel="stylesheet" type="text/css" />    <script src="@Url.Content("~/Scripts/jquery-1.7.2.min.js")" type="text/javascript"></script>    <script src="@Url.Content("~/Scripts/bootstrap.min.js")" type="text/javascript"></script>    <script src="@Url.Content("~/Scripts/jquery.validate.js")" type="text/javascript"></script>    <script src="@Url.Content("~/Scripts/jquery.validate-vsdoc.js")" type="text/javascript"></script>    <style type="text/css">       label.error       {        color:Red;        font-size:13px;        margin-left:125px;        padding-left:0px;       }       </style> </head><body data-spy="scroll" data-target=".subnav" data-offset="0"> <div class="navbar navbar-fixed-top">    <div class="navbar-inner">  <div class="container">    <a class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse">  <span class="icon-bar"></span>  <span class="icon-bar"></span>  <span class="icon-bar"></span></a><a class="brand" href="#">新需能电源企业网站</a><div class="nav-collapse">  <ul class="nav">    <li class="active"><a href="@Url.Action("GetList","Article")">首页</a><li>@*<li><a href="#">连接</a></li><li><a href="#">连接</a></li><li><a href="#">连接</a></li><li class="dropdown">  <a href="#" class="dropdown-toggle" data-toggle="dropdown">下拉<b class="caret"></b></a>  <ul class="dropdown-menu">    <li><a href="#">动作</a></li><li><a href="#">另一个动作</a></li><li><a href="#">其他动作</a></li><li class="divider"></li><li class="nav-header">导航头</li><li><a href="#">被间隔的连接</a></li><li><a href="#">另一个连接</a></li>  </ul></li>*@  </ul>   <ul class="nav pull-right">            <li><a href="components.html#" class="text-info">天行健，君子以自强不息  地势坤，君子以厚德载物</a></li>            <li><a href="@Url.Action("Logout","Home")">退出</a></li>           @* <li class="dropdown">              <a href="components.html#" class="dropdown-toggle" data-toggle="dropdown">下拉 <b class="caret"></b></a>              <ul class="dropdown-menu">        <li><a href="components.html#">动作</a></li>                <li><a href="components.html#">另一个动作</a></li>                <li><a href="components.html#">其他动作</a></li>                <li class="divider"></li>                <li class="nav-header">导航头</li>                <li><a href="components.html#">被间隔的链接</a></li>                <li><a href="@Url.Action("Logout","Home")">退出</a></li>*@              </ul>            </li>          </ul></div>  </div></div>  </div><div class="container"><section  id="javascript">   <div class="row">    <div class="span3" style="background:gray;height:620px;">      <ol>        <li><a href="@Url.Action("GetList","Article")">文章列表</a></li>        <li><a href="@Url.Action("Index","Article")">文章添加</a></li>        <li><a href="@Url.Action("Index","BigClass")">分类管理</a></li>        <li><a href="@Url.Action("Index","Feedback")">留言管理</a></li>      </ol>    </div>    <div class="span9">@RenderBody()</div>  </div></div></body></html>

上面子页中的代码就会替换

<div class="span9">@RenderBody()</div>

中的@RenderBody()占位符。

一般来说，我们会把每次都会引用的js文件，样式表等都放在模板页中。其实模板页就是为了代码的复用啊。

用Razor写HtmlHelper

最后我们来讲解一下Mvc中的一个重要部分HtmlHelper。Mvc3中可以在cshtml中用@helper关键字写HtmlHelper

我们摘抄出子页中一句

@news.AddDate.ToString("yyyy-MM-dd HH:mm:ss")

这种语句我们如何用HtmlHelper实现呢？可以这样做:

首先在项目中添加一个App_Code文件夹，在其中新建一个DateHelper.cshtml并添加如下代码：

@helper DisplayDate(DateTime date)
{
   @date.ToString("yyyy-MM-dd HH:mm:ss")
}
此时，可以我们摘抄出来的句子这样写：

@DateHelper.DisplayDate(news.AddDate)

如此，就简单的实现了一个HtmlHelper。聪明的读者们可能想到用这种方法写一个特殊的小控件。

页面效果如下：

图二、页面效果

好了，本节讲到这里。下一节我们讲一下用强类型提交数据。