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

ただし、シリアル化のドキュメントを確認すると、特にフォーム要素 (入力フィールドなど) を探しているように見えます。

私は2つのことに興味がありました：

  • 私のデザインアイデアの落とし穴。
  • 適切にポストバックできるように、フィールドを適切にシリアル化する方法。
4

1 に答える 1

4

data-*HTML5属性を使用して、コンテンツ編集可能セクションに名前を付けることができます。

<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 に答える