JQuery AJAX Call for posting data to ASP.Net page ( not Get but POST)

asp.netjquerypost

I have the following jQuery AJAX call to an ASP.Net page. 

             $.ajax({
                async: true,
                type: "POST",
                url: "DocSummaryDataAsync.aspx", //"DocSummary.aspx/GetSummaryByProgramCount",
                contentType: "application/json; charset=utf-8",
                data: kendo.stringify({ vendorId: supplierId, businessUnit: busUnit, productSegmentId: prodSegmentId, programId: progId, productManagerId: prodManagerId, companyIds: compIds, expired: exp.toString(), requestType: 'TotalCount' }),
                success: function (msg) {
                    // alert('in success of getcount');
                },
                error: function (XMLHttpRequest, textStatus, errorThrown) {
                    // alert('in failure of getcount');
                }
            });

When I try to retrieve from Request object, the posted data, it does not show up.
My aspx page code is as below. I am sending each of posted data in Json format to the page, yet it doesn't show up in code-behind of page. Is there some extra setting in jQuery ajax call that I am missing?

   protected void Page_Load(object sender, EventArgs e)
    {
        Response.ContentType = "application/json";
        string requestType = Request.Params["requestType"];
        //populate variables from posted data
        string vendorId = Request.Params["vendorId"];
        string businessUnit = Request.Params["businessUnit"];
        string productSegmentId = Request.Params["productSegmentId"];
        string commitmentProgramId = Request.Params["programId"];
        string productManagerId = Request.Params["productManagerId"];
        string companyIds = Request.Params["companyIds"];
        string expired = Request.Params["expired"];
     }

UPDATE 1: Stephen's answer is the best approach to this, especially the approach that does ProcessRequest. However, I did find a small trick that will allow data to be posted to ASP.Net in the usual traditional manner i.e. like Request["vendorId"] etc. To enable such posting of data from any jQuery ajax request, you simply need to make sure that the following 2 points are applied to your jQuery ajax call:

  1. The content-type should be left out of your jQuery ajax call Or if you want to include it then it should not be set to "application/json; charset=utf-8" but to "application/x-www-form-urlencoded; charset=UTF-8". Content-type, as per my understanding is telling the ASP.Net page the type of data that is being sent, and not the type of data that is expected of the page.
  2. The data part of jQuery ajax should not have the data names enclosed in quotes. So data: {"venorId":"AD231","businessUnit":"123"} should be replaced by data: {vendorId:"AD231",businessUnit:"123"}. In this example the data names are vendorId and businessUnit, which can be accessed in your ASP.Net code-behind using usual ASP.Net syntax like Request["vendorId"] and Request["businessUnit"].

Best Solution

Option 1. Keep your server side code the same

First remove the kendo.stringify. Then either remove the contentType or change it to...

"application/x-www-form-urlencoded; charset=utf-8"

...or change your $.ajax call to this:

$.post('DocSummaryDataAsync.aspx', { vendorId: supplierId, businessUnit: busUnit, productSegmentId: prodSegmentId, programId: progId, productManagerId: prodManagerId, companyIds: compIds, expired: exp.toString(), requestType: 'TotalCount' }, function (data) { });

Option 2. Change the POST to GET

Like this

$.ajax({
async: true,
type: "GET",
etc.

This will pass your data via the QueryString. If you remove the kendo.stringify call you would access all the values like this:

string vendorId = Request.QueryString[0];
string businessUnit = Request.QueryString[1];
etc.

Option 3. Use your original $.ajax call

If you use your original $.ajax, then the following applies:

Request.Params gets a "combined collection of QueryString, Form, Cookies, and ServerVariables items." - this link

You are not working with any of those. Instead, you need to access Request.InputStream.

Here's how you can do that:

Create a class on the server side which maps to the requested JSON object, e.g.

public class MyClass
{
    // The type (int or string) should probably correspond to the JSON
    public int vendorId { get; set; }
    public string businessUnit { get; set; }
    public string productSegmentId { get; set; }
    public string programId { get; set; }
    public string productManagerId { get; set; }
    public string companyIds { get; set; }
    public string expired { get; set; }
    public string requestType { get; set; }
}

Convert Request.InputStream into that type, and then you can use it.

public void ProcessRequest()
{
    System.IO.Stream body = Request.InputStream;
    System.Text.Encoding encoding = Request.ContentEncoding;
    System.IO.StreamReader reader = new System.IO.StreamReader(body, encoding);
    string json = reader.ReadToEnd();
    JavaScriptSerializer serializer = new JavaScriptSerializer();
    MyClass myclass = (MyClass)serializer.Deserialize(json, typeof(MyClass));
    int vendorId = myclass.vendorId;
    string requestType = myclass.requestType;
    // etc...
}
protected void Page_Load(object sender, EventArgs e)
{
    ProcessRequest();
}
Related Question