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

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

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