如何使用Html.编辑器最初是使用Razor的只读文本框

本文关键字:Razor 只读 文本 Html 何使用 编辑器 | 更新日期: 2023-09-27 17:50:35

我想在填充的文本框中创建一个包含几行数据的输出,这些文本框最初是只读的,每个文本框末尾都有一个Edit按钮。这种编辑将允许该行成为可编辑的,同时保持在同一页面上(没有新的窗口,这是MVC的默认设置),然后当所有编辑完成后,在页面底部的提交按钮将数据保存到数据库中。@Html.DisplayFor()将显示为只读,但要编辑它,将创建一个新页面。

如果以某种方式点击编辑可以将行从@Html.DisplayFor()转换为@Html.EditorFor(),那将是伟大的。

下面是一些代码片段:

@model IEnumerable<EnterAdv.Models.Person>
@using (Html.BeginForm()){
<fieldset>
    <table>
        @foreach (var item in Model)
        {
            <tr>
                <td 
                    class="styleDeptNames">@Html.EditorFor(modelItem => item.FirstName) 
                                            @Html.ValidationMessageFor(model => item.FirstName)
                </td>
                <td 
                    class="styleFMLNames">@Html.EditorFor(modelItem => item.LastName)
                                            @Html.ValidationMessageFor(model => item.LastName)
                </td>
                <td class="styleEdit"><input type="button" value="Edit"/></td>     
            </tr>
        }
    </table>
</fieldset>

你现在可以看到它是EditorFor()。如果这个方法有一个重载,允许在只读和编辑之间来回切换,那将是伟大的,但我没有看到它。但最重要的是,我必须呆在同一页上进行编辑。

我一直在使用ActionResult Index()视图,因为它列出了表数据。

如何使用Html.编辑器最初是使用Razor的只读文本框

您可以使用jquery切换只读

$('.clsInput').attr('readonly', 'readonly');

和删除

$('.clsInput').removeAttr('readonly');