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他在向ASP.NET MVC使用jQuery模板时暗示“更好地在一起”集成，所以我想知道是否有解决上述场景的工具。

感谢。

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的方法。

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

2 个答案: