) Use Ajax technology to enable IE Web Control Tree View to read large amounts of data.

Transferred from: IEControl,
The TreeView is widely used. In one of my projects, a module named UNSPSC frequently uses this control. This control is generally quite useful (with fewer than 200 nodes), but when the number of nodes is large, the client waits for a long time, and when the data volume is large, the client times out and fails to read. During stress testing, this module has more than 24000 records in the database, and one-time reading will cause IE to die, this is naturally not suitable for reading UNSPSC (UNSPSC requires a maximum of 90 million records ). So I want to use Ajax (Asynchronous
JavaScript and XML) and the asynchronous reading mechanism to optimize it.

This project file has been uploaded. At the end of this article, you should not post your email. Pay attention to privacy.

For Ajax introduction, there are a lot of materials on technical websites at home and abroad. I will not talk about it here. The Ajax I use is from http://ajax.schwarz-interactive.de/. if you are interested, download it.

First, let's look at the effect:

This is the effect of loading the page.
This is the moment when you click a node ).
After the asynchronous reading is complete, the name is changed to 11000000 nodes. After the asynchronous call is complete
View.
When a subnode under 11000000 is fully expanded, so many root nodes can be found.

This is a solution for my counterfeit project:
BorgWorX. Web. Core. Ajax generates Ajax. DLL.
Step 1: according to the instructions in ajaxguide.doc, first modify in web. config and add:

<Add
Verb = "POST, GET" path = "ajax/*. ashx"
Type = "BorgWorX. Web. Core. Ajax. PageHandlerFactory, BorgWorX. Web. Core. Ajax"/>

Step 2: register the page class with Ajax during the page load event and bind the data at the first layer of UNSPSC to the tree view control:

Private void
Page_Load (object sender, System. EventArgs e)
{
BorgWorX. Web. Core. Ajax. Utility. RegisterTypeForAjax (typeof (WebForm2 ));

LoadNode = new TreeNode ();

LoadNode. Text = "Loading ";

LoadNode. ID = "load ";

 
If (! IsPostBack)

{

TreeNode root = new TreeNode ();

Root. Text = "Root ";

TreeView1.Nodes. Add (root );

LoadData (root, 0); // Data Bind

Root. Expanded = true;

}
}

Step 3: Compile the Ajax method in the background code and add metadata attributes to it. Note that these methods must be declared as public. Here I declare a method named returnDs, which returns all records in the database containing this prefix Based on the prefix string:

[BorgWorX. Web. Core. Ajax. AjaxMethod ()]
Public DataSet
ReturnDs (string PreFix)
{

Int preFix = getPreFix (PreFix );
String
Str = "workstation id = DINGSEA; packet size = 4096; user id = sa; data
Source = dingsea; persist security info = False; initial catalog = GEPS ";
DataSet
Ds = SqlHelper. ExecuteDataset (str, "sp_loadUNSPSCCodeByLevel", preFix );

Return ds;
}
Private int
GetPreFix (string code)
{

String tempStr;

While (code. EndsWith ("00 "))

{

Code = code. Remove (code. Length-2, 2 );

}

TempStr = code;
Return
TempStr. Length = 0? 0: Convert. ToInt32 (tempStr );
}

In this way, we can easily use this method when writing JS on the client.

Step 4: After the server completes, let's see how the client is designed. Load the UNSPSC of the first layer through the page_load Method
Code, that is, all nodes of XX000000 are displayed. By observing the client behavior of TreeView WebControl (in its article "About
As mentioned in TreeView WebControl), we can asynchronously download sub-layer data in the OnExpand event of TreeView:

<Script language = "javascript">

Var Index;

Function ds ()

{

WebForm2.returnDs (TreeView1.getTreeNode (Index). getAttribute ("NodeData"), returnDs_callback );

}

Function returnDs_callback (response)

{

Var n = TreeView1.getTreeNode (Index );

Var load = n. getChildren ();

If (load. length! = 1 ){

Return; // If data already exists, it will not be read.

}

Else

{

Var loadNode = load [0];

LoadNode. remove ();

}

Var ds = response. value;

If (ds! = Null & ds. Tables! = Null & typeof (ds) = "object ")

{

For (var I = 0; I <ds. Tables [0]. Rows. length; I ++)

{

Var newNode = TreeView1.createTreeNode ();

NewNode. setAttribute ("NodeData", ds. Tables [0]. Rows [I]. UNSPSCCode );

NewNode. setAttribute ("Text", ds. Tables [0]. Rows [I]. UNSPSCCode +"
"+ Ds. Tables [0]. Rows [I]. Description );

If (newNode. getAttribute ("NodeData") % 100 = 0)

{

Var loadNode = TreeView1.createTreeNode ();

LoadNode. setAttribute ("Text", "Loading ......");

NewNode. add (loadNode );

}

N. add (newNode );

}

}

Else {alert (response. error );}

}

</Script>

<Script language = "javascript" for = "TreeView1" event = "onexpand">

// TODO: Enter the OnExpand Event code of the TreeView here.

Index = window. event. treeNodeIndex; // obtain the position of the expanded node. The root node is 0.

If (Index = '0') return; // if it is the root node, it is returned directly.

Ds ();

</Script>

In this case, a maximum of 99 layer nodes are involved in the business, with a total of four layer nodes, that is, 99*99*99*99 =
9227446944279201 (Correction: 96059601, sweat first .) Nodes. It is far more than 90 million of the requirements, and after the user expands the node, "Loading..." appears first ......" At the same time, downloading nodes on the server not only optimizes the performance and improves the efficiency, but also makes the interface more user-friendly.

/Files/wangyt223/project.rar

This project file has been uploaded. At the end of this article, you should not post your email. Pay attention to privacy.

For Ajax introduction, there are a lot of materials on technical websites at home and abroad. I will not talk about it here. The Ajax I use is from http://ajax.schwarz-interactive.de/. if you are interested, download it.

First, let's look at the effect:

This is the effect of loading the page.
This is the moment when you click a node ).
After the asynchronous reading is complete, the name is changed to 11000000 nodes. After the asynchronous call is complete
View.
When a subnode under 11000000 is fully expanded, so many root nodes can be found.

This is a solution for my counterfeit project:
BorgWorX. Web. Core. Ajax generates Ajax. DLL.
Step 1: according to the instructions in ajaxguide.doc, first modify in web. config and add:

<Add
Verb = "POST, GET" path = "ajax/*. ashx"
Type = "BorgWorX. Web. Core. Ajax. PageHandlerFactory, BorgWorX. Web. Core. Ajax"/>

Step 2: register the page class with Ajax during the page load event and bind the data at the first layer of UNSPSC to the tree view control:

Private void
Page_Load (object sender, System. EventArgs e)
{
BorgWorX. Web. Core. Ajax. Utility. RegisterTypeForAjax (typeof (WebForm2 ));

LoadNode = new TreeNode ();

LoadNode. Text = "Loading ";

LoadNode. ID = "load ";

 
If (! IsPostBack)

{

TreeNode root = new TreeNode ();

Root. Text = "Root ";

TreeView1.Nodes. Add (root );

LoadData (root, 0); // Data Bind

Root. Expanded = true;

}
}

Step 3: Compile the Ajax method in the background code and add metadata attributes to it. Note that these methods must be declared as public. Here I declare a method named returnDs, which returns all records in the database containing this prefix Based on the prefix string:

[BorgWorX. Web. Core. Ajax. AjaxMethod ()]
Public DataSet
ReturnDs (string PreFix)
{

Int preFix = getPreFix (PreFix );
String
Str = "workstation id = DINGSEA; packet size = 4096; user id = sa; data
Source = dingsea; persist security info = False; initial catalog = GEPS ";
DataSet
Ds = SqlHelper. ExecuteDataset (str, "sp_loadUNSPSCCodeByLevel", preFix );

Return ds;
}
Private int
GetPreFix (string code)
{

String tempStr;

While (code. EndsWith ("00 "))

{

Code = code. Remove (code. Length-2, 2 );

}

TempStr = code;
Return
TempStr. Length = 0? 0: Convert. ToInt32 (tempStr );
}

In this way, we can easily use this method when writing JS on the client.

Step 4: After the server completes, let's see how the client is designed. Load the UNSPSC of the first layer through the page_load Method
Code, that is, all nodes of XX000000 are displayed. By observing the client behavior of TreeView WebControl (in its article "About
As mentioned in TreeView WebControl), we can asynchronously download sub-layer data in the OnExpand event of TreeView:

<Script language = "javascript">

Var Index;

Function ds ()

{

WebForm2.returnDs (TreeView1.getTreeNode (Index). getAttribute ("NodeData"), returnDs_callback );

}

Function returnDs_callback (response)

{

Var n = TreeView1.getTreeNode (Index );

Var load = n. getChildren ();

If (load. length! = 1 ){

Return; // If data already exists, it will not be read.

}

Else

{

Var loadNode = load [0];

LoadNode. remove ();

}

Var ds = response. value;

If (ds! = Null & ds. Tables! = Null & typeof (ds) = "object ")

{

For (var I = 0; I <ds. Tables [0]. Rows. length; I ++)

{

Var newNode = TreeView1.createTreeNode ();

NewNode. setAttribute ("NodeData", ds. Tables [0]. Rows [I]. UNSPSCCode );

NewNode. setAttribute ("Text", ds. Tables [0]. Rows [I]. UNSPSCCode +"
"+ Ds. Tables [0]. Rows [I]. Description );

If (newNode. getAttribute ("NodeData") % 100 = 0)

{

Var loadNode = TreeView1.createTreeNode ();

LoadNode. setAttribute ("Text", "Loading ......");

NewNode. add (loadNode );

}

N. add (newNode );

}

}

Else {alert (response. error );}

}

</Script>

<Script language = "javascript" for = "TreeView1" event = "onexpand">

// TODO: Enter the OnExpand Event code of the TreeView here.

Index = window. event. treeNodeIndex; // obtain the position of the expanded node. The root node is 0.

If (Index = '0') return; // if it is the root node, it is returned directly.

Ds ();

</Script>

In this case, a maximum of 99 layer nodes are involved in the business, with a total of four layer nodes, that is, 99*99*99*99 =
9227446944279201 (Correction: 96059601, sweat first .) Nodes. It is far more than 90 million of the requirements, and after the user expands the node, "Loading..." appears first ......" At the same time, downloading nodes on the server not only optimizes the performance and improves the efficiency, but also makes the interface more user-friendly.

/Files/wangyt223/project.rar