避免服务器端 Razor 视图和客户端 jQuery 模板之间的重复格式

Question

我有一个搜索结果页面，我使用 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，他暗示在将 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 视图

@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}" 传递给助手感觉完全错误。

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

Answer 2

您可以使用相同的 jquery 模板来呈现初始搜索结果，而不是使用 razor 语法，这样可以避免重复。你可以把它放在视图中：

<script type="text/javascript">
    $('#resultTemplate')
    .tmpl(@group.ToJson()))
    .appendTo("#resultTemplate");
</script>

我在组对象上编写了 ToJson 方法。它可以是您在 viewmodel 上实现的方法，也可以是组 var 的来源，用于将集合序列化为 json。