ASP. NET Ajax provides multiple models, including component, control, and behavior models on the client, and scirptcontrol and extender models on the server. These models have their own purposes, but note that the client and server models are independent of each other.
One of the important components of ASP. NET Ajax is the Ajax Control Toolkit, which includes a large number of extender and behavior. The Extender uses the extender model proposed by ASP. NET Ajax and the behavior model proposed by Microsoft Ajax library on the client. The combination of extender and Behavior Models provides rich results. So what is the extender model and what is the behavior model?
The Extender control on the server is actually a class that inherits the control class and implements the iextendercontrol interface. during development, we can directly inherit the extendercontrol class, it has met the preceding conditions and defined some common methods. The function of the extender control is simply to tell scriptmanager the script that needs to be executed on the page to be output by the client, scriptmanager selects different output modes based on the current situation (normal loading or asynchronous delivery. Theoretically, extender can output arbitrary scripts. Therefore, we can only say that "the extender in Ajax control Tookit uses behavior on the client", rather than "the extender model uses the behavior model on the client ".
The behavior model provides a wide range of functions on the client. It operates on all client objects, and some may access the Web service method, but this does not affect the function of working on the client. Behavior can work independently on the server. The client (browser) Only executes the client code step by step, and it does not know what server technology generates the code.
Therefore, when using Ajax control Tookit, you must also remember the following:
◆ The extender model is not necessarily related to the behavior model.
◆ Behavior can be executed independently of extender.
◆ All effects are provided by behavior.
The first article has been explained above. I used 2nd features in my previous article "modalupdateprogress control. In the modalupdateprogress control, I used modalpopupbehavior. My approach is to extract all the required JavaScript files from modalpopupextender and output them to the page, as shown below:
private IEnumerable
GetExtenderReferences()
{
if (extenderReferences == null)
{
lock (typeof(ModalUpdateProgess))
{
if (extenderReferences == null)
{
extenderReferences =
(new ModalPopupExtender() as IExtenderControl).GetScriptReferences();
}
}
}
return extenderReferences;
}
|
Therefore, I can use modalpopupbehavior on the client to construct the desired effect. There is no extender here, and only behavior here.
I think 3rd features are the most important and useful one. I often receive questions such as "How to click another button to make collapsiblepanel shrink or open" or "how to switch togglebutton status". In fact, the answers to these questions are the same, use JavaScript to operate behavior. The controls provided by Ajax Control Toolkit during the service period are so easy to use that the official support function has been demonstrated over and over again. A large number of demonstrations make people forget that the behavior of the customer segment is the key, and behavior is the hero of the client.
Recently, a friend asked me how to display the result to the user in modalpopupextender mode after logging on to the user using the authentication service on the client? In fact, the key is to use JavaScript to operate modalpopupbehavior. Here I will demonstrate how to operate modalpopupbehavior using JavaScript.
First, place a scriptmanager, A Textbox, a panel, and a modalpopupbehavior on the server.
<asp:ScriptManager ID="ScriptManager1" runat="server" />
<asp:TextBox ID="TextBox1" runat="server" style="display:none;" />
<asp:Panel runat="server" ID="popupPanel"
style="border: solid 1px black; padding: 10px; width: 300px; display:none;">
<b style="font-size: 15pt;">Here's the Message</b>
<br />
<asp:Button ID="Button1" runat="server" Text="Button" />
</asp:Panel>
<ajaxToolkit:ModalPopupExtender runat="server"
TargetControlID="TextBox1" PopupControlID="popupPanel"
OkControlID="Button1" BehaviorID="modalPopup" />
|
Everything is the most common way to use, but pay attention to the following points:
1. Set the display of textbox to none.: Modalpoupbehavior must have a targetcontrol, which is used as a trigger in the pop-up window. We must hide this trigger now, but note that we cannot set its visible to false; otherwise, this text box will not exist in the DOM structure of the client.
2. Set the display of the pop-up panel to none.: This is already one of the rules for using modalpoupextender. If you do not set the display to none, the Panel will appear on the page immediately after the page is opened, and then disappear immediately. In this way, in addition to allowing users to see the panel, it may also affect the layout and make the page appear messy.
3. modalpopupextender sets behaviorid: This is the key to using JavaScript to operate behavior in Ajax Control Toolkit. When the client constructs behavior, there can be no ID, but if there is no ID, the behavior object cannot be operated on the client.
Software Development Network
Then, we can place a button on the client and then use JavaScript to pop up the window. Please note that we use $ find to get the modalpopupbehavior instance through behaviorid, and then call its show method:
<Input type = "button" value = "popup" onclick = "$ find ('modalpopup'). Show ();"/> Software Development Network |
In this way, the window pops up. In fact, everything is so simple.
The only possible problem is that the developer does not know which method to call behavior to work. In fact, this does not constitute an obstacle. We only need to check the source code of behavior and check that the names and functions of the methods without the underline prefix (that is, the public method) are relatively close. This is the benefit of using a proper method name. You can understand the role of the method without any comments. What's more, the behavior comments in Ajax Control Toolkit are very detailed.
This is the flexible use of extender.