jquery - MVC：ajaxを介して行を追加した後、新しい値がコントローラーに渡されません

Question

MVCを使用して、特定のイベントの凡例の定義を示す簡単なページを作成しようとしています。モデルの構造は

public class ServiceSymbols
{
    [Required(ErrorMessage = "ID is required")]
    public int ID { get; set; }
    public List<SymbolsDef> SymbolsDef { get; set; }

}
public class SymbolsDef
{
    public string value { get; set; }
    public string label { get; set; }
    public string color { get; set; }
}

ビューでは、サービスシンボル（ServiceSymbols）に複数のシンボル定義（SymbolsDef）があり、テーブル行の観点からシンボル定義を追加または削除できるAJAXを使用しました。しかし、問題があります。

ページが最初に2行で読み込まれる場合。次に、AJAXを介して3行を追加し、それぞれに値を入力して、フォームを送信します。次に、コントローラーで（ブレークポイントを追加して）値を確認しました。最初の2つのSymbolsDef値のみが入力した値であり、残りは2番目の値と同じです。ページが最初に5行で読み込まれ、追加または削除しない場合は、各レコードの値を変更してから送信します。その場合、コントローラーに渡される値にはこの問題はありません。

送信機能の一部は次のとおりです。

function saveServiceSymbology() {
    var symbolData = $("form#EditSymbols").serialize();
    $.ajax({ url: "/Home/SaveSymbolsDef",
        async: false,
        type: "POST",
        data: symbolData,
        success: function (data) {
            alert("Succeed");
        }
    });
}

これはモデルの問題に対する一種の拘束力のある値だと思います。また、シリアル化機能も疑われます。

誰かがこの種の問題を抱えていましたか？それは私をしばらくの間立ち往生させ、非常にイライラさせました。

新しい行を追加するためのアクションメソッドは次のとおりです。

[OutputCache(Duration = 0)] // make sure come here each time, do not cathe it.
public ActionResult AddNewSymbolsDef()
{
    return PartialView("_SymbolsDefPartial", new SymbolsDef());
}

保存方法は次のとおりです。

[HttpPost]
public ActionResult SaveSymbolsDef(ServiceSymbols ServiceSymbols)
{
    //Actions Here
}

SaveSymbolsDefにブレークポイントを置き、そこからすべての値を表示すると、値がすでに変更されているため、SaveSymbolsDefのすべてのアクションを記述しませんでした。アクションの問題になると思います。

Here is the log output when I add a new row:    
<tr>
    <input autocomplete="off" name="SymbolsDef.Index" type="hidden" value="f65560ae-650b-4f6d-ba7e-29db945dc3b0" />
    <td style="display:none">
        <input type="text" id = "fromValue" />
    </td>
    <td style="display:none">
        <input type="text" id = "toValue" />
    </td>
    <td>
        <input id="value" name="SymbolsDef[f65560ae-650b-4f6d-ba7e-29db945dc3b0].value"  type="text" value="" />
    </td>
    <td>
        <input id="label" name="SymbolsDef[f65560ae-650b-4f6d-ba7e-29db945dc3b0].label"  type="text" value="" />
    </td>
    <td id="symbolColorPicker">
        <input class="color" id="SymbolsDef_f65560ae-650b-4f6d-ba7e-29db945dc3b0__color" name="SymbolsDef[f65560ae-650b-4f6d-ba7e-29db945dc3b0].color"  type="text" value="" />
        <input id="color" name="SymbolsDef[f65560ae-650b-4f6d-ba7e-29db945dc3b0].value" type="hidden" value="" />
    </td>
    <td>
        <img src="../../Scripts/Images/delete.png" id="DeleteSymbol" title="Delete this row" alt="delete" style="cursor: pointer;" onclick=
        "if ($('#symbolsdiv tr').length > 3) $(this).closest('tr').remove();else alert('This can not be deleted!');reasignSymbol()" />
    </td>
</tr>