How to lock page while loading data correctly

amin khosravi 21 Reputation points
2022-04-07T04:42:12.467+00:00

In my ASP.NET Core MVC project when the user fills the form and hits send button, a message is shown to the user and the button is locked. The problem is even without filling the form on hitting the button it shows the message. I have client-side validation on the page; When you hit send button without filling all the input fields, Validation tags appear. I know I should check if every input field value is not null and then on hitting the button the message is to be shown, But I don't know how to implement that. I tried to check for the Model not to be null but still failed. Any suggestion? Here is my code

<form method="post">
--------a few input fields in a form-------
 <button id="button" type="submit" class="btn btn-lg btn-success">send</button>
</form>
<div class="submit-progress d-none">
    <label>be patient please...</label>
</div>
@section scripts{
    <partial name="_ValidationScriptsPartial" />
    <script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-fileinput/5.2.7/js/fileinput.min.js"></script>
    <script type="text/javascript">
        $(document).ready(function () {
            $("#button").click(function () {
                if(@Model != null){
                        $(this).prop("disabled", true);
                        $(".submit-progress").removeClass("d-none");
                }
        });
    </script>
}
ASP.NET Core
ASP.NET Core
A set of technologies in the .NET Framework for building web applications and XML web services.
4,295 questions
0 comments No comments
{count} votes

Accepted answer
  1. Zhi Lv - MSFT 32,056 Reputation points Microsoft Vendor
    2022-04-07T08:20:02.363+00:00

    Hi @amin khosravi ,

    The problem is even without filling the form on hitting the button it shows the message. I have client-side validation on the page; When you hit send button without filling all the input fields, Validation tags appear. I know I should check if every input field value is not null and then on hitting the button the message is to be shown, But I don't know how to implement that. I tried to check for the Model not to be null but still failed

    First, since you doesn't provide any thing relates the model validation, I assume you are using the DataAnnotations built-in validation attributes to validate the model. More detail information, see Model validation in ASP.NET Core MVC and Razor Pages

    Then, in the button click function, you should use JQuery to call the valid() method to valid the form, code like this:

    190786-image.png

    You can view the source code from here: 190856-create.txt

    The result like this: you can see that after show the valid success popup window, the create button is disabled.

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

    1 person found this answer helpful.

0 additional answers

Sort by: Most helpful