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

Posted 2023-04-13

【中文标题】通过 javascript 将索引动态分配给 Razor 模型

【英文标题】：Dynamically assign index via javascript to Razor Model

【发布时间】：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');

【参考方案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>