How to show a loading prompt in view before the controller loaded the data?

Alick Wang 266 Reputation points
2022-05-23T03:27:10.04+00:00

With asp.net core 6.0 mvc

It needs several seconds to load data in controller,before that ,how to show a loading promt in the view?

ASP.NET Core
ASP.NET Core
A set of technologies in the .NET Framework for building web applications and XML web services.
4,164 questions
0 comments
Accepted answer
  1. Zhi Lv - MSFT 32,011 Reputation points Microsoft Vendor
    2022-05-23T07:54:35.78+00:00

    Hi @Alick Wang ,

    Here is a simple sample, you can refer it:

    In the .cshtml page, add a div to show the loading prompt, and use the submit button click event to show the prompt.

    204520-image.png

    You can view the source code from here: 204583-pagecode.txt

    The controller like this:

    204565-image.png

    Then, the result:

    204601-2.gif

    If the answer is the right solution, please click "Accept Answer" and kindly upvote it. If you have extra questions about this answer, please click "Comment".
    Note: Please follow the steps in our documentation to enable e-mail notifications if you want to receive the related email notification for this thread.

    Best regards,
    Dillion

5 additional answers

Sort by: Most helpful
Most helpful Newest Oldest
  1. Alick Wang 266 Reputation points
    2022-05-25T06:57:39.073+00:00

    The situation is a little different.

    Compare with yours,I want show the prompt when visit the page the first time , rather than show the prompt on a loaded page when do sth..

  2. Alick Wang 266 Reputation points
    2022-05-30T01:01:13.653+00:00

    @ ZhiLv-MSFT

    The DIV of loading does not show

    0 comments
  3. Zhi Lv - MSFT 32,011 Reputation points Microsoft Vendor
    2022-06-02T07:44:04.763+00:00

    Hi @Alick Wang ,

    The DIV of loading does not show.

    Try to use F12 developer tools to check if there any error? Or might be it is too fast to show and disappear.

    You can also refer the following sample code: 207746-indexcshtml.txt

    207730-image.png

    The result as below:

    207784-2.gif

    If the answer is the right solution, please click "Accept Answer" and kindly upvote it. If you have extra questions about this answer, please click "Comment".
    Note: Please follow the steps in our documentation to enable e-mail notifications if you want to receive the related email notification for this thread.

    Best regards,
    Dillion

  4. Alick Wang 266 Reputation points
    2022-06-03T09:45:37.09+00:00

    Odd problem :
    loading = document.getElementsByClassName("loading")[0];

    I can not get the object.

    I use layout:
    @{
    Layout = "_Layout_own_layui";

    }

    The _Layout_own_layui:
    <!DOCTYPE html>

    <html>
    <head>
    <meta name="viewport" content="width=device-width" />
    <title>@ViewBag.Title</title>
    <link href="~/lib/layui/css/layui.css" rel="stylesheet" />
    <script src="~/lib/jquery/jquery.min.js"></script>
    @RenderSection("Scripts", required: false)
    </head>
    <body>
    <script src="~/lib/layui/layui.js"></script>
    <div>
    @RenderBody()
    </div>
    </body>
    </html>

    I think the problem is not in the view,before the action finished ,the view would not render anything?

    0 comments