question

AlickWang-0576 avatar image
0 Votes"
AlickWang-0576 asked AlickWang-0576 answered

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

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?

dotnet-aspnet-core-mvc
5 |1600 characters needed characters left characters exceeded

Up to 10 attachments (including images) can be used with a maximum of 3.0 MiB each and 30.0 MiB total.

ZhiLv-MSFT avatar image
0 Votes"
ZhiLv-MSFT answered

Hi @AlickWang-0576,

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


image.png (185.9 KiB)
pagecode.txt (4.0 KiB)
image.png (25.7 KiB)
2.gif (406.7 KiB)
5 |1600 characters needed characters left characters exceeded

Up to 10 attachments (including images) can be used with a maximum of 3.0 MiB each and 30.0 MiB total.

AlickWang-0576 avatar image
0 Votes"
AlickWang-0576 answered ZhiLv-MSFT commented

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..

· 1
5 |1600 characters needed characters left characters exceeded

Up to 10 attachments (including images) can be used with a maximum of 3.0 MiB each and 30.0 MiB total.

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..

In this scenario, you can show the loading progress use window.onload, refer to this sample: Display (Show) Loading Progress GIF Image when Page Loads in ASP.Net MVC.

0 Votes 0 ·
AlickWang-0576 avatar image
0 Votes"
AlickWang-0576 answered

@ ZhiLv-MSFT

The DIV of loading does not show

5 |1600 characters needed characters left characters exceeded

Up to 10 attachments (including images) can be used with a maximum of 3.0 MiB each and 30.0 MiB total.

ZhiLv-MSFT avatar image
0 Votes"
ZhiLv-MSFT answered

Hi @AlickWang-0576,

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



indexcshtml.txt (4.3 KiB)
image.png (103.3 KiB)
2.gif (117.4 KiB)
5 |1600 characters needed characters left characters exceeded

Up to 10 attachments (including images) can be used with a maximum of 3.0 MiB each and 30.0 MiB total.

AlickWang-0576 avatar image
0 Votes"
AlickWang-0576 answered

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?

5 |1600 characters needed characters left characters exceeded

Up to 10 attachments (including images) can be used with a maximum of 3.0 MiB each and 30.0 MiB total.