For the application I’m currently working on I have a simple interface that I implement in all of the pages. One of the methods is for showing feedback to the user when records are updated or input validation errors arise. The interface looks like this simplified version:
public interface IMyPage {
void ShowFeedback(string message, ModalMessageType messageType);
}
ModalMessageType is an enumerator:
public enum ModalMessageType {
Success,
Caution,
Feedback,
Error
}
The meat of the application’s moving parts are encapsulated in user controls which themselves implement an interface of their own. Here is a simplified version:
public interface ISubordinateCommonView {
IMyPage ContainingPage { get; set; }
}
As you can see the interface provides a property called ContainingPage that allows a reference to the – wait for it – page containing the user control to be passed via the Page_Load event ala
protected void Page_Load(object sender, EventArgs e) {
MyUserControl.ContainingPage = this;
}
The modal panel is made by taking advantage of the ModalPopupExtender control from the Ajax Toolkit. In each page at the bottom is the following markup:
<asp:UpdatePanel UpdateMode="Conditional" ID="udpModalMessage" runat="server" >
<ContentTemplate>
<ajaxToolkit:ModalPopupExtender runat="server" ID="mpModalMessage"
TargetControlID="btnHiddenModalPopupTarget"
PopupControlID="pnlModalMessage"
BackgroundCssClass="modalBackground"
CancelControlID="lkbCloseModalMessage"
/>
<asp:Panel ID="pnlModalMessage" runat="server" Style="display: none;"
DefaultButton="lkbCloseModalMessage">
<asp:Timer ID="tmrTimer" runat="server" Interval="2000" Enabled="false"
ontick="tmrTimer_Tick" />
<div class="divModalMessageWrapper">
<asp:Literal ID="litMessage" runat="server" />
<br />
<asp:LinkButton ID="lkbCloseModalMessage" runat="server"
Text="Continue" OnClick="lkbCloseModalMessage_Click" />
</div>
</asp:Panel>
<asp:Button ID="btnHiddenModalPopupTarget" runat="server" Style="display: none" />
</ContentTemplate>
</asp:UpdatePanel>
Notice that the panel contains a Literal control and a LinkButton. The LinkButton is used to cancel the modal dialog while the Literal control shows the message. The style of the message is determined by the ModalMessageType enum value (see the CSS below). The panel also contains a Timer control which is disabled. In the code behind for the page are ShowFeedback method as well as the handlers for the Timer ontick event and the LinkButton click event.
public void ShowFeedback(string message, ModalMessageTypes messageType) {
litMessage.Text = "";
StringBuilder sb = new StringBuilder();
//the enum vals are used to choose the css class for the div
sb.Append("<div class=\"divModalMessage" + messageType.ToString() + "\" >");
sb.Append(message);
sb.Append("</div>");
litMessage.Text = sb.ToString();
mpModalMessage.Show();
if (messageType == ModalMessageTypes.Error) tmrTimer.Enabled = false;
else tmrTimer.Enabled = true;
}
protected void lkbCloseModalMessage_Click(object sender, EventArgs e) {
mpModalMessage.Hide();
}
protected void tmrTimer_Tick(object sender, EventArgs e) {
mpModalMessage.Hide();
tmrTimer.Enabled = false;
}
Notice in the last two lines of the ShowFeedback method that in my particular scenario I have chosen to have all non-error message automatically dismiss themselves after two seconds. Error messages must be canceled by the user. Putting it all together I can have the following code in my web control:
private void UpdateSomeRecord(string s, int i) {
try {
//code to update the record
ContainingPage.ShowFeedback("Record updated", ModalMessageTypes.Success);
}
catch (Exception ex) {
ContainingPage.ShowFeedback(ex.Message, ModalMessageTypes.Error);
}
}
Here’s the associated css:
.divModalMessageSuccess {
border-width: 2px;
border-style: solid;
border-color: #54864E;
color: #54864E;
background-color: #B8D4B5;
padding: 4px;
}
.divModalMessageCaution {
border-width: 2px;
border-style: solid;
border-color: #B19707;
color: #B19707;
background-color: #F8E78B;
padding: 4px;
}
.divModalMessageFeedback {
border-width: 2px;
border-style: solid;
border-color: #26588A;
color: #26588A;
background-color: #B7CFE7;
padding: 4px;
}
.divModalMessageError {
border-width: 2px;
border-style: solid;
border-color: #980202;
color: #980202;
background-color: #F2C8C8;
padding: 4px;
}