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);
});

我可以编写更新DisplayFor的javascript吗？或者我应该使用与JavaScript相同的元素，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;
    }
});

但这不起作用。

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);
});

Answer 2

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

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

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

可以通过javascript编辑的MVC剃刀显示元素

2 个答案: