Remove From My Forums

Blocking the ui from the lient side

Question

User507966498 posted

Hello community,

I have a web app,

One of my views looks like this:

    <div style="bottom:0;margin-left:200px;margin-bottom:300px; ; width:90%;">

        <h2>Ready!</h2>
        <h2></h2>
        <p>To start your process, please the click button below:</p>
        @using (Html.BeginForm("Index", "Process", FormMethod.Post, new { enctype = "multipart/form-data" }))
        {
            <input type="submit" name="Click" value="Start Matching!">
        }
    </div>

When the button is clicked, the following process takes quite a long time and if the button is clicked again consciously or by mistake, the process takes longer. I would like to block the UI or add a "loading spinner" when that button is clicked thus preventing the user from doing anything else until the process is done and redirected to the next page.

I have seen many examples online, Ajax, Jquery, bootstrap... but quite confusing and I dont know where and how to add the information I get.

My controller looks like this:

namespace ksl.Controllers
{
    public class ProcessController : Controller
    {
        // GET: Process
        
        public ActionResult Index()
        {
            return View();
        }
        public ActionResult Fetch()
        {
            return View();
        }
        
        [HttpPost]

       
        public ActionResult Index(string Click)
        {
            if (!string.IsNullOrEmpty(Click))
            {
                System.Threading.Thread.Sleep(5000);
                MainProcessor mainProcessor = new MainProcessor();
                mainProcessor.MetaFolder = @"C:\dev-stage";
                mainProcessor.Initialize();
                mainProcessor.SaveDocumentTables();
            }
            return View("Fetch");
        }
    }
}

Please can someone help me with this. Thank you in advance :)

Thursday, November 7, 2019 2:02 AM

Answers

User665608656 posted

Hi sk209,

According to your requirement, I recommend that you use the jQuery plug-in of blockUI to implement your requirements.

It's very easy to use this plug-in to block the ui after you click the button ,you only need to add a piece of JS code, you can change your index view code as follow:

@{
    Layout = null;
}

<!DOCTYPE html>

<html>
<head>
    <meta name="viewport" content="width=device-width" />
    <title>Index</title>
    <script src="~/Scripts/jquery-3.3.1.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery.blockUI/2.70/jquery.blockUI.js"></script>
    <script>
        $(function () { 
            $('input[type = submit]').click(function () {
                $.blockUI({
                    css: {
                        border: 'none',
                        padding: '15px',
                        backgroundColor: '#000',
                        '-webkit-border-radius': '10px',
                        '-moz-border-radius': '10px',
                        opacity: .5,
                        color: '#fff'
                    }
                }); 
            });
        })
    </script>
</head>
<body>
    <div style="bottom:0;margin-left:200px;margin-bottom:300px; ; width:90%;">

        <h2>Ready!</h2>
        <h2></h2>
        <p>To start your process, please the click button below:</p>
        @using (Html.BeginForm("Index", "Showloading_1107_2161336", FormMethod.Post, new { enctype = "multipart/form-data" }))
        {
            <input type="submit" name="Click" value="Start Matching!">
        }

    </div>
</body>
</html>

Here is the result of this code:

Best Regards,

YongQing.

Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM

Thursday, November 7, 2019 8:00 AM

All replies