jquery - ASP.NET MVC と jQuery を使用して更新された行のみを更新する

Question

私は ASP.NET MVC と jQuery が初めてで、古典的なことをしようとしています。私の必要性は、ポップアップ編集フォームで CRUD 機能を提供することです。

テーブルを作成してデータを表示しました。すべてのテーブル行をレンダリングする部分ビューがあり、Index ビューはこれをループで呼び出しています。

<tbody>
@foreach (var item in Model)
{
    @Html.Partial("_OrderRow", item)
}
</tbody>

すべての行には編集ボタンがあり、クリックするとjQueryポップアップフォームが開き、編集フォームが読み込まれます。[更新] ボタンをクリックすると、(ajax 要求を使用して) 操作が正常に実行され、更新されたアイテムでレンダリングされた部分ビュー (_OrderRow) を含む JsonResult が返されます。

    [HttpPost]
    public JsonResult OrderEdit(OrderViewModel order)
    {
        if (ModelState.IsValid)
        {
            Order ord = OrderMapper.MapToEntity(order);

            db.Orders.Attach(ord);
            db.ObjectStateManager.ChangeObjectState(ord, EntityState.Modified);
            db.SaveChanges();

            return Json(new { Success = true, ObjectId = order.Id, Html = RenderPartialViewToString("_OrderRow", order) }, JsonRequestBehavior.DenyGet);
        }

        return Json(new { Success = false, Object = order }, JsonRequestBehavior.DenyGet);
    }

したがって、クライアント側の updateSuccess 関数には、更新されたアイテムの HTML があります。

その後、jQuery を使用して対応するテーブル行を取得し、replaceWith を使用して最新のテーブル行に置き換えます。

このシナリオは、これまでのところうまく機能しています。しかし、私の問題は、実際の HTML を変更せず、DOM のみを操作することです。そのため、テーブルを更新しようとするときにテーブル プラグイン (DataTables、TableSorter など) を使用すると (スタイリング、ページングなど)、新しいテーブル行が無視されます。実際の HTML には古いものが含まれているためです。

新しい行を挿入したり削除したりすると、同じ問題に直面するようです。

私は、(可能な限り) どのプラグインにも依存せず、自分のビューをすべて制御できるようにするために、この方法を好みます。したがって、どんな助けも本当に感謝しています。

ありがとう。