使用 JQuery 和 JavaScript 进行 Gridview 操作答案

【问题标题】：Gridview manipulation using JQuery and JavaScript使用 JQuery 和 JavaScript 进行 Gridview 操作
【发布时间】：2009-12-15 18:19:59
【问题描述】：

我有一个想要使用 JavaScript/JQuery 操作的 ASP.NET 网格视图。我认为我的方法会遇到的问题是，服务器不会知道我通过 gridview 添加的行，因为 gridview 控件的 html 表示与存在于服务器。所以这是我需要做的：

我需要在用户提交数据时追加到gridview，并将输入的一批数据中的每一行提交到服务器进行处理。因为我有其他 ASP.NET 控件将包含我要提交的数据，所以我想通过传统的回发将所有这些数据提交到服务器。

如果可能，我该如何实施这种方法？
如果不可能，请您解释一下吗？

非常感谢您的帮助。

【问题讨论】：

标签： asp.net javascript jquery gridview

【解决方案1】：

var queryString = "";

// This could be based on a number of different events
$('#finishButton').click(function(){

    // Iterate through each input (you could add other form elements)
    $('#myForm input').each(function(){

        // Build your query string to post to your aspx page
        queryString += $(this).attr("name") + "&" + $(this).val() + ",";

    });
});

// Make sure special chars are escaped
queryString = escape(queryString);

// POST the form to your aspx page
$.ajax({ 
    type: 'POST', 
    url: 'myFormProcessor.aspx', 
    data: queryString,
    // Upon a successful POST, successHandler will be called 
    success: successHandler 
});

// Add the new data to the grid
function successHandler(){

    // Clone the last row
    $('#myTable tr:last').clone(true).insertAfter('#myTable tr:last');

    // Here you could just break apart the query 
    // string you build in the above code
    // and use those values to change the values 
    // in the row you added to the grid

}

确保在您的 aspx 页面中取消转义查询字符串，然后按您使用的分隔符将其分解。我使用“&”来分隔变量（输入）之间的键/值和逗号。

【讨论】：