MVC3 - 将 LabelFor 动态转换为 TextBoxFor

Question

我有一个 MVC 表单，用户将通过填写字段（TextBoxFor 和 TextAreaFor 的混合）来完成该表单。表单将被提交并持久化到数据库中。

然后，用户可以选择在以后使用几个按钮之一来更新表单。其中：

• 修改详细信息 - 允许用户更改之前完成的任何字段的详细信息。
• 添加详细信息 - 填写之前留空的字段。

当希望更新他们的详细信息时，用户要采取的​​行动是：

1. 当用户第一次打开表单以更新详细信息时，视图将使用 DisplayFor 显示所有详细信息。所有字段都被锁定以进行编辑。

2. 例如，如果用户单击“修改详细信息”按钮，则会显示一个包含复选框的弹出框；迄今为止已完成的每个字段都有一个。

3. 用户选中与他们希望更改的字段相对应的复选框，然后单击“更新”按钮，弹出窗口将关闭并且表单重新成为焦点。

4. 用户选择更新的字段现在已从 DisplayFor 更改为 TextBoxFor 以允许编辑。

这个过程的第 4 步是我遇到的问题。我发现有几种方法可以通过 jQuery 来实现，您可以将输入标签从一个更改为另一个。例如：

marker = $('<span />').insertBefore('#myInput');
$('#myInput').detach().attr('type', 'text').insertAfter(marker).focus();
marker.remove();

取自：jQuery: Change element type from hidden to input

有什么方法可以让我在考虑到 MVC 输入标签的情况下进行这种转换？

Answer 1

这里的服务器端和客户端技术的混合在一定程度上限制了您。您需要确保最初有一个表单输入类型——这意味着要么是 HiddenFor 元素，要么是最初隐藏的常规 TextBoxFor 元素。

您引用的示例使用前者，但在您的情况下，我倾向于后者，因为它更简单一些。将标签和文本框都放在表单上，​​文本框最初是隐藏的：

<div>
    @Html.DisplayFor(model => model.SomeField)
</div>
@Html.TextBoxFor(model => model.SomeField, new { style = "display:none" })

现在，当用户点击编辑字段时，您可以简单地隐藏一个，并显示另一个：

$("input[name=SomeField]").show().prev().hide();

您可以使用一个辅助函数来使字段可编辑，给定字段的名称：

function makeEditable(fieldName) {
    $("input[name=" + fieldName + "]").show().prev().hide();
}

所以，一旦你有了用户检查过的字段列表，你需要做的就是循环并调用上面的辅助函数：

var fieldsToEdit = [ "SomeField", "AnotherField" ];
fieldsToEdit.forEach(makeEditable);