將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'屬性混合 - 是否可以以簡單的方式將數據發回服務器？

回答

相關問題