在MVC.NET中使用html helper编辑模式

Edit mode using html helper in MVC.NET

本文关键字：html helper 编辑 模式 MVC NET      更新时间：2023-09-26

我想使用@Html.DisplayFor helper将我的对象绑定到我的视图。然后单击编辑按钮并将其更改为@Html.DisplayTextBoxFor helper。我想在客户端做这个更改。

示例:使用如下的View 

@Using Html.BeginForm("profile", "user", FormMethod.Post)
  @<h2>User Profile</h2>
  @<div>
    @Html.LabelFor(function(m) m.email)
    @Html.DisplayFor(function(m) m.email)
  </div>
  <input type="button" class="btn-primary" value="Edit Mode" />
  <input type="submit" class="btn-primary" value="Save" />  
End Using

点击"编辑模式"按钮，我希望电子邮件成为一个可编辑的文本框。然后我将在我的表单中提交。

你所要求的是不可能的。您不能在客户端上运行服务器代码。

因此，你必须选择另一个选项:

  • 使用文本框，也用于显示内容，在需要时禁用或启用它们;
  • 使用AJAX调用从服务器加载编辑表单。创建一个动作，返回一个PartialView输出和加载它在显示部分的地方(你可以使用jQuery，例如，从服务器获得实际的结果);
  • 执行一个完整的回发到服务器并重新加载整个页面。

在这种情况下，您不必使用DisplayFor() 

@Html.TextBoxFor(x => x.email, new {@readonly = "true", id = "email"})
<input type="button" class="btn-primary" value="Edit Mode" id="edit" />

然后使用JQuery

<script>
    $('#edit').on('click', function () {
       $('#email').attr('readonly', 'false');
    });
</script>

您需要为要访问的按钮添加一个id。

相关文章：