Ajax函数，用于将项目列表检索到asp.net中的C#WebMethod

本文关键字：asp net 中的 C#WebMethod 检索 列表 函数 用于 项目 Ajax | 更新日期: 2023-09-27 17:58:45

我在Asp.net页面中有以下项目列表（示例）：

<ul id="lstFruits">
    <li id="fruit" value="1">Banana</li>
    <li id="fruit" value="2">Apple</li>
    <li id="fruit" value="3">Melon</li>
    <li id="fruit" value="4">Pineapple</li>
    <li id="fruit" value="5">Grape</li>
</ul>

我让这个列表在页面中可以编辑，所以我想构建一个ajax/javascript函数来调用CodeBehind中的C#Web方法，该方法将这个列表作为参数发送。此函数将通过asp:LinkButton调用。

我的问题是：如何编写这个ajax函数？（我做了一些例子，但没有成功）如何将此功能与按钮联系起来？

编辑：

我试着做这个ajax函数：

    $("#btnSave").click(function () {
        $.ajax({
            url: "@FruitsList.aspx/SaveFruitsList",
            data: "{" + 'fruits:' + lstFruits + "}",
            type: 'POST',
            contentType: "application/json",
            success: function (data) {
                alert("Fruits saved successively.");
            },
        });
    });

按钮为：

<asp:LinkButton ID="btnSave" runat="server" CssClass="button" Text="Save" />

注意：我尝试使用OnClick事件，但没有成功。

在codeehind（FruitsList.aspx。cs）中，我不知道如何定义webmethod参数。这个想法是接收一个与水果对应的id列表（或数组），并将它们保存在数据库中。

Ajax函数，用于将项目列表检索到asp.net中的C#WebMethod

尝试将数据参数更改为：

data: JSON.stringify({fruits: lstFruits}),

此外，您的LinkButton onclick也不起作用，因为它是一个asp服务器控件。ID将以不同的方式呈现，并且它将尝试在单击时进行回发。

尝试更改链接按钮，使onclientclick返回错误以防止回发：

<asp:LinkButton ID="btnSave" runat="server" onClientClick="someFunctionName();return false;" CssClass="button" Text="Save" />

然后将onclick函数替换为someFunctionName（），以便它在单击链接按钮时调用它，并且不会回发

回答您对我之前回答的评论。您需要获得列表元素ID的列表。使用jquery，您可以在ajax调用之前在按钮单击函数中执行此操作：

var lstFruits = [];
    alert("hello");
    $("#lstFruits li").each(function() {
  lstFruits.push($(this).text());
});

这将把所有的水果（bannana apple等）放入一个数组中，传递到webmethod中。

您的web方法在c#中应该是这样的。在顶部声明using以使用webmethods。

using System.Web.Services;
[webmethod()]
public static string SaveFruitsList(List<string> fruits) {
 do something
}
相关文章：