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>