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; 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> <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 { get; set; } 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 != null) this.Accept(sender, e); } private void HideDialogue(object sender, EventArgs e) { this.Hide(); if (this.Cancel != null) this.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:
Post a Comment