ASP.NET MVC 中 jTemplates 的简单使用

在上一个项目中的使用较多的了jTemplates,使用过程中遇到了一些问题,经过多次查找才解决,故在这里做个记录。

1.jTemplates介绍

jTemplates是基于jQuery的JS模版引擎,官网 http://jtemplates.tpython.com/,文档比较全面,看过后就可以完成大部分工作了。

2.特殊模版处理

常用下面方式定义模版:

<p style="display:none"><textarea id="name" rows="0" cols="0"><!--
        ... templates ...
--></textarea></p>

2.1 在模版中使用 <textarea> 标签

如果使用下面的方式,生成的 <textarea> 标签会使模版提前闭合,导致后面的标签被排除在了模版之外:

@Html.TextAreaFor(m => m.Summary, new { rows = "3", cols = "*" })

这时需要对 textarea 进行转换,简单方式如下:

public static MvcHtmlString jTemplatesTextAreaFor<TModel, TProperty>(this HtmlHelper<TModel> htmlHelper, Expression<Func<TModel, TProperty>> expression, object htmlAttributes)
{
    var html = htmlHelper.TextAreaFor(expression, htmlAttributes).ToHtmlString();
    html = html.Replace("textarea", "{'textarea'}");
    return MvcHtmlString.Create(html);
}

即将标签名称作为字符串输出,这也更好的理解了官网中介绍的内容:

In {...} can be any JavaScript's code.

之所以会出现这个问题是我忽略了一个简单的事实:字符串也是JS脚本。

2.2 在模版中使用大括号 {}

如封装时间控件 My97:

public static MvcHtmlString jTemplatesWdateTextAreaFor<TModel, TProperty>(this HtmlHelper<TModel> htmlHelper, Expression<Func<TModel, TProperty>> expression)
{
    var html = htmlHelper.TextBoxFor(expression, new { @class = "Wdate", onclick = "WdatePicker({#ldelim} readOnly: true, dateFmt: 'yyyy-MM-dd HH:mm:ss' {#rdelim})" }).ToHtmlString();
}

其中的大括号需要使用  {#ldelim}{#rdelim} 转换,或者使用 {#literal} 包裹,作为静态内容输出。

3 表单验证

为了统一验证方式,前台模版中使用了htmlHelper方法,将模版加载后,提交表单时调用 $('form').valid() 不能触发验证,后来查看 jquery.validate.unobtrusive.js 才知道在html内容加载到页面后需要解析表单,如:

var $content = $('#' + contentId);
$content.setTemplateElement("perEditorTemplate")
    .setParam("formId", formId)
    .processTemplate(row);
$.validator.unobtrusive.parse($content);

即使用方法 $.validator.unobtrusive.parse(..) 解析表单。

posted @ 2014-10-20 23:31  wangd  阅读(225)  评论(0编辑  收藏  举报