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

Question

Here's my ajax call:

$(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 {
                }
            }
        });
        });
    });

And my server side code:

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;

        }

I'm just trying to obtain the post URL with the appropriate checked values so I can parse it on the server. However, I'm having trouble obtaining the URL. The string checkedBoxes is supposed to hold a query string like name=value&name=value&name.... but when I test it, the testLabel doesn't show anything. I'm using web forms app, not MVC. Also, I'm new to ajax and their behavior. Thanks.

Answer 1

First, I assume that the url in you JQuery call is valid as there is not aspx extension their.

Second, It looks like what you need to do is create a web method and call it from JQuery for example the following is a web method that accept string

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

and you can call it using the same way with your current code just update the url parameter to include the method name

url: "PageName.aspx/MethodName",

for more details about web methods and their union with JQuery please check this article

Edited The following is complete sample
The web method should look like the following one

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

The client side part of calling the web method should look like the following

$.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"
    }
});

One last thing, If you are using asp.net permanent routing the above code will not work and you should disable it by updating the file "App_Code/RouteConfig.cs" From

settings.AutoRedirectMode = RedirectMode.Permanent;

To

settings.AutoRedirectMode = RedirectMode.Off;

And remember to clear browser cache after the above update