adsense

Monday, August 5, 2013

Asp.Net Customized Javascript Messages

There are basically three types of messages supported in JavaScript
  • Alert
           e.g  alert(‘Hello’);
  • Confirm
           e,g.  Confirm(‘Are You sure?’);
  •  Promt
          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" />
        &nbsp;<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

No comments:

Post a Comment