در این مقاله قصد داریم در تکنولوژی ASP آموزشی درباره ایجاد صفحات مدال یا popup با استفاده از jquery ui و همچنین با استفاده از Ajax هنگامی که کاربر روی یک دکمه کلیک کرد یک پیغام به نمایش گذاشته شود، داشته باشیم.

برای شروع یک  پروژه از نوع ASp .Net  ایجاد میکنیم حال روی پروژه راست کلیک کرده ودر Add>NewItem>WebFrom   ر ا انتخاب میکنیم تا یک صفحه Html  برای ما ایجاد کند

ما قصد  داریم  در صفحه Web From  با استفاده از Jquery Ul  یک مدال  یا صفحه popup  ایجاد کنیم  و با استفاده از  Ajax  وقتی کابر روی یک دکمه کلیک کرد یک پیغام به نمایش گذاشته شود

 برای این کار ابتدا بایستی   از دو اسکریپت زیر در صفحه استفاده کنیم

 <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script src="http://ajax.aspnetcdn.com/ajax/jquery.ui/1.8.9/jquery-ui.js" type="text/javascript"></script>

حال برای ایجاد صفحه مدال و نمایش پیام به کاربر از کد های زیر در صفحه Html  ایجاد شده استفاده میکنیم

 <asp:ScriptManager ID="ScriptManager1" runat="server">
</asp:ScriptManager>
<asp:UpdatePanel ID="UpdatePanel1" runat="server">
    <ContentTemplate>
        <div id="dialog" style="display: none">
        </div>
        <asp:Button ID="btnShowPopup" runat="server" Text="Show Popup" OnClick="btnShowPopup_Click" />
    </ContentTemplate>
</asp:UpdatePanel>

حال برای نمایش مدال (Popup)از  اسکریپت زیر استفاده میکنیم

 <script type="text/javascript">
    function ShowPopup(message) {
        $(function () {
            $("#dialog").html(message);
            $("#dialog").dialog({
                title: "jQuery Dialog Popup",
                buttons: {
                    Close: function () {
                        $(this).dialog('close');
                    }
                },
                modal: true
            });
        });
    };
</script>

و در آخر صفحه Web form به صورت زیر میباشد

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script src="http://ajax.aspnetcdn.com/ajax/jquery.ui/1.8.9/jquery-ui.js" type="text/javascript"></script>
<link href="http://ajax.aspnetcdn.com/ajax/jquery.ui/1.8.9/themes/start/jquery-ui.css"
    rel="stylesheet" type="text/css" />
<script type="text/javascript">
    function ShowPopup(message) {
        $(function () {
            $("#dialog").html(message);
            $("#dialog").dialog({
                title: "jQuery Dialog Popup",
                buttons: {
                    Close: function () {
                        $(this).dialog('close');
                    }
                },
                modal: true
            });
        });
    };
</script>
<asp:ScriptManager ID="ScriptManager1" runat="server">
</asp:ScriptManager>
<asp:UpdatePanel ID="UpdatePanel1" runat="server">
    <ContentTemplate>
        <div id="dialog" style="display: none">
        </div>
        <asp:Button ID="btnShowPopup" runat="server" Text="Show Popup" OnClick="btnShowPopup_Click" />
    </ContentTemplate>
</asp:UpdatePanel>

حال برای آن که کاربر روی دکمه کلیک کرد و یک پیام به کابر نمایش دهد کافی در رویداد کلیک دکمه از کد زیر استفاده کنیم

protected void btnShowPopup_Click(object sender, EventArgs e)
{
    string message = مرجع تخصصی برنامه نویسان ";
    ScriptManager.RegisterStartupScript((sender as Control), this.GetType(), "Popup", "ShowPopup('" + message + "');", true);
}