javascript - 可以通过javascript编辑的MVC Razor 显示元素

Question

我正在使用一个表格，我希望该表格具有显示文本，但也希望通过 JavaScript 更新该文本。

我可以创建一个只读文本框并使用 javascript 对其进行编辑，但我宁愿只在屏幕上显示一些文本。下面是一个示例，其中包含一个显示文本的 DisplayFor 和一个显示相同文本的只读文本框。

@for (var i = 0; i < Model.ProjectSubmissions.Count; i++)
{
    <tr>
        <td>
            @Html.DisplayFor(modelItem => Model.ProjectSubmissions[i].ChapterNumber)
        </td>
        <td>                
            @Html.TextBox("recordsToSort[" + i + "].ChapterNumber", Model.ProjectSubmissions[i].ChapterNumber, new { @id = "recordsToSort[" + i + "].ChapterNumber", @class = "SortOrder", @readonly = "readonly" })
        </td>
    </tr>
}

我的javacript可以像这样编辑文本框:

$(".sortable-table tr").each(function (index, element) {
    var hiddenInput = $(element).find(".SortOrder").first();
    hiddenInput.val(index);
});

我可以编写 javascript 来更新 DisplayFor 吗？或者我应该使用与 JavaScript 可以更新的 DisplayFor 不同的元素？

更新:
我想最终得到这样的结果(我想保留隐藏的 .SortOrder 元素。):

@for (var i = 0; i < Model.ProjectSubmissions.Count; i++)
{
    <tr>
        <td>
            <span id="@Html.Id("recordstosort[" + i + "].ChapterNumber")" class="SortOrderDisplay">@Model.ProjectSubmissions[i].ChapterNumber</span>
            @Html.Hidden("recordsToSort[" + i + "].ChapterNumber", Model.ProjectSubmissions[i].ChapterNumber, new { @id = "recordsToSort[" + i + "].ChapterNumber", @class = "SortOrder" })
        </td>
    </tr>
}

像这样的 JavaScript:

$(".sortable-table tr").each(function (index, element) {
    var hiddenInput = $(element).find(".SortOrder").first();
    hiddenInput.val(index);

    var displayInput = $(element).find(".SortOrderDisplay").first();
    if (displayInput !== 'undefined') {
        displayInput.text = index;
    }
});

但这不起作用。

Answer 1

您可以使用 jQuery 文本代替 val。

@for (var i = 0; i < Model.ProjectSubmissions.Count; i++)
{
<tr>
    <td class="SortOrder">
        @Html.DisplayFor(modelItem => Model.ProjectSubmissions[i].ChapterNumber)
    </td>
</tr>
}

那么 javascript 就是

$(".sortable-table tr").each(function (index, element) {
  var hiddenInput = $(element).find(".SortOrder").first();
  hiddenInput.text(index);
});