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

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

C# Producer Consumer using Rabbit MQ

-
So I've been learning about the different message queuing systems and discovered rabbit MQ, an open source and very popular message queuing system. I've created a very basic producer/consumer system that sends a message to a rabbit MQ queue. Producer/Consumer is pretty simple, you have two systems a producer that writes to a queue and a consumer that reads from a queue. This is desirable because it splits responsibility and allows for scalability. The code below is going to assume you have a rabbit MQ instance installed on your local machine. You can get rabbit MQ here:  https://www.rabbitmq.com/ Now the code is broken down into 3 parts, the main program, the producer, and the consumer. This is a basic example so its using old school threading rather than the new async/await .net prefers. But this is just to show how to use rabbit MQ in C# and to demonstrate a producer/consumer example. You will need to make sure your project has the rabbit MQ client nuget package installed...
Read more

C# Form Application in Kiosk Mode/Fullscreen

-
Sometimes you need to have a C# windows form application run in full screen mode.  Like you see on a kiosk at a mall or some stand alone machine.  It's fairly easy you just need to set some of the properties on the Form either in it's OnLoad method or directly in the designer. In the OnLoad method of the main Form set these values, or again set them directly in the designer. this.MaximizeBox = false; this.TopMost = true; this.FormBorderStyle = System.Windows.Forms.FormBorderStyle.None; this.WindowState = System.Windows.Forms.FormWindowState.Maximized;
Read more