Page loading using asynchronous in asp.net

Question

friends.

I am dynamically building a screen in asp.net

I want to print the loading page first using an asynchronous method, but the screen does not change on the loading spinner(method). Is it because there is no return value?

How to draw the loading page first?

FYI. i prepare pure c# code.

here is the code.

    protected void Page_Load(object sender, EventArgs e)
    {
        inittask();
        LoadingSpinner();
    }

    public async void inittask()
    {
        await Layout();
    }

    private async Task Layout()
    {   
        await Task.Run(() =>
        {
            HtmlGenericControl div_side = new HtmlGenericControl("div");
            div_side.ID = "div_side";
            div_side.Style.Add(HtmlTextWriterStyle.Width, "15%");
            div_side.Style.Add(HtmlTextWriterStyle.Height, "90%");
            div_side.Style.Add("float", "left");
            div_side.Style.Add(HtmlTextWriterStyle.BackgroundColor, "#f3ba31");

            HtmlGenericControl div_header = new HtmlGenericControl("div");
            div_header.ID = "div_header";
            div_header.Style.Add(HtmlTextWriterStyle.Width, "85%");
            div_header.Style.Add(HtmlTextWriterStyle.Height, "15%");
            div_header.Style.Add("float", "right");
            div_header.Style.Add(HtmlTextWriterStyle.BackgroundColor, "#0094ff");

            HtmlGenericControl div_contents = new HtmlGenericControl("div");
            div_contents.ID = "div_contents";
            div_contents.Style.Add(HtmlTextWriterStyle.Width, "85%");
            div_contents.Style.Add(HtmlTextWriterStyle.Height, "75%");
            div_contents.Style.Add("float", "right");
            div_contents.Style.Add(HtmlTextWriterStyle.BackgroundColor, "#cc653e");

            HtmlGenericControl div_footer = new HtmlGenericControl("div");
            div_footer.ID = "div_footer";
            div_footer.Style.Add(HtmlTextWriterStyle.Width, "100%");
            div_footer.Style.Add(HtmlTextWriterStyle.Height, "10%");
            div_footer.Style.Add("float", "right");
            div_footer.Style.Add(HtmlTextWriterStyle.BackgroundColor, "#808080");

            this.form1.Controls.Add(div_side);
            this.form1.Controls.Add(div_header);
            this.form1.Controls.Add(div_contents);
            this.form1.Controls.Add(div_footer);
        });          
    }

    private void LoadingSpinner()
    {
        //loading
        HtmlGenericControl loadingpanel = new HtmlGenericControl("div");
        loadingpanel.ID = "loadingpanel";
        loadingpanel.Style.Add(HtmlTextWriterStyle.Width, "100%");
        loadingpanel.Style.Add(HtmlTextWriterStyle.Height, "100%");
        loadingpanel.Style.Add(HtmlTextWriterStyle.ZIndex, "1000");
        loadingpanel.Style.Add(HtmlTextWriterStyle.BackgroundColor, "White");


        HtmlGenericControl div_loading = new HtmlGenericControl("div");
        div_loading.ID = "div_loading";
        loadingpanel.Controls.Add(div_loading);

        HtmlGenericControl label_loadingtext = new HtmlGenericControl("label");
        label_loadingtext.ID = "label_loadingtext";
        label_loadingtext.InnerText = "Loding...";
        loadingpanel.Controls.Add(label_loadingtext);

        this.form1.Controls.Add(loadingpanel);
    }

see the answer below. You can't have ANY await commands in your code behind - that will not work. The web page travels from the server to the client, displays the page. The code behind events MUST finish and THEN and ONLY then is the WHOLE page sent down to the client. So, any await command in code behind will result in the page waiting and being stuck on the server side until such time code is 100% DONE and THEN the page travels down to the browser side. So any AWAIT defeats the whole purpose - the code waits and if the code waits then the page waits also. — Albert D. Kallal
– Albert D. Kallal, Commented May 18, 2021 at 21:05
You have to let/send the WHOLE page go to client side, and it can display your spnner or whatever, and then of course either with a timer, or on page ready, the js has to make a ajax call to do whatever and then when done, you update the page, or even consider the client side js triggers a post back which then renders a whole new page. So you HAVE to get a web page down to the client side FIRST - and that page can thus display that spinner or whatever - and THEN you make the ajax call to run that time consuming process. At that point, the js code can refresh the page with the new content — Albert D. Kallal
– Albert D. Kallal, Commented May 18, 2021 at 21:07

Stephen Cleary · Accepted Answer · 2021-05-18 15:48:56Z

2

HTTP is a request/response protocol. The browser requests the page; the server sends the page. It is not possible for the browser to request the page, the server to send the page, and then the server to send a replacement page. async doesn't change the HTTP protocol.

If you want to display a page quickly and then update it, then you'll need to use AJAX or UpdatePanel.

answered May 18, 2021 at 15:48

Stephen Cleary

460k78 gold badges721 silver badges858 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Page loading using asynchronous in asp.net

1 Answer 1

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related