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;
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>
