ASP.NET向Javascript传递变量――Variable控件

时间:2009-12-21 11:47来源:未知作者:admin 点击: 次

分享到：

控件及源代码下载有时候我们需要在后台向JAVASCRIPT传递变量，一个简单的方法就是使用HiddenField，但是使用HiddenField只能传递字符串而不能传递其它数据（如DataTable，Hashtable），为了方

控件及源代码下载

有时候我们需要在后台向JAVASCRIPT传递变量，一个简单的方法就是使用HiddenField，但是使用HiddenField只能传递字符串而不能传递其它数据（如DataTable，Hashtable），为了方便向JAVASCRIP传递DataTable，Hashtable等数据，自己开发了一个名称为Variable的ASP.NET控件，使用该控件可以方便的向JAVASCRIPT传递变量。Variable的功能有：

1.可以向Javascript传递DataTable,Hashtable等类型的变量，在页面生成一个名称与控件ID相同的变量，在页面可以使用Javascript访问该变量，获取变量的值；

2.在页面生成一个名称与控件ID相同的变量，并可以使用Javascript修改变量的值，当用户点击提交按钮后，在后台可以获得该变量修改后的值。

Variable控件使用指南

1.向前台Javascript传递变量

向前台Javascript传递变量方法非常简单，只需要设置属性Value即可，例如：

Hashtable val = new Hashtable();
val.Add("A", 1);
val.Add("B", "String");
val.Add("C", new String[] { "C1", "C2", "C3" });
val.Add("D", DateTime.Now);
MyVariable.Value = val;

MyVariable值如图所示:

2.在页面中访问变量

页面加载完成后，可以发现，Variable控件已经为你生成了一个用Javascrpt编写的同名变量，如图所示：

显然，MyVariable的值与后台的Variable控件的值是一样的,在客户端你可以方便的访问变量，例如,表达式

MyVariable["C"][1]

的值为'C2'

3.在页面修改变量的值

在页面中，你可以很方便的修改变量的值，例如：

Postback后，可以在后台获取修改后的值，如图所示：

4.Variable支持的数据类型

Variable支持传递一下数据类型：

Variable应用举例――通讯录管理

源代码下载

1.操作指示

2.后台代码：

public partial classContact: System.Web.UI.Page
{
   protected voidPage_Load(objectsender,EventArgse)
    {
       if(!IsPostBack)
        {
           //读取现存记录
            DataTabledt =newDataTable();
            dt.TableName ="Contact";
            dt.Columns.Add("Name");
            dt.Columns.Add("Tel");
            dt.Columns.Add("Mail");
            dt.ReadXml(Server.MapPath("contact.xml"));
           //将现存记录传送到客户端
            MyTable.Value = dt;
        }
    }
   protected voidButton1_Click(objectsender,EventArgse)
    {
       //保存客户端返回的结果
        ((DataTable)MyTable.Value).WriteXml(Server.MapPath("contact.xml"));
    }
}

3.客户端部分代码

//在MyTable添加新记录
function addRow()
{
    row={
            "Name":document.getElementById('txtColumn1').value,
            "Tel":document.getElementById('txtColumn2').value,
            "Mail":document.getElementById('txtColumn3').value
        }
    msg='新增行:('+row.Name+','+row.Tel+','+row.Mail+')'
    addHistory(msg,MyTable)
    MyTable.Rows.push(row)
    displayRows()
}

//删除记录
function deleteRow(index)
{
    row=MyTable.Rows[index]
    msg='删除行:('+row.Name+','+row.Tel+','+row.Mail+')'
    addHistory(msg,MyTable)
    MyTable.Rows.splice(index,1)
    displayRows()
}

//显示MyTable中保存的记录
function displayRows()
{
    var_table1=document.getElementById('table1')
    while(var_table1.rows.length>2)
    {
        var_table1.deleteRow(1)
    }
    for(i in MyTable.Rows)
    {
        row=var_table1.insertRow(var_table1.rows.length-1)
        cell=row.insertCell(-1)
        cell.className='tdcss'
        cell.innerHTML=MyTable.Rows[i]["Name"]
        cell=row.insertCell(-1)
        cell.className='tdcss'
        cell.innerHTML=MyTable.Rows[i]["Tel"]
        cell=row.insertCell(-1)
        cell.className='tdcss'
        cell.innerHTML=MyTable.Rows[i]["Mail"]
        cell=row.insertCell(-1)
        cell.className='tdcss'
        cell.innerHTML='<input style="width: 65px; height: 30px" type="button" value="删除" onclick="return deleteRow('+i+')" />'
    }
}

上一篇：ASP.NET实现包涵HTML标记的内容分页
下一篇：ASP.NET获取网站根目录的url的函数，很简单

分享到： QQ空间新浪微博人人网开心网更多

精彩图集

精彩文章

热点文章