Thursday, June 17, 2010

How to create a popup dialogue without using AJAX or java scripts - Asp.net

Screenshots:

There are some occations that we need to create popup messages and dialogues without using JavaScripts. (AJAX or JQuery). This article demonstrates how to show a dialogue or a popup using CSS and Asp.net
<%@ Page Language="C#" %>
<html xmlns="http://www.w3.org/1999/xhtml">
<head id="Head1" runat="server">
    <style type="text/css">
        div.DialogueBackground 
        { 
            position:absolute; 
            width:100%; 
            height:100%; 
            top:0; 
            left:0; 
            background-color:#777; 
            opacity:0.5;
            filteralpha(opacity=50); 
            text-align:center; 
        }
        div.DialogueBackground div.Dialogue 
        {
            width:300px; 
            height:100px; 
            position:absolute; 
            left:50%; 
            top:50%; 
            margin-left:-150px; 
            margin-top:-50px; 
            border:solid 10px #aaa; 
            background-color:#fff; 
        }
    </style>
    <script runat="server">
        public void DialogueAccept(object sender, EventArgs e)
        {
            this.ShowHideDialogueInternal(false);
        }
        public void ShowHideDialogue(object sender, EventArgs e)
        {
            Button button = sender as Button;
            this.ShowHideDialogueInternal(button.CommandArgument.Equals("show"));
        }
        private void ShowHideDialogueInternal(bool state)
        {
            this.pnlDialogue.Visible = state;
        }
    </script>
</head>
<body>
    <form id="form1" runat="server">
        <asp:Panel runat="server" ID="pnlDialogue" CssClass="DialogueBackground" Visible="false">
            <div class="Dialogue">
                <p>This is a dialogue</p>
                <div class="ButtonPanel">
                    <asp:Button 
                        runat="server" 
                        ID="btnOK" 
                        Text="OK" 
                        OnClick="DialogueAccept" />
                    <asp:Button 
                        runat="server" 
                        ID="btnCancel" 
                        Text="Cancel" 
                        OnClick="ShowHideDialogue" 
                        CommandArgument="hide" />
                </div>
            </div>
        </asp:Panel>
        <h1>Sample Dialogue using C# (without JavaScripts)</h1>
        <hr />
        <asp:Button 
            runat="server" 
            ID="btnShowDialogue" 
            Text="Show Dialogue" 
            OnClick="ShowHideDialogue" 
            CommandArgument="show" />
    </form>
</body>
</html>

This is a optional Section. 
If you need, you can implement this as a Web Control:
Dialogue Control:
public class Dialogue : Panel
{
    string style = @"
        <style type=""text/css"">
            div.DialogueBackground 
            { 
                position:absolute; 
                width:100%; 
                height:100%; 
                top:0; 
                left:0; 
                background-color:#777; 
                opacity:0.5;
                filter: alpha(opacity=50); 
                text-align:center; 
            }
            div.DialogueBackground div.Dialogue 
            {
                width:300px; 
                height:100px; 
                position:absolute; 
                left:50%; 
                top:50%; 
                margin-left:-150px; 
                margin-top:-50px; 
                border:solid 10px #aaa; 
                background-color:#fff; 
            }
        </style>
    ";
 
    public string Message { getset; }
    public event EventHandler Accept;
    public event EventHandler Cancel;
    public Dialogue()
    {
        this.Visible = false;
        this.Message = "Are you sure?";
        this.CssClass = "DialogueBackground";
    }
    protected override void OnInit(EventArgs e)
    {
        base.OnInit(e);
        this.CreateControlHeirarchy();
    }
    public void CreateControlHeirarchy()
    {
        Button btnOk = new Button() { ID = "btnOK", Text = "OK", ValidationGroup = this.ID };
        btnOk.Click += new EventHandler(DialogueAccept);
        this.Controls.Add(btnOk);
        Button btnCancel = new Button() { ID = "btnCancel", Text = "Cancel", ValidationGroup = this.ID };
        btnCancel.Click += new EventHandler(HideDialogue);
        this.Controls.Add(btnCancel);
    }
    private void DialogueAccept(object sender, EventArgs e)
    {
        this.Hide();
        if (this.Accept != nullthis.Accept(sender, e);
    }
    private void HideDialogue(object sender, EventArgs e)
    {
        this.Hide();
        if (this.Cancel != nullthis.Cancel(sender, e);
    }
    public void Show()
    {
        this.Visible = true;
    }
    public void Hide()
    {
        this.Visible = false;
    }
    protected override void OnPreRender(EventArgs e)
    {
        base.OnPreRender(e);
        if (this.Page != null && this.Page.Header!=null)
            this.Page.Header.Controls.Add(new Literal() { Text = this.style });
    }
    protected override void RenderContents(HtmlTextWriter writer)
    {
        writer.Write("<div class=\"Dialogue\">");
        writer.Write(string.Format("<p>{0}</p>"this.Message));
        writer.Write("<div class=\"ButtonPanel\">");
        base.RenderContents(writer);
        writer.Write("</div>");
        writer.Write("</div>");
    }
}

Page (how you can use the Dialogue control): 
<%@ Page Language="C#" CodeBehind="~/Test.aspx.cs" Inherits="ActiveTest.Test" %>
<html xmlns="http://www.w3.org/1999/xhtml">
<head id="Head1" runat="server">   
 <script runat="server">      
     public void Save(object sender, EventArgs e)
        {
            this.dlgConfirm.Show();
        }
        public void Accept(object sender, EventArgs e)
        {
            ///
            /// Confirmed... we can save data here...
            /// 
        }
        public void Cancel(object sender, EventArgs e)
        {
            
        }   
 </script>
</head>
<body>
 <form id="form1" runat="server">
 <div>
        <asp:Dialogue 
            runat="server" 
            ID="dlgConfirm" 
            Message="Are you want to save this details" 
            OnAccept="Accept" 
            OnCancel="Cancel" />
        <asp:Button runat="server" ID="btnSave" OnClick="Save" Text="Save" />
 </div>
 </form>
</body>
</html>

No comments:

iPhone Launch Screen Sizes

iPhone Portrait iOS 8 Retina HT 5.5 = 1242 X 2208 Retna HD 4.7 = 750 X 1134 iPhone Landscape iOS 8 Retina HD 5.5  2208 X 1242 iPho...