ASP.NET Server does not process pages asynchronously

I have a page with button, and i want to load 2 data grids with data asynchronously by cliking the button.

This is the code of the page, I use jquery to make calls to other 2 pages that will yield me html.

<%@ Page Title="" Language="C#" MasterPageFile="~/MasterPage.master" AutoEventWireup="true" CodeFile="Test.aspx.cs" Inherits="Solutions_CashCenter_StockManagement_Test_Test" %>
<asp:Content ID="Content2" ContentPlaceHolderID="cphCenter" Runat="Server">
<style type="text/css">
    #wait {
    position:absolute;
    top:0px;
    right:10px;
    width:200px;
    z-index:1000;
    vertical-align:middle;
    text-align:center;
    background: #febf00;
    display:none;
}
</style>
<script src='<%= ResolveUrl("../../../../Scripts/jquery-1.4.1.js") %>' type="text/javascript"></script>
<script type="text/javascript">
    $(function () {
        $('#wait')
        .ajaxStart(function () { $(this).show(); })
        .ajaxStop(function () { $(this).hide(); });

        $('input:button').live('click', loadData);
    });

    function loadData() {
        $.get("Source.aspx", {},
        function (data) {
            $('#a1').html(data);
        },
        "html");

        alert('This alert is asynchronous (1st)');

        $.get("Source2.aspx", {},
        function (data) {
            $('#a2').html(data);
        },
        "html");

        alert('This alert is asynchronous (2nd)');
    }
</script>
<div id="test13">
    <input type="button" id="btnLoad" value="Load" />
</div>
<div id="a1"></div>
<div id="a2"></div>
<div id="wait">Please wait <img src="ajax-loading.gif" /></div>
</asp:Content>

Then I have 2 aspx pages, Source1.aspx and Source2.aspx. They only containe a gridDataView and little code in OnLoad event.

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Source.aspx.cs" Inherits="Solutions_CashCenter_StockManagement_Test_Source" %>
<form runat="server">
<cc1:GridDataView runat="server" ID="gridTest" >
</cc1:GridDataView>
<asp:SqlDataSource ID="dsTest" runat="server" ConnectionString="<%$ ConnectionStrings:WebPortalConnectionString %>"
    ProviderName="<%$ ConnectionStrings:WebPortalConnectionString.ProviderName %>">
</asp:SqlDataSource>
</form>

Server-side:

Thread.Sleep(5000);
dsTest.SelectCommand = "SELECT 'test1', 'test2', 'test3'";
this.gridTest.DataSourceID = "dsTest";
this.gridTest.DataBind();

And the same for the second page, but with different data for the grid.

What I have in result is that both alerts happen at once, but the grids are loaded one after one, that is 1st grid appears after 5 seconds, and then second one appers after another 5 sec.
That is the server does not actually process them concurrently.

What am I doing wrong and how should I organize all to work as I need?

Answers:

Thank you for visiting the Q&A section on Magenaut. Please note that all the answers may not help you solve the issue immediately. So please treat them as advisements. If you found the post helpful (or not), leave a comment & I’ll get back to you as soon as possible.

Method 1

This is happens because the session locks the page reads.
So when the one page is loading, the session lock all the rest request until is finish and send the page.

To make it work you need ether to disabled the session on this pages, ether use handler that is not have by default session lock.

Relative questions :

Trying to make Web Method Asynchronous
Web app blocked while processing another web app on sharing same session
What perfmon counters are useful for identifying ASP.NET bottlenecks?
Replacing ASP.Net’s session entirely

All methods was sourced from stackoverflow.com or stackexchange.com, is licensed under cc by-sa 2.5, cc by-sa 3.0 and cc by-sa 4.0