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.

Hossam Barakat · Accepted Answer · 2015-01-03T00:42:37.863

0

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

edited Jan 03 '15 at 00:42

answered Jan 02 '15 at 20:35

Hossam Barakat

1,399
9
19

Thank you for your answer. Is there anyway to do this by just the Request method? Secondly, am I able to debug/add breakpoints to this code so I can step through it in VS? – SKY Jan 02 '15 at 22:06
@SKY, To post using only the request, you can do it by having a hidden field with the value of filterCheckboxes then you can access that value server side, I have updated my answer to include full example of the Java script and the web method – Hossam Barakat Jan 03 '15 at 00:39
Thank you, your post has been extremely helpful. Also, what is " alert(result.d);//You should access the data using the ".d""? – SKY Jan 03 '15 at 05:19
In addition, what if I don't want to return a value from the server? Would the WebMethod still be useable if it is public static void? – SKY Jan 03 '15 at 05:39
You don't have to return a value just make the return void, and ".d" contain the value return from your we method so if you will make it void then this will be empty – Hossam Barakat Jan 03 '15 at 09:07
I'm still trying to access the filterValues in the server side and I can't. I tried testing with Response.Write(filterValues) but nothing shows after checking several checkboxes. – SKY Jan 04 '15 at 22:44
Can you share your code with me both aspx & code behind – Hossam Barakat Jan 06 '15 at 07:27

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

1 Answers1

Linked