c# - 我想使用 jquery 将行插入到 WebGrid 中

Question

我想使用 Jquery 将行插入到 webgrid 中。我将从页面上的文本框中获取我的值。

var grid1 = new WebGrid(Model.dsvm as IEnumerable<ASP_Upload_Version_1.Models.Share_Template>, canPage: true, canSort: false);
                            @grid1.GetHtml(tableStyle: "table table-sm table-striped table-bordered table-condensed",
                            htmlAttributes: new { @id = "GridPractice", @class = "table table-sm table-striped table-bordered table-condensed", @style = "width:100%" },
                            columns: grid1.Columns(
                            grid1.Column("PracticeArea", "Practice Area"),
                            grid1.Column("MarketArea", "Market Area"),
                            grid1.Column(format: @<text>
                                    <a data-title="Are you sure to deactivate this Input?"><i class="fa fa-trash" style="color:red"></i></a></text>, header: "Remove")));

我尝试使用以下 jquery 操作，没有产生任何结果

$('#Submit_AddRow1').click(function () {
            var row = GridPractice.find("tr").eq(1)
            SetValue(row, 0, $('#txtPracticeArea').val());
            SetValue(row, 1, $('#txtMarketArea').val());
            $('#GridPractice').append(row);
        })

Answer 1

以下 jquery 函数有效:

$("#Submit_AddRow1").click(function () {
    //Reference the WebGrid.
    var webGrid = $("#GridPractice");

    //Reference the first row.
    var row = webGrid.find("tr").eq(1);

    //Check if row is dummy, if yes then remove.
    if ($.trim(row.find("td").eq(0).html()) == "") {
    row.remove();
    }

    //Clone the reference first row.
    row = row.clone(true);

    //Reference the Practice Area TextBox.
    var txtfoo = $("#txtfoo");

    //Reference the Market Area TextBox.
    var txtbar = $("#txtbar");

    //Add the Practice Area value to first cell.
    SetValue(row, 0, txtfoo);

    //Add the Market Area value to second cell.
    SetValue(row, 1, txtbar);

    //Add the row to the WebGrid.
    webGrid.append(row);
});

function SetValue(row, index, textbox) {
    //Reference the Cell and set the value.
    row.find("td").eq(index).html(textbox.val());

    //Clear the TextBox.
    textbox.val("");
}