Variable Control [updated to 1.3]-transfer variable between client and server

Download varaible and its source code

Variable is a control used to transmit data between the client and the server. Its features include:
1. You can pass datatable, hashtable, and other types of variables to Javascript, and generate a variable with the same name as the control ID on the page;
2. You can use JavaScript on the client to modify the value of the variable. The updated value is automatically transferred to the server upon sending the response;
3. The icallbackeventhandler interface is implemented to transmit data between the client and server without sending back data on the ASP. NET webpage.

Variable use guide to hide all expand all 1. pass variables to client Javascript

Using Variable, you can use either of the following methods to transmit data to the client:

(1) Direct assignment

To transmit data in this way, you only need to directly set the attribute of value, for example:

DataTable dt = new DataTable();dt.TableName = "Contact";dt.Columns.Add("Name");dt.Columns.Add("Tel");dt.Columns.Add("Mail");dt.ReadXml(Server.MapPath("contact.xml"));Hashtable val = new Hashtable();val.Add("A", 1);val.Add("W", 100.325);val.Add("B", "String");val.Add("F", new String[] { "C1", "C2", "C3" });val.Add("C", new int[] { 1, 2, 3 });val.Add("D", DateTime.Now);val.Add("T", dt);MyVariable.Value = val;

The value of myvariable is as follows:

After setting the value attribute, you can use the JSON attribute to obtain the corresponding JSON ,:

(2) assign values using JSON

To use this method, you only need to set the JSON value of the attribute, for example:

MyVariable.JSON = "{\"Name\":\"LUCC\",\"Tel\":\"123456789\"}"; 

After setting JSON, you can get the corresponding. Net object through value ,:

(3) ing between JSON and. Net types

Value and JSON are synchronized. When one of the attributes is set, the other attributes also change. The type ing relationship during mutual conversion is as follows:

JSON to. net

. Net to JSON

For example:

After the time {23:08:14} is converted to JSON:

{"Year":2009,"Month":3,"Day":23,"Hour":23,"Minute":8,"Second":14}

Table

Convert to JSON:

[    {        'Tel':'24325',        'Name':'John',        'Mail':'John@126.com'    },    {        'Tel':'1234567',        'Name':'Tom',        'Mail':'Tom@126.com'    },    {        'Tel':'963258',        'Name':'Lucy',        'Mail':'Lucy@hotmail.com'    }]

2. Access variables on the page

After the page is loaded, variable has generated a corresponding JavaScript Object for you (when the value does not contain the datatable or datetime, the generated Javascript is the same as the JSON ). For example, the Javascript corresponding to myvariable is as follows:

MyVariable={    'B':'String',    'T':new DataTable(        [            {                'Name':'John',                'Tel':'24325',                'Mail':'John@126.com'            },            {                'Name':'Tom',                'Tel':'1234567',                'Mail':'Tom@126.com'            },            {                'Name':'Lucy',                'Tel':'963258',                'Mail':'Lucy@hotmail.com'            }        ],        ['Name','Tel','Mail'],        'Contact'    ),    'A':1,    'W':100.325,    'C':[        1,        2,        3    ],    'D':new Date(2009,2,24,0,10,52),    'F':[        'C1',        'C2',        'C3'    ]}

On the client, you can use the variable name myvariable to conveniently access data. For example, the expression:

MyVariable["F"][0]

The value is "C1"

3. Send data back to the server

After you modify the value of the variable on the client, after submission, variable will automatically send the modified value back to the server. For example:

Use the following code on the client to modify the value of the variable myvariable:

MyVariable=['Hello','World']

After submission, the value of the server variable control myvariable will be updated:

4. Data is transmitted between the client and the server without sending back

Variable implements the icallbackeventhandler interface, so data can be transmitted between the client and the server without sending back.

(1) Send a callback on the client to send data to the server

Sending a callback on the client is very easy to send data to the server. You only need to create a callback function and call the variablemanager. callserver method. The following example shows how to send a callback:

<Script language = "JavaScript" type = "text/JavaScript"> // callback function. The client sends data to the server. After the server completes processing and sends the data back to the client, call this function // note: the callback function does not have the function callback () {// After receiving data from the server, the displayed data alert (variable1)} function btncallback_onclick () {// modify variable value variable1 = {A: 7, B: 8, C: 9} // send callback variablemanager. callserver ('variable1', callback)} </SCRIPT> <PC3: Variable id = "variable1" runat = "server"> </PC3: variable> <input id = "btncallback" type = "button" value = "Callback" onclick = "Return btncallback_onclick ()"/>

(2) receive data from the client through callback on the server

To process the data sent by the client on the server, you only need to process the oncallback event, as shown below:

Public partial class webusercontrol: system. Web. UI. usercontrol {protected void page_load (Object sender, eventargs e) {If (! Ispostback) {// initialize the value of variable1 variable1.value = new int [] {1, 2, 3, 4};} variable1.oncallback + = new LUCC. variable. oncallbackdelegate (variablereceivoncallback);} protected void variablereceivoncallback (LUCC. variable VAR) {// receive the value of variable1 sent from the client here // modify the value of variable1 on the server variable1.value = "Hello World ";}}

(3) Effect

5. Use variablemanager on the client to manage Variables

The variable control generates a variablemanager object on the client to manage all variables. You can use variablemanager to perform the following operations:

Method	Function
Refreshall	Generate the XML corresponding to all variables and store the XML in the corresponding hidden control. Example: function btnSubmit_onclick() { VariableManager. RefreshAll() form1.submit()}
Refresh (name)	Generate the XML corresponding to the variable named name and store the XML in the corresponding hidden control. For example: function btnSubmit_onclick(){ VariableManager.Refresh('MyVariable') form1.submit()}
Callserver (name, callback)	Send a callback on the client and send the value of the variable named name to the server (no sending back ). Call the callback function after the server completes processing and is sent back to the client: function Callback(){}function btnCallback_onclick() { VariableManager.CallServer('MyVariable',Callback)}
Clone (name)	Example of a cloned variable named name: var v=VariableManager.Clone('MyVariable')
Renderjavascript (name)	Javascript script example for generating a variable named name: var js=VariableManager.RenderJavascript('MyVariable')
Renderjson (name)	Example of a JSON string corresponding to a variable named name: var json=VariableManager.RenderJSON('MyVariable')
Getvalue (name)	Example of getting the value of a variable named name: var json=VariableManager.GetValue('MyVariable')

6. Storage Method of datatable on the client

The variable control allows you to send a datatable to the client, and store a datatable object on the client for convenient operation. The Code is as follows:

Function datatable () {If (arguments. length = 3) {This. rows = arguments [0] This. columns = arguments [1] This. name = arguments [2]} else {This. columns = new array () This. rows = new array () This. name = ''} // Add the column named this. addColumn = function (name) {This. columns. push (name)} // create a row with the same schema as this table. newrow = function () {ROW = {} For (C = 0; C <this. columns. length; C ++) {row [this. columns [c] = ""} return row} // Add a row this. addrow = function (Cols) {ROW = This. newrow () for (C = 0; C <this. columns. length; C ++) {name = This. columns [c] row [name] = Cols [name]} This. rows. push (ROW)} // Delete row this. deleterow = function (INDEX) {This. rows. splice (index, 1 )}}

7. Notes on using variable (1) Notes on using variable for Ajax websites

As shown in:

Button1 is placed in updatepanel1. Assume that The onclick event is button#click. If the vairable value is modified in button#click, you must call scriptmanager. registerstartupscript registers the variable initialization Javascript script to ensure that the updated value is transmitted to the client, as shown below:

protected void Button1_Click(object sender, EventArgs e){    Variable1.Value = new Decimal[] { 0, 1, 2, 3 };    ScriptManager.RegisterStartupScript(        UpdatePanel1,        typeof(string),        "Variable1.AjaxStartupScript",        Variable1.AjaxStartupScript,        true    );}

(2) Considerations for using form's submit () method on the client

Because the submit method does not trigger the onsubmit event, you must call variablemanager before calling the submit method. refreshall () converts the variables corresponding to all the variable controls on the page to XML and saves them to the hidden Control for transmission to the server, as shown below:

VariableManager.RefreshAll()form1.submit()

Author: Lu chuncheng

E-mail: mrlucc@126.com

Source: http://lucc.cnblogs.com/

The copyright of this article is shared by the author and the blog. You are welcome to repost this article, but you must keep this statement without the author's consent and provide a connection to the original article on the article page.