My ASP. NET Ajax control -- popupnotificationextender: implements the OWA or messenger style information Prompt window.

Source: Internet
Author: User

Some friends said they wanted to use ASP a few days ago. net Ajax implements an information Prompt window similar to OWA or messenger. When the system has new messages, a prompt panel is displayed in the lower right corner of the screen, where custom messages are placed. As shown in the following figure:

This morning I took the time to publish it in the form of ASP. NET Ajax Control Toolkit extender. Limited by the limitations of the HTTP protocol, you can only use the client pull method to query a web service at intervals. If there is a new message, it will be displayed in an animated form on the client. As shown in the following two figures, the left half is displayed, and the right side is displayed completely (click to view the big picture ):

 

Popupnotificationextender

    1. The prompt window appears/disappears as an animation
    2. Specifies the position of the prompt window on the screen (top left, bottom left, top right, and bottom right)
    3. You can specify the offset of the prompt window to the four positions (upper left, lower left, upper right, and lower right ).
    4. The content and style of the prompt window are completely customizable.
    5. After the window is scaled, the system prompts that the position of the window will be automatically adjusted to keep the relative position unchanged.
    6. You can customize the animation duration when the prompt window is displayed or disappears.
    7. You can customize the display time of the prompt window.
    8. When you hover your mouse over the prompt window, the window will never disappear.
    9. You can specify a web method in a web service and specify the interval between two queries to obtain new messages.
    10. If a new message is displayed, the prompt window appears automatically.

 

Download popupnotificationextender

Before downloading and using the software, read the following Microsoft Permissive license (MS-PL) copyright agreement carefully. If you use this software, you accept the terms of this agreement unconditionally. If you do not accept this agreement, do not use this software.

Microsoft Permissive license (MS-PL)

This license governs use of the accompanying software. If you use the software, you accept this license. If you do not accept the license, do not use the software.

1. Definitions

The terms "reproduce," "Reproduction" and "distribution" have the same meaning here as under u. S. Copyright Law.

"You" means the licensee of the software.

"Licensed patents" means any Microsoft patent claims which read directly on the software as distributed by Microsoft under this license.

2. Grant of rights

(A) Copyright grant-subject to the terms of this License, including the license conditions and limitations in Section 3, Microsoft grants you a non-exclusive, worldwide, royalty-free copyright license to reproduce the software, prepare derivative works of the software and distribute the software or any derivative works that you create.

(B) patent grant-subject to the terms of this License, including the license conditions and limitations in Section 3, Microsoft grants you a non-exclusive, worldwide, royalty-free patent license under licensed patents to make, have made, use, practice, submit, and offer for sale, and/or otherwise dispose of the software or derivative works of the software.

3. conditions and limitations

(A) no trademark license-this license does not grant you any rights to use Microsoft's name, logo, or trademarks.

(B) If you begin patent litigation against Microsoft over patents that you think may apply to the software (including a cross-claim or counterclaim in a lawsuit ), your license to the software ends automatically.

(C) If you distribute copies of the software or derivative works, you must retain all copyright, patent, trademark, and attribution notices that are present in the software.

(D) If you distribute the software or derivative works in source code form you may do so only under this license (I. E ., you must include a complete copy of this License with your distribution ), and if you distribute the software or derivative works in compiled or object code form you may only do so under a license that complies with this license.

(E) The software is licensed "as-is. "you bear the risk of using it. microsoft gives no express warranties, guarantees or conditions. you may have additional consumer rights under your local laws which this license cannot change. to the extent permitted under your local laws, Microsoft excludes the implied warranties of merchantability, fitness for a particle purpose and non-infringement.

    1. Download the DLL of this control here: dflying.ajax.popupnotificationextender.zip
    2. ExampleProgramDownload: popupnotificationtest.zip

 

Popupnotificationextender example Program

This control is developed based on ASP. NET Ajax and inherits from alwaysvisiblecontrolextender in ASP. NET Ajax Control Toolkit. Therefore, to use this control in a program, you must configure ASP. net Ajax and add ASP. net Ajax Control Toolkit Assembly reference (see embrace changes-from Atlas to ASP. net Ajax (1): download and install Overview).

Then extract the dll(dflying.ajax.popupnotifextextender.zip) of the control file to the bin directory of the web site and add references to the DLL.

Add the following registration in the header of the page to be usedCode:

 
<% @ Register Assembly ="Dflying. Ajax. popupnotifnotifextender"Namespace ="Dflying. Ajax"
 
Tagprefix ="Dflying"%>

Of course, scriptmanager is also required:

 
<ASP: scriptmanager ID= "Scriptmanager1" Runat= "Server" />

Then define a panel to indicate the prompt window. Of course, the layout style can be changed as you like:

<ASP: Panel ID= "Thepanel" Cssclass= "Panel" Runat= "Server">
 
<Div Style= "Border: 1px solid black; Height: 98px ;">
 
<Div Style= "Padding: 3px; Background-color: Silver ;">
<Strong>New messages:</Strong>
 
</Div>
 
<IMG SRC= "Icon.gif" Style= "Float: Left; display: block; margin: 3px ;" />
 
<Div ID= "Result" Style= "Padding: 3px; margin-left: 40px ;" />
</Div>
 
</ASP: Panel>

Note: This Panel also contains an HTML <div> tag with the ID of result. Note that this <div> will be filled in with the <div> message returned by the server.

The CSS class of the Panel application is panel, which is defined as follows: (Note:NoDefines three attributes: border, margin, and padding. You can use these attributes in the internal tag <div> if necessary)

 
. Panel
 
{
 
Font-size: 80%;
 
Background-color: white;
 
Width: 200px;
 
Height: 100px;
 
Overflow: hidden;
 
}

Then the code of the popupnotificationextender control is as follows:

<Dflying: popupnotificationextender ID= "PNE" Targetcontrolid= "Thepanel" Runat= "Server"
 
Verticalside= "Bottom" Horizontalside= "Right" Horizontaloffset= "20" Verticaloffset= "20"
 
Servicepath= "Icationicationservice. asmx" Servicemethod= "Getnotification" Queryserviceinterval= "6000"
Resultlabelid= "Result" />

Where:

    1. Horizontalside and verticalside specify that the prompt window will pop up in the lower right corner of the page.
    2. Horizontaloffset and verticaloffset specify the distance between the pop-up window and the browser border.
    3. Servicepath and servicemethod specify the Web Service used by the server to query new messages and the web method defined in them.
    4. Queryserviceinterval specifies to query the server every 6000 milliseconds (6 seconds). It is only used for demonstration. Generally, we should not perform queries frequently.
    5. Resultlabelid specifies the ID of the HTML element of the client that is used to display new messages on the server. Here, the ID defined above is the result <div>.

Let's look at the web service code on the server:

 
[WebService (namespace ="Http://tempuri.org /")]
 
[Webservicebinding (conformsto = wsiprofiles. basicprofile1_1)]
 
[Microsoft. Web. Script. Services. scriptservice ()]
 
Public ClassIcationicationservice: system. Web. Services. WebService {
 
 
Private Static IntM_count = 0;
 
 
 
[Webmethod]
 
Public StringGetnotification ()
 
{
 
If(Checknewmessage ())
 
{
 
// Return the HTML message content.
 
Return String. Format ("<A href = \" # \ "> you 've got Ed a new message # {0}. </a>", M_count ++ );
 
}
 
Else
 
{
// If there's no new meesage, just return an empty string.
 
Return String. Empty;
 
}
 
}
 
 
 
Private BoolChecknewmessage ()
 
{
 
// Todo: Whatever you want to check if there's a message.
 
Return True;
 
}
 
}

The getnotification () method does not have any input parameters. In this method, we can use any method to check whether new messages need to be transmitted to the client. If yes, an HTML string representing the message is returned. If no, an empty string is returned. If the client receives a non-empty string, the pop-up window is displayed. If the string is received, nothing is displayed.

You can download the example program (popupnotificationtest.zip) and try it out in person.

 

popupnotifnotifextender attribute list

    1. Targetcontrolid: The target panel control ID of the extended panel, which will be used as the panel control ID of the prompt panel.
    2. Resizeeffectduration: Specifies the duration of the pop-up/disappear animation on the prompt panel. The unit is seconds. The default value is 0.3 seconds.
    3. Shownotificationduration: The length of time when the prompt panel stays on the page. The unit is seconds. The default value is 3 seconds.
    4. Resultlabelid: After a new message is obtained from the server, it is filled in with the client HTML element whose ID is the value in the prompt panel.
    5. Servicepath: The Web service address of the message obtained from the server segment.
    6. Servicemethod: The Web Method Name of the message obtained from the server segment.
    7. Queryserviceinterval: The time interval between two query servers. The unit is millisecond. The default value is 60000.
    8. Horizontaloffset: The horizontal margin between the front panel and the left and right sides of the browser border, in pixels (PX ). The default value is 0.
    9. Horizontalside: Horizontal direction of the prompt panel. Left (default) indicates that the Panel is docked on the left, and right indicates that the Panel is docked on the right.
    10. Verticaloffset: The vertical margin between the prompt panel and the browser's upper and lower borders. The unit is pixel (PX ). The default value is 0.
    11. Verticalside: The vertical direction of the prompt panel. Top (default) indicates that the Panel is docked by the top, and bottom indicates that the Panel is docked by the bottom.
    12. Scrolleffectduration: When you scroll through the browser scroll bar, adjust the time interval of the prompt Panel position. The Unit is seconds. The default value is 0.1.

 

Others

    1. Is it necessary to openSource code?
    2. Is it necessary to write an article?ArticleHow does one develop controls?
    3. If there is a bug, I hope my friends will raise it.
    4. If you have new features and suggestions, I hope you can make them.
Related Article

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.