前言
对于习惯了 ASP.NET MVC Razor 模板引擎的人来说，比如我，一直在寻找前端 Javascript 端的 Razor 模板工具。这之前，我也了解到很多Javascript 端的模板工具，比如：jquery.tmpl、Knockout、front.js 等等。园子里很多大牛推荐 Knockout，比如：蒋金楠（Artech）老师、汤姆大叔（TomXu）。个人觉得 Knockout 太强大了，强大到入门都是那么的困难，我看了官网上的几个例子，最后还是放弃了，觉得太复杂了，杀鸡还需要用牛刀吗？且并不是所有的“绑定”都要交给前端的，比如 Hello World 那个例子，FirstName、LastName、FullName 这些本该由服务器端直接输出的东西，何必又要交给 Knockout 呢。团队成员入门难就不适合了（PS：也许是我本人太笨，自黑一下，呵呵...）。在园子里搜了 kino.razor 一下，正好还没有人来写文来介绍它，于是就有了本文。kino.razor 正如官方的介绍：
kino.razor - an easy to use,razor style javascript template tool
它是一个简单易用、Razor 风格的 Javascript 模板工具。用过之后感觉确实如此。
开始实战
1. 首先我们来建立一个名为 Message 的模型类。
public class Message { public Guid SenderKey { get; set; } public int SenderUserId { get; set; } public string SenderName { get; set; } public string Content { get; set; } private DateTime _date { get; set; } public DateTime Date { get { return _date; } set { _date = value; _formattedDate = _date.ToLongDateString() + " " + _date.ToLongTimeString(); } } private string _formattedDate; public string FormattedDate { get { return _formattedDate; } } }
2. 建立一个名为 MessageRepository 的数据访问类。
public class MessageRepository { // 为了演示，不保存到数据库了 private static readonly IList<Message> dbMessage = new List<Message>() { new Message{ SenderKey = Guid.NewGuid(), SenderUserId = 1, SenderName = "张学友", Date = DateTime.Now, Content = "你好，请问今天星期几？" }, new Message{ SenderKey = Guid.NewGuid(), SenderUserId = 2, SenderName = "李世民", Date = DateTime.Now, Content = "今天真的很冷！" }, new Message{ SenderKey = Guid.NewGuid(), SenderUserId = 3, SenderName = "王大山", Date = DateTime.Now, Content = "吃早饭了么？" }, new Message{ SenderKey = Guid.NewGuid(), SenderUserId = 4, SenderName = "刘德华", Date = DateTime.Now, Content = "要不我们今晚去游泳吧？" }, new Message{ SenderKey = Guid.NewGuid(), SenderUserId = 5, SenderName = "郭富城", Date = DateTime.Now, Content = "双手的温柔是你的错！" }, }; public static IList<Message> GetAll() { return dbMessage; } public static Message AddMessge(int senderUserId, string senderName, string content) { var message = new Message { SenderKey = Guid.NewGuid(), SenderUserId = senderUserId, SenderName = senderName, Date = DateTime.Now, Content = content }; dbMessage.Add(message); return message; } }
为了演示，就增加了 2 个方法，一个得到所有的消息，另一个插入消息，不保存到数据库了。
3. 建立一个名为 SysConst 的系统常用的资源
/// <summary> /// 系统常用的资源 /// </summary> public class SysConst { /// <summary> /// 默认的发送者ID /// </summary> public static readonly int DefaultSenderUserId = 3; /// <summary> /// 默认的发送者姓名 /// </summary> public static readonly string DefaultSenderUserName = "王大山"; }
4. 建立 Default.aspx 页面或者 View.cshtml
首先在 Default.aspx.cs 页面中获取所有的消息，保存在 Messages 属性中，供 Default.aspx 页面调用。PS：没有用服务器控件，才出此策。
public partial class Default : System.Web.UI.Page { /// <summary> /// 保存获取的消息集合，供页面调用 /// </summary> protected IList<Message> Messages { get; private set; } protected void Page_Load(object sender, EventArgs e) { if(!IsPostBack) { LoadData();// 调用加载数据的方法 } } /// <summary> /// 加载数据 /// </summary> private void LoadData() { Messages = MessageRepository.GetAll(); } }
5. 在页面引用 css 和 js
<link href="css/bootstrap.min.css" rel="stylesheet" type="text/css" /> <link href="css/chat.css" rel="stylesheet" type="text/css" /> <script src="js/jquery-1.8.2.min.js" type="text/javascript"></script> <script src="js/kino.razor.min.js" type="text/javascript"></script>
6. 完成静态页面布局
效果图：
代码：
<div id="chat"> <div class="chat_content" style="height: 485px"> <!-- 这里是需要循环的项 --> <script type="text/template" id="temp-message-gallery"> @for(var i = 0; i < list.length; i++ ) { <div class="@list[i].msgClass"> <div class="chat_mes_title clearfix"> <span class="date" style="display: inline">@list[i].message.FormattedDate</span> <span class="name" style="display: inline">@list[i].message.SenderName</span> </div> <div class="clear"></div> <div class="chat_mes_text clearfix"> @list[i].message.Content </div> </div> } </script> </div> </div> <div class="chat_form"> <form action="#"> <button class="btn btn-success" type="button" id="sendmessage"> 发送 </button> <div class="chat_field"> <textarea id="msg" placeholder="请输入消息"></textarea> </div> </form> </div>
不知道大家注意到那段注释“这里是需要循环的项”下面的代码没有，是不是很熟悉，很爽？千万不要以为这是用 ASP.NET MVC Razor 写的服务器端代码，呵呵，这就是按照 kino.razor 模板的规则来写的，是客户端代码！！！！！！
其中 @list[i].msgClass 是样式输出，判断这条消息是否是当前登录用户发的，如果不是，样式就是“chat_message”。如果是，样式就是“chat_message chat_mes_my”。
其中 @list[i].message 就是我们定义的 Message 模型类对应的 json 对象。
7. 把后台 Default.aspx.cs 传递过来的 List<Message> 序列化成 json 数组。
<%
int currentUserId = SysConst.DefaultSenderUserId; // 当前用户的 ID
const string defaultClass = "chat_message"; // 默认样式
const string mineClass = "chat_mes_my"; // 发送者是自己时的样式
List<dynamic> list = new List<dynamic>();
if (this.Messages != null && this.Messages.Count > 0)
{
foreach (var msg in this.Messages)
{
string msgClass = msg.SenderUserId == currentUserId ? defaultClass + " " + mineClass : defaultClass;
// 上面是判断这条消息是否是当前登录用户发的，如果是，则添加一个样式
list.Add(new { msgClass = msgClass, message = msg });
}
}
string json = new JavaScriptSerializer().Serialize(list);
%>
上面是为了展示历史消息，而做的。为了区分消息的发送者是否是自己，就自己新建了一个 dynamic 的集合，用来保存样式值、消息对象。最后把这个 dynamic 的集合序列化成 json，放到下一步（第 8 步）中。
8. 用 kino.razor 来呈现 json 集合
<script type="text/javascript">
// 显现所有消息的方法
function renderAllMessage(dataArray)
{
var htmlTempl = $("#temp-message-gallery").html();// 找到模板
var resultContent = kino.razor(htmlTempl, { list: dataArray });
// 上面就是把 json 数组传递给 kino.razor。list 就是我们在模板
// 中用到的变量名
$(".chat_content").append(resultContent);// 找到容器 DIV，附加
setScrollTop();
}
$(document).ready(function()
{
// 把当前服务器的消息实体集合序列化成 JSON，然后呈现。
renderAllMessage(<%= json %>);
});
// 把滚动条设置到最下，以便呈现最新的消息。
function setScrollTop()
{
var chatContent = $(".chat_content"); // 找到容器 DIV
var scrollHeightValue = chatContent.get(0).scrollHeight;
var heightValue = chatContent.height();// 得到容器的高度
var scrollTopValue = scrollHeightValue - heightValue;
chatContent.scrollTop(scrollTopValue);
}
</script>
注释都已经加上了，如果还不明白，请在评论里反馈，让笔者 知道，相互学习，谢谢！
做到这里，运行，就可以看到效果了。
9. 给 发送 按钮绑定点击事件
代码：
<script type="text/javascript"> $(‘#sendmessage‘).click(function () { var content = $.trim($(‘#msg‘).val()); if (content.length == 0) { alert("请输入消息！"); return; } if (content.length > 1000) { alert("每次发送的消息不能超过 1000 字！"); return; } $(‘#msg‘).attr("disabled", "disabled"); $.ajax({ type: "POST", url: "/post-message.ashx", data: { content: content }, success: function (data) { // 返回成功后，调用呈现单条消息的方法 renderSingleMessage(data); $(‘#msg‘).removeAttr("disabled").val(‘‘).focus(); }, error: function (msg) { alert("发送失败，请稍后再提交！"); $(‘#msg‘).removeAttr("disabled").focus(); } }); }); // 呈现单条消息 function renderSingleMessage(msg) { var msgClass = ‘<%= defaultClass %>‘; var currentUserId = <%= currentUserId %>; if (msg.SenderUserId == currentUserId) { msgClass += ‘ <%= mineClass %>‘; } var list = []; list[0] = { msgClass: msgClass, message: msg }; renderAllMessage(list);// 调用呈现所有消息的方法 } </script>
在 renderSingleMessage 中判断当前消息是否是本人添加的（目前发送者肯定是自己，后期会做成聊天室的形式，基于 ASP.NET SignalR 来做。），如果是，则什么样式，如果不是，则又是什么样式。最后把 json 对象传递给上面已经定义了的 renderAllMessage 函数用来呈现。
10. 在 ashx 保存消息
新建一个名为“post-message.ashx” 的一般处理程序，完成如下代码：
public class post_message : IHttpHandler { public void ProcessRequest(HttpContext context) { string content = context.Request.Form["content"];// 获取消息内容 var message = MessageRepository.AddMessge(SysConst.DefaultSenderUserId, SysConst.DefaultSenderUserName, content); // 保存消息 string json = new JavaScriptSerializer().Serialize(message); context.Response.ContentType = "text/json"; context.Response.Write(json); } public bool IsReusable{get{return false;}} }
至此，流程已经走完。如果还不明白，请在评论里反馈，让笔者 知道，相互学习，谢谢！
总结
完整的流程如下：
oo1:
002:
003:
004:
也许你还会喜欢：
一个轻量级 Javascript 模板引擎 front.js【二】
谢谢浏览！