Question

I’m not entirely sure if this is possible. So, if you know that it is not a road I should be going down, please advise!

I am working on creating an MVC/jQuery web application. I am loading a model into a dialog, allowing the user to edit the contents, and then I want to post the data back to the server to be saved.

I thought I might also leverage HTML5’s ‘contenteditable’ attribute. This seems like a nice way to remove the loading flash when making elements editable.

As such, I have this:

<%@ 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>

This ViewUserControl gets loaded into a DOM element and the elements are made editable client-side:

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

At this point I would like to be able to post the data back to the server and leverage MVC such that I do not have to explicitly map each property.

I thought I could do something like:

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

but, upon reviewing the documentation for serialize it would appear that it is looking specifically for form elements (such as input fields).

I was curious of two things:

• Any pitfalls of my design idea.
• How to properly serialize my fields such that I can post it back properly.

Answer 1

You could give the content-editable section a name using an HTML5 data-* attribute:

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

then you could use the serializeObject function to prepare the data to post:

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

and finally post it:

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

    }
});