jQuery ajax 插入后渲染新表行

发布于 2024-12-12 06:04:02 字数 200 浏览 0 评论 0 原文

我正在使用 jQuery+webservice 向表中添加新行。我只是感兴趣用数据填充最后插入的行的好方法是什么？

我正在考虑三个选项：

重新加载整个页面？听起来不合逻辑吗
使用 updatepanel
？以某种方式使用成功返回的数据集//真的不知道该怎么做

我感谢任何帮助

原文

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

多谢你的绝情让我学会死心 2024-12-19 06:04:02

您希望 Web 服务方法返回一个字符串数组以作为 s 插入，或者您希望返回一个带有属性的 POCO，该属性将为您提供一个可供您使用的 JSON 对象。

例如，使用字符串数组方法，如果您在名为 WebService.asmx 的文件中有以下 Web 服务方法：

[WebMethod]
public static string[] GetNewRow() {
    var listOfItems = new List<string>();
    // populate the listOfItems here
    listOfItems.Add("100");
    // more here
    return listOfItems.ToArray();
}

然后假设页面上存在 id 为“table1”的表，您的 jQuery 可能如下所示

$.ajax({
    async: true,
    type: 'POST',
    url: 'WebService.asmx/GetNewRow',
    data: "{}",
    contentType: 'application/json; charset=utf-8',
    dataType: 'json',
    success: function(response) {
        var $table1 = $('#table1');
        var contents = response.d; // store the returned array in a variable
        // loop through the array and build up the HTML for the new row.
        // there are much better ways to do this, but I can't think of them right now...
        var html = '';
        for (var i = 0; i < contents.length; i++) {
           html += '<td>' + contents[i] + '</td>';   
        }
        // add the new row to the table
        var $newRow = $('<tr></tr>').append(html).appendTo($table1);
    },
    error: function(msg) {
        // notify the user of the error
        // e.g. by adding it to the table with a special error class
        var $table1 = $('#table1');
        var $newRow = $('<tr></tr>').addClass('errorRow').append('<td></td>').find('td').text(msg.responseText);
        $table1.append($newRow);
    }
});

：您还可以通过一系列其他方法来做到这一点。

注意：我的代码都没有经过测试，接下来的几天我也不会来检查。

我建议您查看令人惊叹的 Dave Ward 网站，http://encosia.com - 它有大量关于从 jQuery 代码调用 .Net 中的 Web 服务的有用帖子。

祝你好运！

You want the web service method to return either an array of strings to insert as <td>s, or you want to return a POCO with properties that will give you a JSON object you can then use.

For example, using the array of strings approach, if you have the following web service method in a file called WebService.asmx:

[WebMethod]
public static string[] GetNewRow() {
    var listOfItems = new List<string>();
    // populate the listOfItems here
    listOfItems.Add("100");
    // more here
    return listOfItems.ToArray();
}

Then assuming a table on your page with an id of "table1" exists, your jQuery might look like:

$.ajax({
    async: true,
    type: 'POST',
    url: 'WebService.asmx/GetNewRow',
    data: "{}",
    contentType: 'application/json; charset=utf-8',
    dataType: 'json',
    success: function(response) {
        var $table1 = $('#table1');
        var contents = response.d; // store the returned array in a variable
        // loop through the array and build up the HTML for the new row.
        // there are much better ways to do this, but I can't think of them right now...
        var html = '';
        for (var i = 0; i < contents.length; i++) {
           html += '<td>' + contents[i] + '</td>';   
        }
        // add the new row to the table
        var $newRow = $('<tr></tr>').append(html).appendTo($table1);
    },
    error: function(msg) {
        // notify the user of the error
        // e.g. by adding it to the table with a special error class
        var $table1 = $('#table1');
        var $newRow = $('<tr></tr>').addClass('errorRow').append('<td></td>').find('td').text(msg.responseText);
        $table1.append($newRow);
    }
});

There are a stack of other ways you could do it, too.

Note: None of my code has been tested, and I won't be around for the next few days to check in.

I recommend you look at the amazing Dave Ward's site, http://encosia.com - it has heaps of helpful posts about calling web services in .Net from jQuery code.

Good luck!

回复收藏 0 原文

~没有更多了~