If need to show a Dialog :
<%@ Control Language="C#" AutoEventWireup="true" CodeBehind="EdasDialog.ascx.cs" Inherits="CRMWeb.eDASWeb.UserControl.EdasDialog" %>
<style type="text/css">
/*
popup buttons
*/
.edas_dlg_close_button
{
float: right;
background-color: #696969;
width: 115px;
height: 31px;
border: none;
color: #FFF;
font-size: 15pt;
margin-right: 20%;
cursor: pointer;
margin-bottom: 10px;
}
.edas_dlg_new_txn_yes
{
float: right;
background-color: #a9a9a9;
width: 80px;
height: 31px;
border: none;
color: #FFF;
font-size: 15pt;
cursor: pointer;
}
.edas_dlg_new_txn_no
{
float: right;
background-color: #696969;
width: 80px;
height: 31px;
border: none;
color: #FFF;
font-size: 15pt;
cursor: pointer;
}
</style>
<div id="div_edas_dlg_background_alert" runat="server" enableviewstate="True" style="position: fixed;
left: 0; top: 0; bottom: 0; z-index: 10; width: 100%; background-color: grey;
opacity: 0.4">
</div>
<div id="div_edas_dlg_background_confirm" runat="server" enableviewstate="True" style="position: fixed;
left: 0; top: 0; bottom: 0; z-index: 10; width: 100%; background-color: grey;
opacity: 0.4">
</div>
<div id="div_edas_alert" enableviewstate="True" runat="server" style="position: absolute;
left: 0; top: 40%; z-index: 1000; background-color: white; width: 80%; margin-left: 10%;">
<div style="float: left; margin-left: 20%">
<asp:Label runat="server" ID="lblEdasDlgAlert"></asp:Label>
</div>
<br />
<br />
<div>
<asp:Button type="button" ID="btnEdasDlgAlert" formnovalidate CssClass="edas_dlg_close_button" runat="server" OnClick="btnEdasAlert_Click" />
</div>
</div>
<div id="div_edas_dialog" runat="server" enableviewstate="True" style="position: absolute;
left: 0; top: 40%; z-index: 1000; background-color: white; width: 80%; margin-left: 10%;
padding: 10px;">
<div style="float: left; margin-left: 20%">
<asp:Label runat="server" ID="lblEdasDialogText"></asp:Label>
</div>
<br />
<br />
<div style="float: right; margin-right: 20%;">
<asp:Button Text="Yes" ID="btnEdasDialogYes" formnovalidate CssClass="edas_dlg_new_txn_yes" Style="margin-left: 15px;"
runat="server" OnClick="btnEdasDialogYes_Click" />
<asp:Button Text="No" ID="btnEdasDialogNo" formnovalidate CssClass="edas_dlg_new_txn_no" runat="server"
OnClick="btnEdasDialogNo_Click" />
</div>
</div>
Code behind :
using System;
using System.Collections.Generic;
namespace CRMWeb.eDASWeb.UserControl
{
public enum DialogAction
{
OnClickClose,
OnClickYes,
OnClickNo
};
public partial class EdasDialog : System.Web.UI.UserControl
{
private readonly Dictionary<string, Action> _onClickClose;
private readonly Dictionary<string, Action> _onClickYes;
private readonly Dictionary<string, Action> _onClickNo;
public EdasDialog()
{
_onClickClose = new Dictionary<string, Action>();
_onClickYes = new Dictionary<string, Action>();
_onClickNo = new Dictionary<string, Action>();
}
private string TriggerControlId
{
get { return ViewState["TriggerControlId"] == null ? string.Empty : ViewState["TriggerControlId"].ToString(); }
set { ViewState["TriggerControlId"] = value; }
}
#region Register Callback Handler
public void RegisterCallback(DialogAction actionType, string controlId, Action handler)
{
switch (actionType)
{
case DialogAction.OnClickClose:
if (!_onClickClose.ContainsKey(controlId))
_onClickClose.Add(controlId, handler);
break;
case DialogAction.OnClickYes:
if (!_onClickYes.ContainsKey(controlId))
_onClickYes.Add(controlId, handler);
break;
case DialogAction.OnClickNo:
if (!_onClickNo.ContainsKey(controlId))
_onClickNo.Add(controlId, handler);
break;
default:
throw new ArgumentOutOfRangeException("actionType");
}
}
#endregion
#region Dialogs
public void ShowAlert(string msg,string callbackCtlId = "", string btnText = "Close",int zIndex = 1000)
{
lblEdasDlgAlert.Text = msg;
btnEdasDlgAlert.Text = btnText;
div_edas_dlg_background_alert.Visible = true;
div_edas_alert.Visible = true;
div_edas_alert.Style["z-index"] = zIndex.ToString();
if (!string.IsNullOrWhiteSpace(callbackCtlId))
{
TriggerControlId = callbackCtlId;
}
}
private void CloseAlert()
{
div_edas_dlg_background_alert.Visible = false;
div_edas_alert.Visible = false;
}
public void ShowConfirm(string msg, string callbackCtlId = "",int zIndex = 1000)
{
lblEdasDialogText.Text = msg;
div_edas_dlg_background_confirm.Visible = true;
div_edas_dialog.Visible = true;
div_edas_dialog.Style["z-index"] = zIndex.ToString();
if (!string.IsNullOrWhiteSpace(callbackCtlId))
{
TriggerControlId = callbackCtlId;
}
}
private void CloseConfirm()
{
div_edas_dlg_background_confirm.Visible = false;
div_edas_dialog.Visible = false;
}
#endregion
protected void Page_Load(object sender, EventArgs e)
{
if (!IsPostBack)
{
CloseConfirm();
CloseAlert();
}
}
protected void btnEdasDialogYes_Click(object sender, EventArgs e)
{
if (TriggerControlId != string.Empty && _onClickYes.ContainsKey(TriggerControlId))
{
Action callback;
if (_onClickYes.TryGetValue(TriggerControlId, out callback))
{
callback.Invoke();
}
}
CloseConfirm();
}
protected void btnEdasDialogNo_Click(object sender, EventArgs e)
{
if (TriggerControlId != string.Empty && _onClickNo.ContainsKey(TriggerControlId))
{
Action callback;
if (_onClickNo.TryGetValue(TriggerControlId, out callback))
{
callback.Invoke();
}
}
CloseConfirm();
}
protected void btnEdasAlert_Click(object sender, EventArgs e)
{
if (TriggerControlId != string.Empty && _onClickClose.ContainsKey(TriggerControlId))
{
Action callback;
if (_onClickClose.TryGetValue(TriggerControlId, out callback))
{
callback.Invoke();
}
}
CloseAlert();
}
}
}
Usage :
Step 1 : Register
<%@ Register TagPrefix="dlg" TagName="Dialog" Src="../UserControl/EdasDialog.ascx" %>
Step 2: put on page somewhere
<dlg:Dialog runat="server" ID="EdasDialog"></dlg:Dialog>
Step 3: C# side call
If only need to show a Message (on click “close” , no action needed)
Alert Dialog :
EdasDialog.ShowAlert(MobileNoNotValidMsg,"Close");
Parameter 1 : Pass in the message you want to show
Parameter 2: Pass in the text on button if your scenario need to show a different one , default value is “Close”
If you want to register a callback delegate after click “Close” or ”Yes” or “No”
then you can do like this (Example):
1.register callback action ,dialog action type , control id (need register for each page post back)
Register “Yes” callback action to home button :
EdasDialog.RegisterCallback(DialogAction.OnClickYes, btnHome.ID, () =>
{
var ret = _presenter.StartNewTxn();
if (ret.IsSuccessful)
{
Response.Redirect(PageUrls.CustomerQueueInfoUrl);
}
else
{
EdasDialog.ShowAlert(ret.ErrMsg);
}
});
Register “Close” callback action to mobile check button :
EdasDialog.RegisterCallback(DialogAction.OnClickClose, btnMobileCheck.ID, () =>
{
});
2. Pass in a control id where you show your alert / confirmation dialog
Pass in home button id here :
EdasDialog.ShowConfirm(StartNewTxnMsg, btnHome.ID);
Pass in mobile check button id here :
EdasDialog.ShowAlert(MobileNoNotValidMsg,btnMobileCheck.ID);
If need to show a popup :
<%@ Control Language="C#" AutoEventWireup="true" CodeBehind="EdasPopup.ascx.cs" Inherits="CRMWeb.eDASWeb.UserControls.EdasPopup" %>
<div id="div_edas_popup_background" runat="server" enableviewstate="True" style="position: fixed;
left: 0; top: 0; bottom: 0; z-index: 10; width: 100%; background-color: grey;
opacity: 0.4">
</div>
Code behind :
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web.UI.HtmlControls;
namespace CRMWeb.eDASWeb.UserControls
{
public partial class EdasPopup : System.Web.UI.UserControl
{
/// <summary>
/// pass in all the div ids for flyout , saperate by ';'. e.g : Div1;Div2;Div3
/// </summary>
public string FlyoutDivIdLst
{
get { return ViewState["EdasPopupDivId"] == null ? string.Empty : ViewState["EdasPopupDivId"].ToString(); }
set { ViewState["EdasPopupDivId"] = value; }
}
protected void Page_Load(object sender, EventArgs e)
{
if (!IsPostBack)
{
Close();
}
}
public void Show(string divToShow, int zIndex = 1000)
{
var allIds = CheckSettings();
if (!allIds.Contains(divToShow))
throw new ArgumentException("Only the div Seted in FlyoutDivIdLst can be shown.");
var ctl = Page.FindControl(divToShow) as HtmlContainerControl;
if (ctl == null) throw new Exception("Control should be a Html Container Control");
ctl.Style["z-index"] = zIndex.ToString();
ctl.Style["position"] = "absolute";
if (ctl.Style["left"] == null)
{
ctl.Style["left"] = "15%";
}
if (ctl.Style["top"] == null)
{
ctl.Style["top"] = "15%";
}
if (ctl.Style["background-color"] == null)
{
ctl.Style["background-color"] = "#ffffff";
}
div_edas_popup_background.Visible = true;
ctl.Visible = true;
}
private IEnumerable<string> CheckSettings()
{
var allIds = FlyoutDivIdLst.Split(';');
if (allIds.Length == 0)
throw new ArgumentException("Please set value for flyoutDivIdLst.");
return allIds;
}
public void Close()
{
var ids = CheckSettings();
foreach (var id in ids)
{
var ctl = Page.FindControl(id) as HtmlControl;
if (ctl != null)
{
ctl.Visible = false;
}
}
div_edas_popup_background.Visible = false;
}
}
}
usage :
Step 1 :
Register
<%@ Register TagPrefix="popup" TagName="Popup" Src="../UserControl/EdasPopup.ascx" %>
Step 2:
Put it on page anywhere you like , pass in the div id List you want to popup on your page(for example , I have 5 flyout to popup, just pass all of them split by ‘;’ )
<popup:Popup runat="server" ID="EdasPopup"
FlyoutDivIdLst="print_flyout;email_flyout;credit_card_flyout;div_cash_kiv;div_purchase_confirmation" />
Step 3:
EdasPopup.Show(divId);
EdasPopup.Close();