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。聪明的读者们可能想到用这种方法写一个特殊的小控件。

页面效果如下：



图二、页面效果
好了，本节讲到这里。下一节我们讲一下用强类型提交数据。