通過 javascript 將索引動態分配給 Razor Model

Question

我需要通過 javascript 動態分配每個 razor model 的索引。

這是 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 function 的迭代替換“#”符號。 使用我當前的代碼，它只會在 label 中顯示“Model.DraftPages[0].Name”。

我的期望是，它應該顯示 @Model.DraftPages[0].Name 的值

有什么辦法可以做到這一點？

Answer 1

before any explanation consider this: 1- razor page will be render in server side, so when you getting html page and its been loaded, you will see replaced values for model passed to razor page and cant change index of razor model with js.

2-相反，您可以將 model 更改為 js object 並隨心所欲地使用它，例如：

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

在上面的代碼中，我將您的名稱草稿列表轉換為 javascipt 數組。 我希望這能給你一些想法。

Answer 2

您想在 label 中顯示的任何值都可以像這樣傳遞

$(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>