通过javascript将索引动态分配给Razor Model

Question

我需要通过javascript动态分配每个剃刀模型的索引。

这是 JavaScript

function ResetIndexModel() {
var idx = 0;
$('.page-name').each(function () {
var text = $(this).text();
text = text.replace('Model.DraftPages[#].Name', 'Model.DraftPages[' + idx + '].Name');
$(this).text(text);
idx++;
});
}

这是我的网页

<li class="active tabPage"><label for="Name" class="page-name">Model.DraftPages[#].Name</label><span title="Edit Page Name" class="glyphicon glyphicon-pencil" style="font-size:10px;"></span>></li>

我也试过这个。

text = text.replace('Model.DraftPages[#].Name', '@('@')Model.DraftPages[' + idx + '].Name');

所以我需要使用 js 函数的迭代替换"#"符号。 使用我当前的代码，它只会显示'Model.DraftPages[0]。标签中的"名称"。

我的期望是，它应该显示@Model.DraftPages[0]的值。名字

有什么方法可以实现吗？

Answer 1

在任何解释之前，请考虑以下事项： 1-剃刀页面将在服务器端呈现，因此当您获取HTML页面并加载时，您将看到传递给Razor页面的模型的替换值，并且无法使用JS更改剃刀模型的索引。

2-相反，您可以将模型更改为JS对象，并用它做任何您想做的事情，例如：

<script>
//this is js
var equalRazorListModel = [
//this is razor
@foreach(var item in Model.DraftPages){
<text>
name:'@item.Name',
</text>
}
];
</script>

在上面的代码中，我将草稿名称列表转换为Javascipt数组。 我希望这能给你一些想法。

Answer 2

你想在标签中显示的任何值都可以像这样传递

$(elements[idx]).text('@Model.DraftPages[' + idx + '].Name');

function ResetIndexModel() {
var elements = $('.page-name');
for (let idx = 0; idx < elements.length; idx++) {
$(elements[idx]).text('@Model.DraftPages[' + idx + '].Name');
}
}
ResetIndexModel();

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<li class="active tabPage">
<label for="Name" class="page-name">Model.DraftPages[#].Name</label>
<span title="Edit Page Name" class="glyphicon glyphicon-pencil" style="font-size:10px;"></span>
</li>