Part 3: Showing ASP.NET Server-Side Messages in a Custom Dialog (Server-side with ASP.NET AJAX)
Scenario:
There are times when you want to display validation or error message(s) to the user in a pop-up dialog. These messages could be coming from client-side or server-side. In this multi-part series I am going to provide you with the code to accomplish this. Yes, I am not going to explain building from scratch but provided you with working sample, which you can integrate in your web site/application. In this part I have shared the code that will work when you are using ASP.NET AJAX UpdatePanel.
Background:
ASP.NET validation controls are great way to let users know about the constraints on your input controls. Using these controls you can display error message next to the control telling users what needs to be corrected. You can check more about those controls here (msdn) or here (quickstarts).
One of the controls is ValidationSummary control. As the name suggests, it displays the summary of the validation i.e. it aggregates and displays the error messages for each failed validation. You can place this control anywhere on the page and not necessarily right next to any control. But if you are running out of space on the page, it has a property – ShowMessageBox – which displays the summary of error messages in a pop-up dialog. But unfortunately this message-box has a default look. There is no way to customize the UI for this dialog. Now if you are like me who want a customized UI, then ValidationSummary is not the control for you and so you need to keep reading.
So instead of using ValidationSummary, I have come up with a script that uses jQuery UI Dialog to display the error message summary.
Road Map:
Here is what I think will be the series like:
- Part-1: Client-side Validation Summary
- Part-2: Include Messages from Server-Side without ASP.NET AJAX
- Part-3: Include Messages from Server-Side using ASP.NET AJAX
Requirements:
- ASP.NET Validation Controls: You must be using ASP.NET Validation Controls. So you will need know at least how to use those controls.
- jQuery UI Dialog: We are going to use jQuery and jQuery UI Dialog. You don’t need to know how they work as I have taken care of it. But you will need those libraries. As I will discuss below, you can download them and include them in your project or you can use CDN, as in the sample provided.
- Styles: I have used jQuery UI smoothness theme but also have some customization. You are free to use your own UI.
Download Available:
The download provided is a two .aspx files which follows single page model i.e. no separate code-behind but is included in same file. Also I have included javascript code in the head of the page instead of a separate file. Though there isn’t any custom styling of UI dialog but no doubt you can do it easily.
What’s in this part?
The sample I am providing in this part shows how we can show messages coming from server-side into jQuery UI Dialog. Here is the screen-shot of which shows dialog with message from server-side. We are going to use ASP.NET UpdatePanel to do asynchronous postback.
This part involves ASP.NET Ajax. I am using ScriptManager and UpdatePanel for asynchronous postback instead of a regular one.
Brief Explanation of the code:
a: error-messag div: This is mandatory for our code / dialog to work. This is the div to which we will hook the jQuery UI Dialog.
<div id="error-messages">
</div>
b: js code: This is the place we need to change mainly to handle partial postback issue with jquery dialog and update panel. If you see I am now using pageLoad function which is called when you are using asp.net ScriptManager+UpdatePanel on your page. Here we re-initialize the dialog and check if we have any message to display in the dialog. It there is one, we clear the error-messages div, append the message to the div and open the dialog.
<script type="text/javascript">
var initcounter = 0;
var errmessage = null;
function pageLoad(sender, args) {
$(function () {
initializedialog();
if (initcounter > 0) {
$("#error-messages").remove();
$("#error-messages").append(errmessage);
$("#error-messages").dialog('open');
initcounter = 0;
errmessage = null;
}
});
}
function initializedialog() {
$("#error-messages").dialog({
autoOpen: false,
hide: 'blind',
minHeight: 125,
maxWidth: 300,
show: 'blind',
title: 'Error(s)!'
});
}
//This function is called from the script injected from code-behind.
function showDialog(message) {
initcounter++;
errmessage = message;
}
</script>
c: Server-side code block:
The code below does is add message to the messages list if textbox has “admin”. In this example we have only one message but you can add as many as you want. Then in the OnPreRender we check if there are any messages i.e. count>0, if so then create UI string. Then create script that we want to inject as startup script using RegisterStartupScript method of the ScriptManager. This is the same code we used in part-2 i.e. it remains unchanged.
<script runat="server">
public List<string> messages = new List<string>();
protected void Button1_Click(object sender, EventArgs e)
{
if (txtName.Text == "admin")
{
lblSuccessMessage.Text = String.Empty;
messages.Add("Invalid String: 'admin'");
}
else
{
lblSuccessMessage.Text = "You entered valid string: " + txtName.Text;
}
}
protected override void OnPreRender(EventArgs e)
{
if (messages.Count > 0)
{
StringBuilder sb = new StringBuilder();
sb.Append("<ul>");
foreach (string str in messages)
{
sb.Append("<li>" + str + "</li>");
}
sb.Append("</ul>");
string script = "$(function(){initializedialog();showDialog(\"" + sb.ToString() + "\");});";
ScriptManager.RegisterStartupScript(this, this.Page.GetType(), "dialog", script, true);
}
base.OnPreRender(e);
}
</script>
Conclusion:
We just saw how we can show messages from server-side in jquery UI Dialog using UpdatePanel i.e. ASP.NET AJAX. Feel free to download the code and play with it. Let me know if there are any issues, questions or anything else.
Resources: