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中的源码后一看便知:)

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

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