Friday, February 3, 2012

ProudMonkey MessageBox Controls for WebForms



USING THE CONTROLS
The MessageBox Control - This control give you the option to prompt different message types such as information, Warning, Success operations and Error message types. This control can be called via server side or client side. Here are some screen shots of the MessageBox control.
How to Use it?
1. Download and extract the ProudMonkey.Common.Controls.dll
2. Add the ProudMonkey.Common.Controls.dll and the AjaxControlToolkit.dll in your project solution
3. Right click on the project and select Add Reference
4. Click on the Browse tab and locate the two dlls mentioned in step 2
5. Click OK
6. Register the controls by adding the following lines below at the top most part of your page (ASPX).

<%@ Register assembly="ProudMonkey.Common.Controls"
             namespace="ProudMonkey.Common.Controls" tagprefix="cc1" %>
<%@ Register assembly="AjaxControlToolkit" 
             namespace="AjaxControlToolkit" tagprefix="asp" %>


7. Since the MessageBox control uses ASP.NET AJAX (AjaxControlToolKit 3.0.1106.0) then be sure to use the ToolkitScriptManager instead of ScriptManager. The ToolkitScriptManager can be found at the AjaxControlToolKit controls.
8. After that define the MessageBox control like below:

<cc1:MessageBox ID="MessageBox1" runat="server" />

 
9. Then you're good to go =}
Using The MessageBox Control
A . Server Side Approach (code behind)
MessageBox1.ShowError("Your Message");//Displaying an Error message 
MessageBox1.ShowWarning("Your Message");//Displaying a Warning message
MessageBox1.ShowInfo("Your Message");//Displaying an Information message
MessageBox1.ShowSuccess("Your Message");//Displaying a Successful message
Using the code above allows you to display the message box with its default size [ H(125) and W(300)]. If you want to set the MessageBox size by hand then you can use the overload method like: 

MessageBox1.ShowError("Your Message",300,400);
 

B. Client Side Approach (JavaScript)

ShowMsgBox('Error','Sample Error Message.');

Using the code above allows you to display the message box with its default size [H(125) and W(300)].If you want to set the MessageBox size by hand then you can use the overload method like:

ShowMsgBox('Error','Sample Success Message.',125,300);


Note that if you don't want to postback to the server after clicking OK then be sure to include "return false;" after calling the ShowMsgBox() method in the client.
The client side usage of the MessageBox control is quite different because we'll need to tell the method which message type we want to show to the user by specifying the first parameter as demonstrated above. So if you are going to display different message types via JavaScript then you can use either of these values below as the first parameter:
  • error
  • success
  • info
  • warning

The ConfirmBox Control - this customized control was created to provide a fancier look and feel confirmation message and added the “Don’t ask me again” option to end users. As we know, our standard thus far has been to include this confirmation step at every place within the application where we allow the user to perform a delete or critical operations.  For some users this confirmation step has become a little annoying.  So I have decided to look into what it would take to include the typical 'don't ask me question again' checkbox to my ConfirmationBox control.

Below is a sample screen shot of the ConfirmBox control:
Notes:
  • The "Don't ask me again" option will only be remembered across session, so if the page will be loaded again or refreshed then the confirmation box will display as normal.
  • The "Don't ask me again" option is unique for each control who calls it, so if you opt to display the confirm box for the Delete button then "Don't ask me again" will ONLY be applied for that control.
  • The default focus is set to NO
  • This control can only be called via client side

Sample Usage of the ConfirmBox Control:
ASPX Source:
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
</head>
<body>
    <form id="form1" runat="server">
    <div>
        <asp:ToolkitScriptManager ID="ToolkitScriptManager1" runat="server">
        </asp:ToolkitScriptManager>
        <asp:Label ID="Label1" runat="server" Text="Label"></asp:Label>
        <cc1:ConfirmBox ID="ConfirmBox1" runat="server" />
        <asp:Button ID="Button1" runat="server" Text="Button" onclick="Button1_Click"
         OnClientClick="ShowConfirmBox(this,'Are you Sure'); return false;" />
    </div>
    </form>
</body>
CODE BEHIND:

using System;
using System.Web;
public partial class YetAnotherTest : System.Web.UI.Page
{
    protected void Page_Load(object sender, EventArgs e) {

    }
    protected void Button1_Click(object sender, EventArgs e) {
        Label1.Text = "PostBack Occured!";
    }
}

The FrameBox Control – This customized control was created to allow you to display a modal type of window for displaying external or internal sites within it. This control also provides an attribute in which developers can dynamically changed the header text of the frame. Take a look at the sample screen show below:
Sample Usage of FrameBox Control:

<%
@ Register assembly="ProudMonkey.Common.Controls" namespace="ProudMonkey.Common.Controls" tagprefix="cc1" %>
<%@ Register assembly="AjaxControlToolkit" namespace="AjaxControlToolkit" tagprefix="asp" %>

<!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></title>
</head>
<body>
    <form id="form1" runat="server">
    <asp:ToolkitScriptManager ID="ToolkitScriptManager1" runat="server"/>
    <cc1:FrameBox ID="FrameBox1" runat="server" />
    <asp:Button ID="Button1" runat="server" Text="Button" OnClientClick="ShowFrameBox('Vinz Blog','http://geekswithblogs.net/dotNETvinz/Default.aspx');return false;" />
    </form>
</body>
</html>
That's it! I hope you'll find this control useful. Please let me know if you find any bugs. Also comments, suggestions and criticisms are welcome! =}


NOTE: Thanks To Vinz's Blog Credit Foes To Him...Iam Just the Media


For More Details Visit:http://proudmonkeycontrols.codeplex.com/
Posted by at

No comments:

Post a Comment

Subscribe to: Post Comments (Atom)