ASP.net MVC Ajax.BeginForm with busy icon

So I've been exploring the world of MVC and found it's pretty easy to do a postback to a controller and do it with AJAX and show a busy icon and keep the user from pressing the submit button. This is MVC 5 with the Razor rendering engine. Below is the entire section:

<div id="divSendEmail">
        @using ( Ajax.BeginForm( "SendEmail", "Contact",
            new AjaxOptions { UpdateTargetId = "result", LoadingElementId = "loading", OnBegin= "sendEmailLoad()", OnComplete= "completeSendEmailLoad()" } ) )
        {
            <div id="loading" style="display: none; position: absolute; top: 50%; left: 50%; margin-top: -50px; margin-left: -50px; width: 100px; height: 100px;">
                <img src="~/Content/images/gears_animated.gif" />
            </div>
            <fieldset>
                Name: <input type="text" class="form-control" id="textName" name="textName" required="required" maxlength="255"><br>
                Email: <input type="email" class="form-control" id="textEmail" name="textEmail" required="required" maxlength="255"><br>
                Message: <textarea class="form-control" rows="5" id="textMessage" name="textMessage" required="required"></textarea><br>
                <input type="submit" id="buttonSubmit" name="buttonSubmit" value="Send Email" class="btn btn-primary" />
            </fieldset>
            <div id="result" class="container">
            </div>
        }
    </div>
<script>
        function sendEmailLoad() {
            document.getElementById("buttonSubmit").disabled = true;
            return false;
        }

        function completeSendEmailLoad() {
            document.getElementById("buttonSubmit").disabled = false;
            return true;
        }
    </script>


First is the AjaxBeginForm. We pass the Action, Controller, and AjaxOptions we want to use. The LoadingElementId is a div we have defined that contains an image that is centered in the middle of the screen with an animated gif that is set to not display. The OnBegin is a javascript function that disables the submit button to prevent multiple postbacks. The OnComplete is a javascript function that enables the submit button once the AJAX call is done.

Comments

Popular Posts