2

これに取り組む方法はいくつかありますが、比較的一般的なことである必要があり、それに取り組む「標準的な」方法があるかどうか疑問に思いました。

基本的に、jQuery AJAXを使用してASP.NETページに投稿するHTMLページにフォームがあり、フォームフィールドを取得してデータベースに入れます。

フォーム自体には、記事のタイトル、記事の内容、日付など、いくつかの標準フィールドが含まれています。ただし、フォームには、著者名、著者の電子メール アドレス、著者の年齢など、多数の著者の詳細を追加することもできます。そのため、ユーザーはフォームのタイトル フィールドとコンテンツ フィールドに入力し、1 人以上の作成者を追加できます。作成者のフィールドは、jQuery.clone() を使用して動的に作成されます。

そのため、不明な数の作成者が存在し、その結果、フォーム ポストを受け入れる .NET コントロールは、受信する予定のフィールドを認識できません。

標準フォームの詳細は、「記事」と呼ばれる 1 つのテーブルに追加されます。作成者は、「作成者」と呼ばれる別のテーブルに個別に追加されます。

問題は、この種のことを処理するための最良の方法は何ですか?

ここでアドバイスをありがとう。

編集：

これに私の最初のアイデアを追加するには...まず、次のように、作成者フォームの各フィールドに増分番号を付けて名前を付けることができます。

<fieldset>
  Author 1 name: <input name="name-1" /><br />
  Author 1 email: <input name="email-1" /><br />
  Author 1 age: <input name="age-1" />
</fieldset>
<fieldset>
  Author 2 name: <input name="name-2" /><br />
  Author 2 email: <input name="email-2" /><br />
  Author 2 age: <input name="age-2" />
</fieldset>

また、jQuery スクリプトによって新しい作成者フィールドセットが追加/削除されたときに増分/減分される「number-of-authors」と呼ばれる隠しフィールドもあります。次に、フォーム ポストを受け取る .NET コードで、0 から x までの各フォーム フィールドをループできます (x は「著者数」の値です。ここでの難点は、インデックスを再作成する必要があることです。たとえば、ユーザーが最初のセットを削除した場合など、フィールドセットが削除されたときの各フォーム フィールド。

2 番目に考えたのは、jQuery シリアル化を使用してフォーム フィールドの値を単一の文字列にシリアル化し、その文字列を処理して .NET コード内のオブジェクトに戻すことができるということです。これを行う方法はよくわかりませんが、可能だと確信しています。

この状況で人々のアドバイスは何でしょうか？

4

1 に答える 1

2

ポストバック時に動的テーブルを読み取ることができないため、通常はすべての行をオブジェクトに読み取り、それらを WebMethod または WCF サービスでサーバーに返します。これと同じ手法を、Ajax フォームと従来のポストバック フォームの両方に使用します。

これが私がしていることの簡単な要約です。

HTML

<table class="mediumTable" id="PartTable">
    <thead>
        <tr class="rowHeader">
            <th>Part </th>
            <th>Price </th>
            <th>UOM </th>
            <th>Apply Date </th>
            <th>Remarks </th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>Part12345</td>
            <td>0.298</td>
            <td>1</td>
            <td>5/31/2012</td>
            <td></td>
        </tr>
    </tbody>
</table>

JavaScript

    // Read a row in View Mode into a Cross Object
    function GetRowAsObject(rowNum) {
        var row = $('#PartTable tbody tr').eq(rowNum);

        var cross = {};

        cross.Part = row.find('td:eq(1)').text();
        cross.Price = row.find('td:eq(2)').text();
        cross.UOM = row.find('td:eq(3)').text();
        cross.ApplyDate = row.find('td:eq(4)').text();
        cross.Remarks = row.find('td:eq(5)').text();

        return cross;
    }

    // Read all rows into Cross Object Array
    function GetAllViewRowsAsCrossObjects() {
        var parts = [];

        $('#PartTable tbody tr').each(function (index, value) {
            var part = GetRowAsObject(index);
            parts.push(row);
        });

        return parts;
    }

    // Post all rows to the server and put into Cache
    function PostTable() {
        var batchId = getParameterByName('id');
        var jsonRequest = { crosses: GetAllViewRowsAsCrossObjects(), batchId: batchId};

        $.ajax({
            type: 'POST',
            url: 'PartsForm.aspx/SaveParts',
            data: JSON.stringify(jsonRequest),
            contentType: 'application/json; charset=utf-8',
            dataType: 'json',
            async: false,
            success: function (data, text) {
                // Do Something
            },
            error:function (request, status, error){
                // Do Something
            } 
        });

コードビハインド

public partial class Part3 : System.Web.UI.Page
{
    protected void Page_Load(object sender, EventArgs e)
    {
    }

    /// <summary>
    /// This is a Ajax WebMethod that can be called via jQuery.
    /// </summary>
    /// <param name="crosses">Array of Cross Objects</param>
    /// <param name="batchId">Batch number to apply to all parts</param>
    /// <returns></returns>
    [WebMethod]
    public static bool SaveParts(List<Cross> crosses, int batchId)
    {
        // Save Parts to the DB

        return true;
    }
}

// Data Transfer Object, must match the object sent from the client
public class Cross
{
    public string Part { get; set; }
    public double Price { get; set; }
    public int UOM { get; set; }
    public DateTime ApplyDate { get; set; }
    public string Remarks { get; set; }
}
于 2012-05-31T17:55:53.750 に答える