jQuery Modal Dialog Helper in ASP.NET Web Pages

Now that I have been working on a few new projects (which I'm very exited to get launched), I've decided to write them using ASP.NET Web Pages. I am using Visual Studio instead of WebMatrix.  I steered away from Web Forms this time around to try something new and see how it goes. So far so good. I am loving ASP.NET Web Pages and find it very fast and powerful and easy to integrate javascript with data I would normally have trouble with in Web Forms. I will admit, I do miss the whole "code-behind" concept from Web Forms. However, either MVC or architecting out the ASP.NET Web Pages app can make up for it pretty easily.

Anyway, Helpers in Web Pages I have found to be very effective. If any of you use jQuery or jQuery UI, then you understand how awesome they both are.  I created simple Helpers to show a jQuery UI Modal Dialog and I hope you find them useful. They are easy to implement on your web page and easy to implement as a Helper. 

This assumes you have a reference to the propery jQuery scripts either on a layout page or the page you will be using these helpers.  I have made two of them. One for a success message and one for an error message.  You'll notice image reference. They are basically a chosen success icon and error icon, so replace as needed.

Code for the helpers

@helper GetSuccessMessage(string dialogID, string autoOpen, string title, string message)
    {
    <script type="text/javascript">
        $(function () {

            $("#@dialogID").dialog({
                autoOpen: @autoOpen,
                height: 200,
                width: 500,
                modal: true,
                title: '@title',
            });
        });
    </script>
    
    <div id="@dialogID" style="padding: 10px 10px 10px 10px">
        <table cellpadding="5" cellspacing="5" style="width: 100%; border: 1px solid green;">
            <tr>
                <td valign="top">
                    <img src="@Href("~/images/success.png")" alt="success" />    
                </td>
                <td valign="top">
                    @message
                </td>
            </tr>
        </table>
    </div>
    
}

@helper GetErrorMessage(string dialogID, string autoOpen, string title, string message)
{
    <script type="text/javascript">
        $(function () {

            $("#@dialogID").dialog({
                autoOpen: @autoOpen,
                height: 200,
                width: 500,
                modal: true,
                title: '@title',
            });
        });
    </script>
    
    <div id="@dialogID" style="padding: 10px 10px 10px 10px">
        <table cellpadding="5" cellspacing="5" style="width: 100%; border: 1px solid red;">
            <tr>
                <td valign="top">
                    <img src="@Href("~/images/error.png")" alt="error" />    
                </td>
                <td valign="top">
                    @message
                    <br /><br />
                    If problem the persists please email <a href="mailto:something@something.com">support@something.com</a> with a description of your issue.
                </td>
            </tr>
        </table>
    </div>    
}

Now this is how you would use them in your Web Page.

@SiteHelpers.GetSuccessMessage("dialog-success", @isValid.ToString().ToLower(), "", @confirmationMessage)

@SiteHelpers.GetErrorMessage("dialog-error", @isError.ToString().ToLower(), "", @confirmationMessage)

//TODO: rest of code above to perform any action
if(yourVariable)
{
    isValid = true;
    isError = false;
    confirmationMessage = "Item has been updated.";

}                    
else
{
    isValid = false;
    isError = true;
    confirmationMessage = "Error updating item. Please try again";
}

Well I hope you find these jQuery UI Modal Dialogs easy to use in your ASP.NET Web Pages application.  Now that's I've done two full apps, I found myself using them all the time.

References

http://jquery.com/

http://jqueryui.com/demos/dialog/

http://www.asp.net/webmatrix/tutorials/3-creating-a-consistent-look