In the previous two articles (OWA or messenger style information Prompt window -- compile ASP. net Ajax extender control (on): client behavior and OWA or messenger style information Prompt window -- compile ASP. net Ajax extender control (medium): encapsulated as a server-side control), We created our own ASP. net Ajax extender control, which describes how to use the control in a real project.
TheDetailed functions,Interface effect during actual runningAndDetailed attribute list, Please refer to my ASP. NET Ajax control -- popupnotificationextender: Implementation of OWA or messenger style information Prompt window thisArticle. HoweverCodeDownload and exampleProgramPlease refer to the next introduction in this article. The content above is outdated.
Pre-Demand
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).
Add popupnotificationextender reference
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.
Register the control prefix
Add the following registration code to the header of the page to be used:
<% @ Register Assembly ="Dflying. Ajax. popupnotifnotifextender"Namespace ="Dflying. Ajax"
Tagprefix ="Dflying"%>
Add scriptmanager
Of course, a scriptmanager control is also required on the page:
<ASP: scriptmanager ID= "Scriptmanager1" Runat= "Server" />
Compile the prompt window to be popped up
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;
}
Add the popupnotificationextender Control
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:
- Horizontalside and verticalside specify that the prompt window will pop up in the lower right corner of the page.
- Horizontaloffset and verticaloffset specify the distance between the pop-up window and the browser border.
- Servicepath and servicemethod specify the Web Service used by the server to query new messages and the web method defined in them.
- Queryserviceinterval specifies to query the server every 6000 milliseconds (6 seconds). It is only used for demonstration. Generally, we should not perform queries frequently.
- 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>.
Compile the server-side Web Service
Let's look at the web service code on the server:
UsingSystem;
UsingSystem. Web;
UsingSystem. Web. Services;
UsingSystem. Web. Services. Protocols;
[WebService (namespace ="Http://tempuri.org /")]
[Webservicebinding (conformsto = wsiprofiles. basicprofile1_1)]
[System. 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.
Users.
Runtime Program Interface
Please refer to my ASP. NET Ajax control -- popupnotificationextender: This article implements the OWA or messenger style information Prompt window.
Code download
Complete source file + sample program: popupnotification.zip
Popupnotificationextender compiled Assembly: dflying.ajax.popupicationicationextender.zip.
Just say a few more words
In fact, what extender does is encapsulate the behavior component of the ASP. NET Ajax client during the service period. The majority of the components in the control development process is still the Javascript file. The reason for this encapsulation is to facilitate the use by programmers who are familiar with ASP. NET Server development models and improve the reusability of components.
View the source file on the page. You can see the following lines at the end of the source file (for clarity, the code is formatted ):
<SCRIPT type ="Text/JavaScript">
<! --
SYS. application. initialize ();
SYS. application. add_init (
Function (){
$ Create (dflying. Ajax. popupicationicationbehavior,
{
"Horizontaloffset": 20,
"Horizontalside": 2,
"Queryserviceinterval"6000,
"Resultlabelid":"Result",
"Servicemethod":"Getnotification",
"Servicepath":"Icationicationservice. asmx",
"Verticaloffset": 20,
"Verticalside": 2,
"ID":"PNE"
},
Null,
Null,
$ Get ("Thepanel")
);
}
);
// -->
</SCRIPT>
This is exactly how ASP. NET Ajax client declares its behavior.
The client design of ASP. NET Ajax is extremely clever and deserves our careful research.