UpdatePanel triggers JavaScript scripting method with code _ Application Tips

I. Pre-rendered data cannot be changed

1. As you know, pre-rendered data can not be changed, may have been mentioned before, see demo here, customize a control

[Defaultproperty ("Text")]
[ToolBoxData ("<{0}:jscontrol runat=server> </{0}:JsControl>")]
public class Jscontrol:webcontrol
{
[Bindable (True)]
[Category ("appearance")]
[DefaultValue ("")]
[Localizable (true)]
public string Text
{
Get
{
string s = (string) viewstate["Text"];
Return ((s = = null)? STRING.EMPTY:S);
}

Set
{
viewstate["Text"] = value;
}
}

protected override void OnPreRender (EventArgs e)
{
Text = "Hello,you can ' t change me";
Base. OnPreRender (e);
}

protected override void RenderContents (HtmlTextWriter output)
{
Output. Write (Text);
}
}
ASPX page

protected void Button1_Click (object sender, EventArgs e)
{
Jscontrol1.text = "I want to change the Text property";
}
You will find that you have not changed the attributes. This involves the execution of the control lifecycle. Why say this, because most of the script for the control is registered in the pre render.

What's wrong with that? Its own idea is good, the script registers this event (refers to OnPreRender), registers the script resource in the front (in the middle of the control clip), and the script initializes at the end. This conforms to the JavaScript usage principle, importing the script first, then having the tag, the initialization script must be placed behind the tag

Two. Problems caused by UpdatePanel

The above problem if the server submitted back to the feasible, the main problem is that we want to use AJAX without refreshing the registration script. Let's take a look at the asp.net2.0 built-in TreeView control, dragging a control to the page to see its generated HTML code.

You've seen a lot of script registrations and initialization.

We're going to test what the UpdatePanel can do, and we set its properties visible false to True

With the power of Firebug, we'll see what UpdatePanel returns to us in the absence of a refreshing state.
　
Error, you may also have encountered this situation, very normal, UpdatePanel did not register our script also did not we initialize, in the normal phenomenon, UpdatePanel just its container inside, the other does not belong to it tube.

Three. How to Solve

To resolve the TreeView control, I can't figure out that the control is a goner in asp.net ajax mode. To cater to the ASP.net Ajax framework, we need to know that UpdatePanel has no refresh update range, We need to be aware when we define the controls ourselves.

1. Label of the control itself
2. Inside the control
3.UpdatePanel Container Interior

If you want to use UpdatePanel to update data and then trigger client events, there are the following scenarios

1. By changing existing control properties, such as

button1.attributes["onmouseover"] = "alert (' Hello ')";
2. Script initialization during rendering

The first method is simple to use also can, complex is not, we still need to encapsulate the script with the control to use, we no longer register the script in the pre-rendering, but in the rendering implementation (that is, Redercontent method).
All we have to do is make sure that the script resource is in the front, initialized, the control in the middle of the principle can be ... The following methods are feasible

As follows
protected override void RenderContents (HtmlTextWriter output)
{
Output. Write ("<script src=\" xxxx.js\ "> </script>");
Output. Write (Text);
Output. Write ("<script> alert (' Hello ') </script>");
}
Four. Several misunderstandings

1. Validation controls can be used in the AJAX framework in good condition
It actually loads a script, or it's going to hang up.
2. State Reservation
After the data is updated in UpdatePanel, then postback, no refresh update data state remains
3. Execute client script after updating data

We used to be so naïve to write

protected void Button1_Click (object sender, EventArgs e)
{
Label1.Text = "alert (' Hello ')";
}
The result is nothing, window.onload event has passed, unless you refresh (but you do not want to refresh), or no one to help you trigger.
Who's going to trigger it? Microsoft has helped us get ready. That's probably what you want, and it's an event trigger before and after the data update. We can do something about the controls around these two events. This state is appropriate for the need to trigger immediately after the data is fetched.
Sys.WebForms.PageRequestManager.getInstance (). Add_beginrequest (Beginrequesthandler);
Sys.WebForms.PageRequestManager.getInstance (). Add_endrequest (Endrequesthandler);
function Beginrequesthandler (sender, args)
{
var elem = args.get_postbackelement ();
ActivateAlertDiv (' Visible ', ' alertdiv ', Elem.value + ' processing ');
}
function Endrequesthandler (sender, args)
{
ActivateAlertDiv (' Hidden ', ' alertdiv ', ');
}
function ActivateAlertDiv (visstring, Elem, msg)
{
var adiv = $get (elem);
adiv.style.visibility = visstring;
adiv.innerhtml = msg;
}
In other words, we can also change the control properties, like adding an onclick event or whatever.

Five. Alternative solutions

This method compares the absolute, but uses to compare the cool. UpdatePanel can't get the script data because it's not getting enough ... Then the idea is:

Still no refresh fetch data, but take back the data and postback back to the same data.
Some people may say that it will be more performance, it is relative. But it's also a good idea. Telerik Company's radajaxpanel is so realized, interested can download a use