这可能吗?以我想要实现的目标为例,采用Facebook评论系统。现有注释在服务器上呈现,但如果我留下新注释,则使用客户端上的AJAX创建它。理想情况下,我只想在一个地方存储注释的模板,并且可以在服务器(由Razor呈现)和客户端上使用它(使用服务器返回的JSON在Javascript中呈现)。
有什么想法吗?
编辑:我想另一个选择是坚持使用纯粹的服务器端渲染,当用户发布新评论时,将呈现的HTML返回到浏览器以填充到DOM中。这不太好,但我有兴趣知道这是否也可行。
答案 0 :(得分:8)
我反对渲染服务器端,然后将其发送回您的JS脚本以获得带宽和性能。相反,您应该使用适用于服务器和客户端的模板引擎。当客户端想要刷新注释时,它只请求注释的数据,然后使用服务器上使用的相同模板将旧的注释html替换为从数据中呈现的新html。
我一直在使用Mustache模板引擎来实现这一点,使用PHP和JS。有一个.NET版本我认为适用于ASP.NET,我猜你正在使用ASP.NET。
所以我做的是确保我在PHP和JS中以相同的方式格式化数据,然后使用Mustache模板进行渲染。
小胡子很简单易用。您获取一个对象和一个模板,然后重新获得HTML。
示例对象:
object->user = "Kilroy"
object->comment = "was here"
object->edited = true
示例模板:
{{user}} {{comment}} {{#edited}}(This comment has been edited){{//edited}}
结果:
Kilroy was here (This commment has been edited)
答案 1 :(得分:2)
我使用的方法是使用带有通配符和/或类名的隐藏HTML模板,然后在文档就绪时通过AJAX / JSON调用加载内容,最后使用javascript中的相同模板刷新或添加新项目。
<ul id="template">
<li>
<span class="message"></span>
<span class="date"></span>
</li>
</ul>
<ul id="comments"></ul>
<script type="text/javascript">
$().ready(function() {
loadComments();
});
function loadComments() {
$.post('@Url.Action("GetComments", "Forum")', {}, function(comments) {
for (i = 0; i < comments.length; i++){
loadComment(comments[i]);
}
}, 'json');
}
function loadComment(comment) {
var template = $('#template li').clone();
template.find('.message').text(comment.message);
template.find('.date').text(comment.date);
$('#comments').append(template);
}
</script>
对于新邮件,您可以将邮件发布到服务器,然后使用loadComment函数将其添加到列表中,或刷新整个注释列表。这不是一个完整的样本,但希望你明白这一点。
答案 2 :(得分:0)
我没有使用过razor或ASP.NET MVC,但我通常使用Monorail和NVelocity来处理它是这样的:
拥有该页面的模板。 对于评论,请包含您在主模板中包含的部分模板。 对于AJAX请求,使用该部分模板呈现注释部分的标记。用您喜欢的方法替换客户端。
通过这种方式,您可以在一个地方拥有标记,无论是常规请求还是ajax请求。