Responding to events when using Ajaxcontroltookit controls

Background

In the article "distinguishing the Extender and behavior models in asp.net ajax," I talked about the key to using controls in Ajaxcontroltookit is the behavior components of the client. Microsoft's official example is too focused on the demo, but ignores the actual use of the problem-the market needs it, to make technology look attractive, it is understandable. But as a real developer of the product, if you want to use the components in Ajaxcontroltookit flexibly, you must know how to manipulate the individual members of each Behvaior object (properties, methods, events, and so on) on the client.

In the sub, I cite an example of manipulating Modalpopupbehavir objects, so that the display and concealment of modal windows is limited to the controls specified in the server-side ModalPopupExtender. But in this article, I would like to highlight some of the methods and techniques for manipulating those component events on the client side. Because, the server side those extender for the client Behavior component event support is not as good as we expected.

Extender component support for behavior properties

Why are controls in AjaxControlToolkit so convenient to use? Because we have so many extender. With a rich extender control, developers can program on the server side-for example, by setting various properties, and eventually extender write some behavior objects in the page that the script uses to create the client. For example, if we want to use ModalPopupExtender, in the simplest case we just need to specify TargetControlID and Popupcontrolid in Extender, as follows:

<asp:button id= "Button1" runat= "Server" text= "button"/> <asp:panel id= "Panel1" runat= "
Server" height= " 50px " 

width=" 125px ">
Hello world!
</asp:Panel>
<ajaxtoolkit:modalpopupextender runat= "Server" 

targetcontrolid= "Button1" Popupcontrolid= "Panel1"/>

An extra line of code pages do not write, Extender will automatically introduce the required script files on the page and generate the following client code (format changed):

Sys.Application.add_init (function ()
{
$create (
ajaxcontroltoolkit.modalpopupbehavior,
{　　　　　　"
popupcontrolid": "Panel1",
"Dynamicservicepath": "/default.aspx", "
ID": "ctl02"
},
null,
null,
$get ("B Utton1 "));

As a result, the client's objects are created at the init stage of the client (the init phase does not start until the Window.onload event is executed, so if the resources on the page require a lot of time to load, the user will find that the behavior effect will appear very late – But we don't care about that first. Generally speaking, how many extender on the page, the client will appear how many similar statements. The second parameter in the $create method is an object that is represented in JSON on the page, which is a collection of properties for the behavior object that you want to set. For example, in the above example, the Popupcontrolid property of the Modalpopupbehavior object is set to "Panel".

Friends with experience in AjaxControlToolkit control development must know that those extender attributes that will be exported to the client as behavior attributes are marked Extendercontrolpropertyattribute, For example, in ModalPopupExtender, there are the following member definitions:

[Extendercontrolproperty]
public string Popupcontrolid
{get
{...}
set {...}}
}

In this way, the underlying class library defined in AjaxControlToolkit takes the value of this property as the value of the client behavior and outputs it to the client--both the control developer and the user of the control are happy.

Someone said: I want to respond to events

There are various events in addition to the behavior of the client-for example, the Calendarbehavior shown event, which is triggered after the calendar is opened. With events, we can execute specific code at the right time and get rich functionality. The server-side tag attribute and then output to the client is already known, so can we specify client events on the server side?

Not before, but it's OK now. New support features similar to properties are added to the previous version of AjaxControlToolkit. Now AjaxControlToolkit contains a Extendercontroleventattribute class, which is the function of marking a property on the server side, which corresponds to the event of a client. This allows us to set the response of the client to an event on the server side, and we just need to make sure that the method exists and is logically correct.

For example, we use Caledarextender as an example:

<asp:textbox id= "TextBox1" 

runat= "Server" ></asp:TextBox>
<ajaxtoolkit:calendarextender runat= "Server" 

targetcontrolid= "TextBox1" onclientshown= "Onshownhandler"/> <textarea id=
" TraceConsole "cols=" 

rows= "ten" ></textarea>
<script language= "javascript" type= "text/"　　JavaScript ">
function Onshownhandler (sender, args)
{
Sys.Debug.trace (" calendar shown. ");
}
</script>

Now that I've specified the OnClientShown attribute on the server-side CalendarExtender, the following JavaScript code appears on the page:

Sys.Application.add_init (function ()
{
$create (
ajaxcontroltoolkit.calendarbehavior,
{"id": "Ctl02"},
{"shown": Onshownhandler},
null,
$get ("TextBox1"));

The third parameter of the $create method is a collection of response event methods, where Onshownhandler is used as the response method for the shown event. Therefore, the Onshownhandler method is executed every time the calendar is expanded, and the calendar shown is displayed in the textarea on the page. The words.

The mapping relationship between server-side OnClientShown properties and client shown events is determined by the following code in CalendarExtender:

[DefaultValue ("")]
[Extendercontrolevent]
[Clientpropertyname ("shown")]
Public virtual string OnClientShown
{get
{...}
set {...}}
}

The Extendercontroleventattribute tag indicates that the property will map to an event on the client behavior, and the Clientpropertynameattribute tag will accept a parameter that indicates a The event that the body is (if not marked, the event with the same name as the property).