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(..) 解析表单。