0

動的に生成された行を含む HTML テーブルがあります (MVC3 の EditorFor を使用)。ユーザーはテーブルに (行ごとに) データを入力し、フォームをサーバーに送信します (MVC3 HTML フォーム経由)。ユーザーは、TR 要素で $(tableRow).remove() を呼び出すボタンを押して行を削除し、データベースから行を削除する非同期サーバー メソッドを呼び出すことができます。

テーブルに 5 行あり、3 番目の行を削除してから送信すると、サーバー メソッドは行 1 と 2 を受け取りますが、他の行 (元の 4 番目と 5 番目の行) を失うことがわかりました。

ポストバックが最初の 2 行を受け取り、最後の 2 行を欠落する理由についてオンラインで検索してみましたが、見つけたすべての答えは、私が使用していない JQuery 投稿を中心に展開されました。

何か助けや指示があれば素晴らしいと思います。何か明確にする必要がある場合はお知らせください。

編集:質問に適用される私のプロジェクトからコードを追加します。コンテキストにさらにコードが必要な場合はお知らせください。追加します。

//////////////// VIEW ////////////////
// model info and initialization logic
@using (Html.BeginForm("EditTimesheet", "ControllerName", FormMethod.Post, new { enctype = "multipart/form-data", id = "editTimesheet" }))
{
@Html.ValidationSummary(true)
<fieldset>
<table width="100%">
<tr>
    <td colspan="14" align="right">
    // lots of code
    </td>
</tr>
@Html.EditorFor(m => m.Rows)
<tr>
    <td colspan="14" align="right">
    // lots of code
    </td>
</tr>
// closing statements

//////////////// EditorFor ////////////////
// model info and initialization logic
<tr class="timesheet-row">
    <td>
        <a href='#'>
            <img src='@Url.Content("~/Content/Images/delete.gif")' 
                     width='17' height='17' style='border: 0;' 
                     onclick="DeleteRow(this, @Model.RowId)" />
        </a>
    </td>  
    // other td's
</tr>

//////////////// JS file ////////////////
function DeleteRow(box, rowId)
{
    $(box).closest(".timesheet-row").remove();

    // HACK: despicable, detestable HACK!
    var url = deleteRowUrl;
    url += '?rowId=' + rowId;
    var ajaxData = {
        type: "POST",
        url: url,
        dataType: "json",
        contentType: "application/json; charset=utf-8",
        data: null,
        success: null,
        error: function (error) {
            alert("There was an error posting the data to the server: " + error.responseText);
        }
    };
    $.ajax(ajaxData);
}
4

2 に答える 2

2

行を削除すると、コレクション内の名前のインデックスに穴が作成され、予期された形式を尊重しなくなったため、デフォルトのモデルバインダーが機能しなくなります。

したがって、次の連続した値を持つ代わりに：

<input type="text" name="Items[0].Id" value="1" />
<input type="text" name="Items[1].Id" value="2" />
<input type="text" name="Items[2].Id" value="3" />
<input type="text" name="Items[3].Id" value="4" />
<input type="text" name="Items[4].Id" value="5" />

$(tableRow).remove()TR要素の3番目の行を削除すると、次のようになります。

<input type="text" name="Items[0].Id" value="1" />
<input type="text" name="Items[1].Id" value="2" />
<input type="text" name="Items[3].Id" value="4" />
<input type="text" name="Items[4].Id" value="5" />

問題がわかりますか？

an articleこれは、と呼ばれるカスタムヘルパーを使用してこの問題を解決する方法と、整数インデックスの代わりにコレクションの入力フィールドの名前にGUIDを使用する方法を示していますHtml.BeginCollectionItem。articleまた、デフォルトのモデルバインダーがフィールドに名前を付けることを期待している構文についてPhilHaacksをチェックアウトしてください。終わりに向かって、非シーケンシャルインデックスと呼ばれるセクションがあり、そこで彼はこれをどのように行うことができるかをカバーしています。

于 2012-09-26T15:43:00.727 に答える
0

フォームの一部が削除されているようです。

  1. DOM を調べる
  2. あなたのフォームを見つける
  3. 行を削除して変更内容を確認する
于 2012-09-26T02:46:06.367 に答える