如何使用 Web 表单（不是 MVC）从 ajax Http POST 在服务器端获取选中的复选框值？

Question

这是我的 ajax 电话：

$(function () {

        $("#chkFilter").on("click", "input", function (e) 
        {
            var filterCheckboxes = new Array();
            $("#chkFilter").find("input:checked").each(function () {
                //console.log($(this).val()); //works fine
                filterCheckboxes.push($(this).prop("name") + "=" + $(this).val());
                console.log($(this).prop("name") + "=" + $(this).val());

                //var filterCheckboxes = new Array();
                //for (var i = 0; i < e.length; i++) {
                //    if (e[i].checked)
                //        filterCheckboxes.push(e[i].value);
                //}
            });
        console.log("calling ajax");
        $.ajax({
            url: "/tools/oppy/Default",
            type: "POST",
            dataType: "json",
            data: { filterValues: filterCheckboxes }, // using the parameter name
            success: function (result) {
                if (result.success) {
                }
                else {
                }
            }
        });
        });
    });

我的服务器端代码：

public partial class tools_oppy_Default : System.Web.UI.Page
{
    ...

    protected void Page_Load(object sender, EventArgs e)
    {
        if (Request.HttpMethod == "POST")
        {
            string checkedBoxes = Request["filterValues"];
            testLabel.Text = checkedBoxes;

        }

我只是想获取具有适当检查值的 post URL 以便我可以在服务器上解析它。但是，我在获取 URL 时遇到了问题。字符串 checkedBoxes 应该包含一个查询字符串，如 name=value&name=value&name.... 但是当我测试它时，testLabel 没有显示任何内容。我使用的是 Web 表单应用程序，而不是 MVC。另外，我是 ajax 及其行为的新手。谢谢

Answer 1

首先，我假设您 JQuery 中的 url 调用是有效的，因为它们没有 aspx 扩展名。

其次，看起来您需要做的是创建一个 Web 方法并从 JQuery 调用它，例如以下是一个接受字符串

的 Web 方法

[WebMethod]
public static string GetData(String input)
{
    return DateTime.Now.ToString();
}

您可以使用与当前代码相同的方式调用它，只需更新 url 参数以包含方法名称

url: "PageName.aspx/MethodName",

有关网络方法及其与 JQuery 联合的更多详细信息，请查看 this article

已编辑以下为完整样本
Web 方法应该如下所示

[WebMethod]
public static string GetData(string filterValues)
{
    return filterValues; //This should be updated to return whatever value you need
}

调用 web 方法的客户端部分应如下所示

$.ajax({
    url: "/Default/GetData",
    type: "POST",
    contentType: "application/json; charset=utf-8", //I have added this as "contentType" parameter represents the type of data inside the request meanwhile the "data" parameter describes the data inside the response
    data: "{ filterValues:\"" + filterCheckboxes + "\"}", //Note that I have updated the string here also set the name of the parameter similar to the input of the webmethod
    dataType: "json",
    success: function (result) {
        alert(result.d);//You should access the data using the ".d"
    }
});

最后一件事，如果您正在使用 asp.net 永久路由，上述代码将不起作用，您应该通过更新 "App_Code/RouteConfig.cs" 来自

的文件来禁用它

settings.AutoRedirectMode = RedirectMode.Permanent;

到

settings.AutoRedirectMode = RedirectMode.Off;

并记得在上述更新后清除浏览器缓存

如何使用 Web 表单（不是 MVC）从 ajax Http POST 在服务器端获取选中的复选框值？

How to obtain checked checkbox values on the serverside in c# from an ajax Http POST using web forms (not MVC)?

c#

ajax

checkbox

jquery

webforms