asp.net-mvc-3 – 避免服务器端Razor视图和客户端jQuery模板之间

发布时间：2020-12-16 07:44:39 所属栏目：asp.Net 来源：网络整理

导读：我有一个搜索结果页面,我输出一个使用MVC Razor视图以特定方式格式化的项目列表. @for (int i = 0; i group.Count(); i++) { div class="result" div class="ordinal"@((i+1).ToString())./div div class="detail"p@group.ElementAt(i).Name/p/div /div} 客

我有一个搜索结果页面,我输出一个使用MVC Razor视图以特定方式格式化的项目列表.

@for (int i = 0; i < group.Count(); i++) {
  <div class="result">
    <div class="ordinal">@((i+1).ToString()).</div>
    <div class="detail"><p>@group.ElementAt(i).Name</p></div>
  </div>
}

客户端可以使用jQuery AJAX进一步过滤这些结果,以将新数据集作为JSON和jQuery模板进行检索,以呈现结果集来代替原始数据集.这是jQuery模板：

<script id="resultTemplate" type="text/x-jquery-tmpl">
  {{each(i,result) results}}
    <div class="result">
      <div class="ordinal">${i+1}.</div>
      <div class="detail"><p>${name}</p></div>
    </div>
  {{/each}}
</script>

在AJAX调用之后绑定：

var result = $("#resultTemplate").tmpl({ results: data });
$("#resultsColumn").empty().append(result);

请注意我必须在服务器端Razor代码和客户端jQuery代码中复制搜索结果的HTML格式.我想只有一个版本的数据绑定模板,以减少我必须进行更改时不匹配的可能性.

阅读Stephen Walter’s Intro to jQuery Templates,他在使用ASP.NET MVC的jQuery模板时暗示“更好地在一起”集成,所以我想知道是否有解决上述场景的工具.

谢谢.

解决方法

我想你可以使用@helper语法来避免一些重复的标记.

@helper Result(string ordinal,string name) {
    <div class="result">
        <div class="ordinal">@ordinal.</div>
        <div class="detail"><p>@name</p></div>
    </div>
}

然后在Razor视图中使用帮助器

@for (int i = 0; i < group.Count(); i++) {
    @Result((i+1).ToString(),group.ElementAt(i).Name)
}

和jQuery模板

<script id="resultTemplate" type="text/x-jquery-tmpl">
    {{each(i,result) results}}
        @Result("${i+1}","${name}")
    {{/each}}
</script>

这是假设你的jQuery模板驻留在Razor视图本身.

在缺点方面,您必须将每个参数转换为字符串,然后再将它们传递给帮助程序.并且,出于某种原因,将“${i 1}”传递给帮助者是完全错误的.

我不确定我会在生产中使用这种方法,但我想这取决于所涉及的标记的复杂性.

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!