将MVC模型与'contenteditable'属性混合 - 是否可以以简单的方式将数据发回服务器？

我不完全确定这是否可能。所以，如果你知道这不是一条路，我应该走下去，请告知！将MVC模型与'contenteditable'属性混合 - 是否可以以简单的方式将数据发回服务器？

我正在创建一个MVC/jQuery Web应用程序。我正在将模型加载到对话框中，允许用户编辑内容，然后我想将数据发回服务器以保存。

我想我也可以利用HTML5的'contenteditable'属性。在编辑元素时，这似乎是删除加载闪存的好方法。

因此，我有这样的：

<%@ Control Language="C#" Inherits="System.Web.Mvc.ViewUserControl<CableSolve.Web.Models.Orders.OrderDetailsModel>" %> 

<fieldset class="collapsible"> 
    <legend> 
     <%= Html.DisplayFor(model => model.OrderDetailsLegendName)%> 
    </legend> 
    <table id="OrderDetailsContentTable" class="ContentTable"> 
     <tr> 
      <td><%= Html.DisplayFor(model => model.OrderID.Name)%></td> 
      <td><div class="canBeEditable"><%= Html.DisplayFor(model => model.OrderID.Value)%></div></td> 
     </tr> 
    </table> 
</fieldset>

这ViewUserControl获取加载到DOM元件和元件由可编辑的客户端：

var workflowDialog = $('#WorkflowDialog'); 
var workflowDialogContent = $('#WorkflowDialogContent'); 
workflowDialogContent.load('../../csweb/Orders/OrderDetails/?orderID=' + orderID, function() { 
    workflowDialog.find('.canBeEditable').attr('contenteditable', 'true'); 
}

此时我想能够将数据发布回服务器并利用MVC，这样我就不必显式映射每个属性。

我想我可以做这样的事情：

var dataToPost = workflowDialogContent.serialize(); 
console.log("Data:", dataToPost);

但是，在回顾the documentation for serialize它会出现，它是表单元素（如输入字段）专找。

我很好奇的两件事情：

我的设计理念中的任何缺陷。
如何正确序列化我的字段，以便我可以正确回发。

来源

2012-10-03 Sean Anderson

肖恩，你挂掉了服务器端的问题。从客户端的角度来看，向服务器发送数据是一个GET或POST请求的问题。为了替换页面，目前最简单的方法是提交表单;或者在同一页面内工作，发出AJAX请求。通过提交表单，字段会自动序列化。这不是一个设计理念 - 它是一种老式的HTML - 这种方式已经有多年了。 –

为什么要使用contenteditable？ – VJAI

你可以使用HTML5 data-*属性给内容编辑的部分名称：

<div class="canBeEditable" data-name="<%= ViewData.TemplateInfo.GetFullHtmlFieldName("OrderID.Value") %>"> 
    <%= Html.DisplayFor(model => model.OrderID.Value) %> 
</div>

，那么你可以使用serializeObject功能将数据准备后：

var form = $('#myForm'); 
var dataToPost = form.serializeObject(); 
$('.canBeEditable').each(function() { 
    dataToPost[$(this).data('name')] = $(this).val(); 
});

最后贴吧：

$.ajax({ 
    url: '...', 
    type: 'POST', 
    data: dataToPost, 
    success: function(result) { 

    } 
});

来源

2012-10-04 11:38:25

哇。棘手。我会检查一下。我将它标记为答案，因为它实现了我想要的，但我仍然不确定是否可以这样做，而不是Html.EditorFor（）。我们拭目以待！谢谢！ –

我试过这个，不能获得价值，然后我检查$（this）.html（）而不是$（this）.val（），这就像一个魅力。我需要它的特殊场景，所以如果这可以帮助我会回来，并给予+1，谢谢你。 – QMaster

将MVC模型与'contenteditable'属性混合 - 是否可以以简单的方式将数据发回服务器？

回答

相关问题