asp.net-mvc-3 - 避免服务器端 Razor View 和客户端 jQuery 模板之间的重复格式

Question

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

@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 调用之后绑定(bind):

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

请注意，我必须在服务器端 Razor 代码和客户端 jQuery 代码中复制搜索结果的 HTML 格式。我只想要一个版本的数据绑定(bind)模板，以减少我必须进行更改时出现不匹配的机会。

阅读 Stephen Walter's Intro to jQuery Templates他在将 jQuery 模板与 ASP.NET MVC 一起使用时暗示“更好地结合在一起”，所以我想知道是否有解决上述情况的工具。

谢谢。

Answer 1

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

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

然后将助手用于 Razor View

@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 View 本身中。

不利的一面是，您必须在将每个参数传递给帮助程序之前将它们转换为字符串。而且，由于某种原因，通过 "${i+1}" helper 感觉完全不对。

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