2

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

我正在创建一个 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);

但是，在查看文档以进行序列化时，它似乎正在专门寻找表单元素（例如输入字段）。

我很好奇两件事：

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

1 回答 1

4

您可以使用 HTML5data-*属性为内容可编辑部分命名：

<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-04T11:38:25.220 回答