Ajax async call Asp.net not giving proper output

Question

I have two ajax calls that I would expect to behave asynchronously

        var toDate = '<%=ucChartDateSelector1.ToDate%>';
        var fromdate = '<%=ucChartDateSelector1.FromDate%>';
        var reportFor = '<%=ucChartDateSelector1.ddlReportType.SelectedItem.Text%>';
        var periodFor = '<%=ucChartDateSelector1.ddlDateSelection.SelectedItem.Text%>';

        $(document).ready(function () {
               GenerateChartReport();
        });

        function GenerateChartReport() {
            $.ajax({
                type: 'POST',
                url: 'Dashboard.aspx/ReadBooking',
                contentType: 'application/json',
                dataType: 'json',
                async: true,
                data: JSON.stringify({ fromDate: fromdate, toDate: toDate, reportFor: reportFor, periodFor: periodFor }),
                success: function (response) {
                    TwoColumnReport(response.d, "chartLine_div", "Google Dealy Example");

                },
                error: function (error) {
                    console.log(error);
                }

            }),
            $.ajax({
                type: 'POST',
                url: 'Dashboard.aspx/GetData', 
                contentType: 'application/json',
                dataType: 'JSON',
                async: true,
                success: function (response) {
                    TwoColumnReport(response.d, "visualization", "Google Charts Example");
                },
                error: function (error) {
                    console.log(error);
                }

            });

            return false;
        }
        function TwoColumnReport(dataValues, mainDivId, reportTitle) {
            var data = new google.visualization.DataTable();
            data.addColumn('string', 'Column Name');
            data.addColumn('number', 'Column Value');

            for (var i = 0; i < dataValues.length; i++) {
                data.addRow([dataValues[i].ColumnName, dataValues[i].Value]);
            }
            new google.visualization.PieChart(document.getElementById(mainDivId)).
               draw(data, { title: reportTitle });
        }

In the Server Side , I have following code. One function has a delay of 2 seconds and the other function has delay of 5 seconds.

[WebMethod]
public static List<Data> GetData()
{
    logger.WriteInfoLog(String.Format("***********GetData Start**********    "));
    int milliseconds = 2000;
    Thread.Sleep(milliseconds);
    List<Data> dataList = new List<Data>();

    dataList.Add(new Data("Column 1", 100));
    dataList.Add(new Data("Column 2", 200));
    dataList.Add(new Data("Column 3", 300));
    dataList.Add(new Data("Column 4", 400));
    logger.WriteInfoLog(String.Format("*********GetData End**********"));
    return dataList;
}

[WebMethod]
public static List<Data> ReadBooking(String fromDate, String toDate, String reportFor, String periodFor)
{
    logger.WriteInfoLog(String.Format("---------ReadBooking Summary Start.   Report type {0}-{3}  DateRange {1}- {2}----- ", reportFor, fromDate, toDate, periodFor));
    int milliseconds = 5000;
    Thread.Sleep(milliseconds);
    List<Data> dataList = new List<Data>();

    dataList.Add(new Data("row 1", 1400));
    dataList.Add(new Data("row 2", 3200));
    dataList.Add(new Data("row 3", 3100));
    dataList.Add(new Data("row 4", 4100));
    dataList.Add(new Data("row 5", 2400));
    logger.WriteInfoLog(String.Format("---------ReadBooking Summary. End----- "));
    return dataList;
}

I expect the log to be in following order:

 --------ReadBooking Summary Start.   Report type Weekly -11 Jan 2016 
   DateRange 11/01/2016 12:00:00 AM- 17/01/2016 12:00:00 AM-----  
   ***********GetData Start**********
        *********GetData End********** 
       ---------ReadBooking Summary. End-----

But the output I am getting is:

 ---------ReadBooking Summary Start.   Report type Weekly -11 Jan 2016  DateRange 11/01/2016 12:00:00 AM- 17/01/2016 12:00:00 AM----- 
---------ReadBooking Summary. End----- 
***********GetData Start**********
*********GetData End**********

What am I missing?

Answer 1

In ASP.NET, if two requests are made from the same session they get exclusive access to the SessionState, aka they run sequentially, not in parallel.

In your example, they both get fired at the same time, but whichever one arrives second gets put in the queue until the first one is finished, because they are both from the Session (based on the SessionId).

You can circumvent the problem by applying the following attribute to your controller:

[SessionState(SessionStateBehavior.Disabled)]

Of course, you won't be able to access the HttpContext.Current.Session property (well, you can, but it will be null)

More references:

• https://msdn.microsoft.com/en-us/library/ms178581.aspx (see the part about Concurrent Requests and Session State)
• Why would multiple simultaneous AJAX calls to the same ASP.NET MVC action cause the browser to block?
• Asynchronous Controller is blocking requests in ASP.NET MVC through jQuery