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

Post a Comment

Popular posts from this blog

Javascript numeric only text box

-
So working on an asp.net page I found I needed a numeric only text box that allowed numbers from 0-100 with no decimals. I found a range validator would do most of the work but I wanted to keep users from typing in bad values. So after some searching I found javascript has a good solution. I like whitespace so shrink if you're one of those white space freaks. Update: someone was kind enough to point out an error in my JS! So I went through and made sure it works. And it did need a minor tweak to be correct. So thanks to the poster the corrected script and usage are below. Update Again: This is the new and improved function to allow for the tab key to tab out of the text box. IE allows this by default however Firefox really tightens down the text box and doesn't allow anything you don't specify. So I had to add the tab key press. I also cleaned up the code so it isn't a huge chunk of if blocks and is now much more succinct. Please feel free to test and us...
Read more

String.Replace vs Regex.Replace

-
Image
I recently ran into a situation where I had to do some string manipulation. I had to replace some bad text with valid text. All this had to do with creating valid xml element names. So we had to string white space and some other invalid characters and replace them with valid xml element formatting. To do this we ended up using the Regex.Replace static method. Simply because there was some complexity involved that would have entailed using more then 1 String.Replace call when we can do it all with one regular expression. This caused some discussion about how heavy the regex class is and when to use it. I decided to do some testing and these are my results. First the code static void Main( string[] args ) { // this is our test value string testValue = "This is a test string"; int count; // run the regex replace DateTime regexStart = DateTime.Now; for( count = 0; count < 10000000; count++ ) { string newValue = Regex.Replace( testValue, ...
Read more

Notify Icon Text vs BalloonTipText

-
Ok so I have a small application that shows a users ip address via a tool tip when it sits in their system tray. Everything is going fine until someone sends me a bug that there was a problem. Investigating this I find that the method I was using to display tool tips in the system menu is somewhat flawed. I was using a notify icon control to show the tool tips while in the system tray. This works but I was setting the Text property of the control like this: // old way of setting text, with 64 character limit this.notifyIcon1.Text = "Show me in the toolbar"; This works but only for up to 64 characters. When I was designing the application I was thinking about ip addresses using the v4 format not the v6 format. Sure enough v6 ip addresses kick out more then 64 characters a lot of the time. So the search was on and I found using the balloon text can show more data but is a wee bit harder to use. Balloon tool tips don't show automatically like the text does. You h...
Read more