在 asp.net mvc 5 中创建可编辑的 cshtml 查看页面答案

【问题标题】：create editable cshtml View Page in asp.net mvc 5在 asp.net mvc 5 中创建可编辑的 cshtml 查看页面
【发布时间】：2015-10-30 06:36:26
【问题描述】：

我有以下带有 div 部分的 cshtml 视图页面

@model IEnumerable<int>
@{
    ViewBag.Title = "Template";
}
<!DOCTYPE html>
<html>
<head>
    <title>Create a Template</title>
</head>
<body>
    <div>Bank Brochure</div>
    <div>Solution by ggg.</div>
</body>
</html>

我想让这个cshtml页面的div部分可编辑，我该怎么做

【问题讨论】：

你说的可编辑！！是什么意思？？
我应该能够编辑 div 部分内部文本上方的内容
如果我理解正确，您可以使用 textbox 或 textarea 之类的文本提交
使用 textarea 或将 div 与 contenteditable='true' 一起使用
@Arjun 我认为 contenteditable='true' 会匹配，我可以举个例子

标签： c# asp.net asp.net-mvc asp.net-mvc-4 razor

【解决方案1】：

希望对你有帮助

$('#button').on('click',function(){
  
    
    $('#divvalue').html($('#editableddiv').text());
    
    
  });

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<input type='button' id='button' value='Get Div value' /> 
<div> div value : <div id='divvalue'></div> </div>

<div id='editableddiv' contentEditable='True' style='Height:200px; width:200px;border:1px solid'>

  Editable Div
  
</div>

更新：

在 JQuery 和 JavaScript 中获取可编辑的 div 值

var div_value = $('#editableddiv').text();

var div_value = document.getElementById('editableddiv').innerHTML;

【讨论】：

如果我想保存编辑后的 div 内容，我可以使用您建议的方法吗？
@kez 是的，您可以保存编辑后的 div 内容。使用 javascript 或 jquery.verify 更新帖子
如何直接使用POST方法保存整个视图页面（编辑后）而不一一发送？

【解决方案2】：

您需要更具体。

如果 'Editable' 表示 Html Editable，您可以考虑使用开源的 WYSIWYG 编辑器实例，例如 CKEditor。

如果你只想正常显示你的内容，但想让 div 可编辑，你可以为你的 div 使用contenteditable="true" 属性：

<div class="someClass" id="someId" contenteditable="true"> ... </div>

如果您只想提供一个可编辑的文本区域，您可以使用 MVC 的辅助函数来做到这一点：

<div class="someClass">
    @Html.TextAreaFor(m => m.YourModelProperty)
</div>

您可以查看MSDN reference 了解如何正确使用它。

【讨论】：

我可以为此目的使用这个所见即所得的编辑器github.com/summernote/summernote ??