通过 javascript 将索引动态分配给 Razor 模型答案

【问题标题】：Dynamically assign index via javascript to Razor Model通过 javascript 将索引动态分配给 Razor 模型
【发布时间】：2020-10-11 22:23:24
【问题描述】：

我需要通过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++;
            });
        }

这是我的 HTML

<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].Name”。

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

有什么方法可以实现吗？

【问题讨论】：

您能解释一下主要问题吗？您的预期结果是什么？
@Ashu 我想在元素中动态重新设置 Razor 模型的索引。所以我的预期结果是 DraftPages 索引 0 处的 'name' 属性的值。我目前拥有的是文本 'Model.Draftpages[0].Name' 本身。
0 值的名称是什么？
text = text.replace('Model.DraftPages[#].Name', Model.DraftPages[idx].Name);能否请您删除单引号字符并检查它是否有效，只是猜测，不确定它是否相关
如果你想在结果中添加@，你可以试试这个：text = text.replace('Model.DraftPages[#].Name', '@Model.DraftPages[' + idx + '].Name');

标签： javascript c# jquery razor

【解决方案1】：

在任何解释之前考虑一下： 1- razor 页面将在服务器端呈现，因此当您获取 html 页面并加载它时，您将看到传递给 razor 页面的模型的替换值，并且无法使用 js 更改 razor 模型的索引。

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

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

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

【讨论】：

【解决方案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>

【讨论】：