MVC 剃须刀显示元素，可以通过 JavaScript 进行编辑

MVC razor display element that can be edited by javascript

本文关键字：JavaScript 编辑 可以通过 剃须刀 显示 元素 MVC      更新时间：2023-09-26

我正在使用一个表格，我希望显示文本，但也希望通过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);
});

我可以编写将更新 DisplayFor 的 javascript 吗？或者我应该使用与Display不同的元素，因为javascript可以更新？

更新：
我想以这样的东西结束（我想保留隐藏的.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;
    }
});

但这行不通。

你可以使用 jQuery text 而不是 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);
});

Javascript可以用来更新任何你喜欢的元素。最简单的方法可能是使用 id 属性创建一个范围，然后使用 document.getElementById.innerText 设置文本。

您可以轻松地将@Html.DisplayFor替换为<span id="@Html.IdFor(m => m.ProjectSubmissions[i].ChapterNumber)"></span>。

这只是一个示例，有几种方法可以更改文本客户端。

相关文章：