There are basically three types of messages supported in
JavaScript
e,g. Confirm(‘Are You sure?’);
e.g. prompt("Please enter name:","Your
name") ;
If you want to get the result of the dialogs (i.e. whether
user clicked yes on Confirmation) you can use a variable to hold the user input
as displayed below.
var result =Confirm(‘Are You sure?’);
if(result==’true’)
{
//logic for Yes
}
else
{
//logic for No
}
If you want additional styling features to be provided,
javascript alone will not provide you the exact solution. Here come jQuery
messages for your rescue.
There are plenty of jqueryUI messages available. I will list
down few here for your references.
In addition to the above you can use javascript’s showModalDialog
to open your customized alert, conformation etc. I’ll explain the steps to create a customized
Confirmation dialog and implement it.
1). Create ConfirmDialog.aspx. Customize the design as per
your requirement
ConfirmDialog.aspx
<%@ Page Language="C#" AutoEventWireup="true"
CodeFile="ConfirmDialog.aspx.cs" Inherits="ConfirmDialog"
%>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0
Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
<head runat="server">
<title>Warning</title>
<script
language="javascript" type="text/javascript">
window.returnValue = '';
</script>
</head>
<body>
<form
id="form1" runat="server">
<table
border="0" cellpadding="0" cellspacing="0"
style="width: 100%">
<tr>
<td
class="popupbg">
<table border="0" cellpadding="0"
cellspacing="0" style="width: 100%">
<tr>
<td class="PopUpcontentbg">
<table border="0" cellpadding="0"
cellspacing="0" style="width: 100%">
<tr >
<td align="center" colspan="2"
class="fieldTextBold" >
<h1> Warning </h1>
</td>
</tr>
<tr>
<td
colspan="2"
valign="top">
<%=message%> </td>
</tr>
<tr>
<td>
</td>
<td
align="center">
<asp:Button
ID="btnOk" runat="server" OnClick="btnOk_Click"
Text="Ok" />
<asp:Button ID="btnCancle"
runat="server" OnClick="btnCancle_Click" Text="Cancel"
/></td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
</table>
</form>
</body>
</html>
The window.returnValue is used to store the button clicked
by the user. When calling the
confirmation dialog, you can pass a
customized text to be displayed in the <%=message%> field.
ConfirmDialog.aspx.cs
using System;
using System.Collections;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;
public partial class ConfirmDialog : System.Web.UI.Page
{
protected string
message = String.Empty;
protected void
Page_Load(object sender, EventArgs e)
{
message =
String.Format("{0}", Request.QueryString["message"]);
}
protected void
btnOk_Click(object sender, EventArgs e)
{
StringBuilder
postBackScript = new StringBuilder();
postBackScript.Append(" <script language=JavaScript> ");
postBackScript.Append(String.Format(" window.returnValue =
'{0}';", "Yes"));
postBackScript.Append(" self.close(); ");
postBackScript.Append(" </script>");
Page.RegisterStartupScript("OkDialog",
postBackScript.ToString());
}
protected void
btnCancle_Click(object sender, EventArgs e)
{
StringBuilder
postBackScript = new StringBuilder();
postBackScript.Append(" <script language=JavaScript> ");
postBackScript.Append(String.Format(" window.returnValue =
'{0}';", "No"));
postBackScript.Append(" self.close();
");
postBackScript.Append(" </script>");
postBackScript.Append(" </script>");
Page.RegisterStartupScript("OkDialog ",
postBackScript.ToString());
}
}
Here I have appended “Yes” as the return value for OK click
and “No” for Cancel click.
2). Create Dialogboxhostframe.. This can be used to host
different messages according to the requirement.
Dialogboxhostframe.aspx
<%@ Page Language="C#"
AutoEventWireup="true"
CodeFile="dialogboxhostframe.aspx.cs" Inherits=" dialogboxhostframe"
Title="Assess" %>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0
Transitional//EN" >
<HTML>
<HEAD>
<TITLE>Scheduling</TITLE>
<META
NAME="GENERATOR" Content="Microsoft Visual Studio 7.0">
</HEAD>
<frameset
rows="0,*">
<frame
name="header" src="" scrolling="no" noresize>
<frame
name="main" src='<%=src%>'>
</frameset>
</HTML>
dialogboxhostframe.aspx.cs
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;
public partial
class dialogboxhostframe : System.Web.UI.Page
{
protected
string src = String.Empty;
protected void
Page_Load(object sender, EventArgs e)
{
src =
String.Format("{0}", Request.QueryString["src”]);
}
}
3). Call the window inside your script
var response
=window.showModalDialog('dialogboxhostframe.aspx?src=ConfirmDialog.aspx?message=Are
you sure to continue saving the record.'
, window, 'dialogWidth: 480px; dialogHeight: 158px; resizable: No;
status: No; help: No; unadorned: Yes;');
//check the user response
if (response == 'Yes')
{
//logic for Yes
}
else
{
//logic
for No
}
Cheers
Samitha