Every new beginner from windows form development background uses MsgBox.Show method but unfortunately it executes server side and will display the message box on server. Then they ask it on different forums seeking help, how to display message box in Asp.net then? (one of the most frequent and common question on asp.net forums)
There are various ways to do it.
- Use JavaScript alert to display messagebox, confirm and prompt
- Download alert control from codeplex and use it.
- Use Modal Popup or Confirm Button from Ajax Toolkit
- Use JQuery UI Dialog
You can use any JQuery based dialog box. I’ve been using Jalert for quite a long time. It is easy to use and you can quickly customize as per the need. One of the best part of Jalert is that it allows you to perform certain activity by using Callback function. Before using Jalert, make sure you’ve referenced JQuery in your project.
Note: Jalert is no longer actively maintained and they recommend to use JQuery UI Dialog.
Now, how do you display it from server side?
public enum EnmMsgType
{
ALERT,
PROMPT,
SUCCESS,
ERROR,
WARNING
}
/// <summary>
/// Displays Message box
/// </summary>
/// Message to be displayed
/// Title of the message
/// Type of the message to be displayed
/// Function to be executed after message has been displayed
public static void MsgBoxAlert(string strMsg, string strTitle, EnmMsgType strMsgType, string strCallBack)
{
Page mypage = default(Page);
string strScript = string.Empty;
try
{
string cleanMessage = strMsg.Replace("'", "\\'");
strScript = GetMessageBoxScript(strTitle, strCallBack, strMsgType, cleanMessage);
//Gets currently executing page
mypage = HttpContext.Current.CurrentHandler as Page;
// Checks if the handler is a Page and that
//if the startup script is already registered.
if (mypage != null && !mypage.ClientScript.IsStartupScriptRegistered("alert"))
{
mypage.ClientScript.RegisterStartupScript(mypage.GetType(), "alert", strScript);
}
}
catch (Exception ex)
{
//Your exception handling code here
}
}
You can name function whatever you want. As shown in the above code, strCallBack parameter accepts name of the function which will be called in case you want to perform certain action after Messagebox or Confirmation dialog has been displayed to user and user presses OK button. If you don’t want to call any function, just pass an empty string to function in the above code.
private static string GetMessageBoxScript(string strTitle, string strCallBack, EnmMsgType MsgType, string cleanMessage)
{
string strClass = GetMessageboxClass(MsgType);
StringBuilder sbMessageScript = new StringBuilder();
sbMessageScript.Append("");
sbMessageScript.Append("$(document).ready(function(){");
sbMessageScript.Append("jAlert('");
sbMessageScript.Append(cleanMessage);
sbMessageScript.Append("','");
sbMessageScript.Append(strClass);
sbMessageScript.Append("','");
sbMessageScript.Append(strTitle);
sbMessageScript.Append("'");
if (strCallBack != string.Empty)
{
sbMessageScript.Append(",");
sbMessageScript.Append(strCallBack);
}
sbMessageScript.Append(");});");
sbMessageScript.Append("");
return sbMessageScript.ToString();
}
Below function will return appropriate class based on Message Type being passed. You have to have those classes added in your CSS file. As per the class respective image will be displayed in message box, just like windows message box.
/// <summary>
/// Gets the messagebox class.
/// </summary>
/// Type of the Message
///
private static string GetMessageboxClass(EnmMsgType strMsgType)
{
string strClass = String.Empty;
if (strMsgType == EnmMsgType.ALERT)
{
strClass = "alert";
}
else if (strMsgType == EnmMsgType.SUCCESS)
{
strClass = "success";
}
else if (strMsgType == EnmMsgType.ERROR)
{
strClass = "error";
}
else if (strMsgType == EnmMsgType.WARNING)
{
strClass = "warning";
}
return strClass;
}
Check out the below example :
![jAlert jAlert](https://i0.wp.com/nileshthakkar.com/wp-content/uploads/2023/05/5369a-jalert_thumb25255b525255d.jpg?resize=449%2C134)
I hope it will be helpful to every beginner from Windows Forms background. If you have any query/suggestion, please comment. 🙂
Leave a Reply