对 jquery API 调用的结果 ASP.NET 的列表元素使用模板布局

Question

在我的cshtml中，我有一个列表，其中每个条目都具有相同的复杂样式(为简洁起见，此处简化(：

@model List<string>
<h1>List</h1>
<ul id="container">
@foreach (var entry in Model)
{
<li>
<div>
<h2>@entry</h2>
<p>Some content</p>
</div>
</li>
}
</ul>

现在假设该列表是长时间运行的 API 调用的结果。我可以添加

@section Scripts
{
<script>
$(document).ready(function () {
$.getJSON('api/getlist', function (result) {
$.each(result, function (i, item) {
$("#container").append('<li><div><h2>' + item + '</h2><p>Some content</p></div></li>');
});
});
});
</script>
}

在我看来，这很糟糕，因为布局现在嵌入在 JS 中，被掩盖为字符串(这使得很难发现错误(。 我更想要的是一个带有每个列表元素布局的 cshtml 文件，即

@model string
<li>
<div>
<h2>@Model</h2>
<p>Some content</p>
</div>
</li>

我没有找到任何方法来调整 javascript 以从另一个文件中获取 html 代码并从返回的 json 中填写数据。有没有办法正确地将这些 UI 元素(即容器与入口元素分开(？

Answer 1

您需要将该"模板"作为部分视图包含在视图中(在隐藏容器内(，您可以克隆并附加到 DOM 中。例如(并假设其命名为_Template.cshtml(

<div id="template" hidden>
@Html.Partial("_Template");
</div>

然后在脚本中，您可以克隆它，更新其内容，并将其附加到 DOM，例如

var template = $('#template');
var container = $("#container") // cache it
$.getJSON('api/getlist', function (result) {
$.each(result, function (i, item) {
var clone = template.clone(); // copy it
clone.find('h2').text(item); // update
container.append(clone.html()); // add it
});
});

如果"模板"更复杂，您可以为适当的元素类名提供适当的元素名称，以便更轻松地选择适当的元素(即clone.find('.someClassName')(