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

Question

我不确定这是否可行。所以，如果你知道这不是我应该走的路，请指教!

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

我想我也可以利用 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看起来它正在专门寻找表单元素(例如输入字段)。

我对两件事很好奇:

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

Answer 1

您可以使用 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) {

    }
});