Jquery UI dialog leverages ajax to load server resource via Httphandler

Jquery dialog UI refer to http://blog.nemikor.com/2009/04/08/basic-usage-of-the-jquery-ui-dialog/

1. Create a httphandler (New Item -> Generic httphanler)

namespace TstOpenDialog_SevCallCliScri
{
    public class DialogMessageHandler : IHttpHandler
    {
        public void ProcessRequest(HttpContext context) {
            context.Response.ContentType = "text/plain";
            context.Response.Write("Hello World for dialog box");
        }

        public bool IsReusable {
            get { return false; }
        }
    }
}

2. Add following content into a page.

        <link type="text/css" href="Styles/css/ui-lightness/jquery-ui-1.8.23.custom.css" rel="stylesheet" />
        <script type="text/javascript" src="Scripts/jquery-1.8.0.min.js"></script>
        <script type="text/javascript" src="Scripts/jquery-ui-1.8.23.custom.min.js"></script>
        <script type="text/javascript">
            function getDialogMessage() {
                var dialogOpts = {
                    autoOpen: false,
                    width: 600,
                    title: 'Dialog Title',
                    buttons: {
                        "Ok": function () {
                            $(this).dialog("close");
                        },
                        "Cancel": function () {
                            $(this).dialog("close");
                        }
                    }
                }
                
                $.ajax({
                    url: 'DialogMessageHandler.ashx',
                    success: function (data) {
                        $("<div></div>").html(data).dialog(dialogOpts).dialog('open');
                    }
                });
            }

        </script>

        <style type="text/css">
            /*demo page css*/
            body{ font: 62.5% "Trebuchet MS", sans-serif; margin: 50px;}
            .demoHeaders { margin-top: 2em; }
            #dialog_link {padding: .4em 1em .4em 20px;text-decoration: none;position: relative;}
            #dialog_link span.ui-icon {margin: 0 5px 0 0;position: absolute;left: .2em;top: 50%;margin-top: -8px;}
            ul#icons {margin: 0; padding: 0;}
            ul#icons li {margin: 2px; position: relative; padding: 4px 0; cursor: pointer; float: left;  list-style: none;}
            ul#icons span.ui-icon {float: left; margin: 0 4px;}
        </style>

        <p><a href="#" id="dialog_link" class="ui-state-default ui-corner-all" onclick="getDialogMessage()">
            <span class="ui-icon ui-icon-newwin"></span>Open Dialog</a></p>