Mixing an MVC model with 'contenteditable' attribute -- is it possible to post data back to server in a simple fashion?

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.

Sean, you're hung up with server side issues. From the client perspective sending data to the server is a question of making a GET or POST request. To replace the page, the easiest approach by far is to submit a form; or to work within the same page, make an AJAX request. By submitting a form, fields are serialized automatically. This is not a design idea - it's good old fashioned HTML - the way is's been for years. — Beetroot-Beetroot, Oct 04 '12 at 05:26

score 4 · Accepted Answer · edited May 23 '17 at 12:31

4

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) {

    }
});

edited May 23 '17 at 12:31

Community

1
1

answered Oct 04 '12 at 11:38

Darin Dimitrov

1,023,142
271
3,287
2,928

Woah. Tricky. I'll check this out. I'm marking it as the answer because it achieves what I want, but I'm still not sure if I am OK going this way as opposed to Html.EditorFor(). We'll see! Thanks! – Sean Anderson Oct 04 '12 at 15:56
I tried this and can't get value then i checked $(this).html() rather $(this).val() and that's worked like a charm. I need it for special Scenario so if that could be help i'll be back and give +1, Thanks dud. – QMaster Jun 29 '14 at 12:20

Mixing an MVC model with 'contenteditable' attribute -- is it possible to post data back to server in a simple fashion?

1 Answers1