silvelight中操作html页面元素

　　在上一篇文章(silverlight与javascript交互操作 )中，我们通过属性绑定([ScriptableType])的方式

进行了js与silverlight之间的互操作．

其实只就实现这个DEMO而言，还有更加直接简单的方式，就是使用:

HtmlPage.Document.GetElementById（）

首先，我们需要建立一个项目silverlight项目, 名称为: HtmlDOM

还是将上一篇中的EmployeeInfo.cs拷贝到当前项目下，并将其修改成如下内容：

public class EmployeeInfo

{

/// <summary>

/// 雇员编号

/// </summary>

public int EmployeeNo { get; set; }

/// <summary>

/// 雇员名称

/// </summary>

public string EmployeeName { get; set; }

/// <summary>

/// 地址

/// </summary>

public string Address { get; set; }

}

/// <summary>

/// 雇员事件参数（用于完成与js绑定事件参数）

/// </summary>

public class EmployeeInfoEventArgs : EventArgs

{

public EmployeeInfo employeeInfo { get; set; }

}

/// <summary>

/// 雇员信息管理类

/// </summary>

public class EmployeeManager

{

public IEnumerable<EmployeeInfo> employeeList;

/// <summary>

/// 初始化会员数据

/// </summary>

public EmployeeManager()

{

//初始化雇员数据

employeeList = new List<EmployeeInfo>()

{

new EmployeeInfo(){EmployeeNo = 10001, EmployeeName = "张三" , Address = "北京"},

new EmployeeInfo(){EmployeeNo = 10002, EmployeeName = "李四" , Address = "北京"},

new EmployeeInfo(){EmployeeNo = 10003, EmployeeName = "王五" , Address = "北京"},

new EmployeeInfo(){EmployeeNo = 10004, EmployeeName = "马六" , Address = "北京"},

new EmployeeInfo(){EmployeeNo = 10005, EmployeeName = "王大麻子" , Address = "北京"},

new EmployeeInfo(){EmployeeNo = 10006, EmployeeName = "王宝强" , Address = "北京"},

new EmployeeInfo(){EmployeeNo = 10007, EmployeeName = "王蛋蛋" , Address = "北京"},

new EmployeeInfo(){EmployeeNo = 10008, EmployeeName = "王五强" , Address = "北京"}

};

}

/// <summary>

/// 获取指定数量的雇员数据

/// </summary>

/// <param name="count">要获取的雇员信息数</param>

/// <returns></returns>

public IEnumerable<EmployeeInfo> GetEmployeeList(int count)

{

return (from e in employeeList

select new EmployeeInfo

{

EmployeeNo = e.EmployeeNo,

EmployeeName = e.EmployeeName,

Address = e.Address

}).Take(count);

}

}

　　而xaml代码还是延用上一篇文章中的内容如下：

<Grid x:Name="LayoutRoot" Background="White">

<Grid.RowDefinitions>

<RowDefinition Height="300" />

</Grid.RowDefinitions>

<my:DataGrid  x:Name="EmployeeList"  Grid.Row="1"  AutoGenerateColumns="True" Height="280" Margin="5,5,5,5" AlternatingRowBackground="AliceBlue" RowBackground="BlanchedAlmond">

</my:DataGrid>

</Grid>

而下面的就是相应的page.xaml.cs代码，如下（相关内容见注释）：

public partial class Page : UserControl

{

public Page()

{

InitializeComponent();

this.Loaded += Page_Loaded;

this.EmployeeList.BeginningCellEdit += new EventHandler<DataGridCellEditingCancelEventArgs>(EmployeeList_BeginningCellEdit);

}

void Page_Loaded(object sender, RoutedEventArgs e)

{　 //创建＂加载数据＂的button并绑定相应的onclick事件

HtmlElement button = CreateElement("input");

button.SetAttribute("type", "button");

button.SetAttribute("value", "加载数据");

button.AttachEvent("onclick", new EventHandler<HtmlEventArgs>(button_Click));

GetElement("EmployeeManage").AppendChild(button);

}

void button_Click(object sender, HtmlEventArgs e)

{

LoadData(7);//先取出7条数据

}

/// <summary>

/// 击编辑雇员列表信息事件

/// </summary>

/// <param name="sender"></param>

/// <param name="e"></param>

void EmployeeList_BeginningCellEdit(object sender, DataGridCellEditingCancelEventArgs e)

{

//当有要编辑的信息时

if (EmployeeList.SelectedItem != null)

{

EmployeeInfo employeeInfo = EmployeeList.SelectedItem as EmployeeInfo;

GetElement("employeeNo").SetAttribute("value", employeeInfo.EmployeeNo.ToString());

GetElement("employeeName").SetAttribute("value", employeeInfo.EmployeeName);

GetElement("address").SetAttribute("value", employeeInfo.Address);

}

}

/// <summary>

/// 获取指定ID的HTML元素

/// </summary>

/// <param name="ElementID"></param>

/// <returns></returns>

HtmlElement GetElement(string ElementID)

{

return HtmlPage.Document.GetElementById(ElementID);

}

/// <summary>

/// 创建指定tagname的元素

/// </summary>

/// <param name="tagname"></param>

/// <returns></returns>

HtmlElement CreateElement(string tagname)

{

return HtmlPage.Document.CreateElement("input");

}

//这里必须声明是public,否则js调用该方法时会报错

public void LoadData(int count)

{

//加载指定数据的雇员信息

EmployeeList.ItemsSource = new EmployeeManager().GetEmployeeList(count);

}

}

　　而相应的aspx页面就不用再多写什么js脚本了．大家下载本DEMO中的源码后一看便知:)

好了，今天的内容就到这里了：）

源码下载链接，请点击这里：）