MVC3 - 将LabelFor动态转换为TextBoxFor

Question

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

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

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

当希望更新其详细信息时，用户要采取的​​操作是：

1. 当用户首次打开表单以更新详细信息时，View将使用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);