1

JQuery を使用してページネーションを有効にして、MVC3 WebGrid に行を追加しようとしています。

新しい行を追加すると、最後の行として正しく挿入されますが、WebGrid に複数のページがある場合に問題が発生します。

最後の WebGrid ページの最後の行に挿入される新しい行は、最初の WebGrid ページに挿入されます。

Javascript コード:

$("#add-category-dialog").dialog({
        resizable: false,
        height: 300,
        modal: true,
        autoOpen: false,
        open: function (event, ui) {
            var objectid = 0;
            $('#add-category-dialog').load("/Categories/CreateEditPartial", { id: objectid });
        },
        buttons: {
            "Save": function () {
                var ai = {
                    categoryID: $(this).data('id'),
                    Name: $("#Name").val()
                };
                var json = $.toJSON(ai);

                $.ajax({
                    url: $(this).data('url'),
                    type: 'POST',
                    dataType: 'json',
                    data: json,
                    contentType: 'application/json; charset=utf-8',
                    success: function (data) {
                        $('.pretty-table tr:last').after('<tr><td>....</td></tr>');
                    },
                    error: function (data) {
                        var data = data;
                        alert("Error");
                    }
                });
                $(this).dialog("close");
            },
            Cancel: function () {
                $(this).dialog("close");
            }
        }
    });

$("#add-category-btn").live("click", function () {
    var url = $(this).attr('controller');

    $("#add-category-dialog")
        .data('url', url)
        .dialog('open');

    event.stopPropagation();
    return true;

});

コントローラ：

[HttpPost]
public ActionResult Create(Category Category)
{
    if (ModelState.IsValid)
    {
        context.Categories.Add(Category);
        context.SaveChanges();
    }

    return Json(new { Success = Category.CategoryID > 0, Category });
}

意見：

var grid = new WebGrid(Model, ajaxUpdateContainerId: "category-grid", canPage: true, rowsPerPage: 30);

@grid.GetHtml(
        tableStyle: "pretty-table",
        headerStyle: "ui-widget-header",
        columns: grid.Columns(
        grid.Column("CategoryID", "Id", canSort: true, format: @<b>@item.CategoryID</b>),
        grid.Column("Name", "Name", canSort: true, format: @<b>@item.Name</b>)
        )
    )
4

1 に答える 1

0

次の行では、現在のページの最後の行として新しい行を追加しています。

$('.pretty-table tr:last').after('<tr><td>....</td></tr>');

ページングを使用する WebGrid は、特定のページの行のみを表示します。したがって、生成される終了 html (テーブル >tr) は、その特定のページに対してのみになります。したがって、上記の jQuery 行は、生成された html の最後の行を見つけて、その後に行を挿入します。あなたの場合、おそらく最初のページです。最後のページ (または最初と最後の間の任意のページ) に移動してから、新しい行を追加して、これがどのように行われているかを確認してください。

コントローラーのコードは問題ないように見えるので、ajax 呼び出しが成功した場合は何もしないでください。上記の行にコメントを付けて、コードをテストしてください。新しい行を追加し、最後のページに移動します。新しい行がそこに表示されます。

于 2011-08-29T11:14:48.407 に答える