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);
    }

Answer 1

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.