silverlight与javascript交互操作

本文介绍如何在Silverlight应用中实现JavaScript与Silverlight组件之间的数据交互,具体展示了使用JavaScript调用Silverlight中的DataGrid控件并获取数据行信息的过程。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

在silverlight开发中,我们可以使用js来调用silverlight中的方法(当然方法上要捆绑相应属性),也可以将指定
的js方法绑定到silverlight应用中的事件上.本DEMO演示了通过js调用完成silverlight数据列表控件(DataGrid)的数
据绑定操作,并通过DataGrid的EmployeeList_BeginningCellEdit事件将当前选取的数据行信息返回到js所绑定的
事件参数上,并调用该js方法显示选中数据行信息,如下图所示:

           
  
     下面介绍一下主要的开发过程:)
  
     首先,我们需要建立一个Silverlight Application ,名称为:Silverlight_JS_call.
  
     然后我们要在当前的项目中加入一个类文件,名称为:EmployeeInfo.cs.
  
     下面是相应的代码,相关内容见注释:  

 

[ScriptableType]
public class EmployeeInfo
{
    
/// <summary>
    
/// 雇员编号
    
/// </summary>
     [ScriptableMember]
    
public int EmployeeNo { get; set; }
    
/// <summary>
    
/// 雇员名称
    
/// </summary>
     [ScriptableMember]
    
public string EmployeeName { get; set; }
    
/// <summary>
    
/// 地址
    
/// </summary>
     [ScriptableMember]
    
public string Address { get; set; }
}
/// <summary>
/// 雇员事件参数(用于完成与js绑定事件参数)
/// </summary>
[ScriptableType]
public class EmployeeInfoEventArgs : EventArgs
{
     [ScriptableMember]
    
public EmployeeInfo employeeInfo{ get; set; }
}

/// <summary>
/// 要注册并在页面中使用的js调用脚本对象
/// </summary>
[ScriptableType]
public class JavaScriptableObject
{
    
/// <summary>
    
/// js捆绑的事件handler
    
/// </summary>
     [ScriptableMember]
    
public event EventHandler<EmployeeInfoEventArgs> SelectEmployeeInfo;

    
public void OnSelectEmployeeInfo(EmployeeInfo employeeinfo)
     {
        
if (SelectEmployeeInfo != null)
         {
             SelectEmployeeInfo(
this, new EmployeeInfoEventArgs()
             {
                 employeeInfo
= employeeinfo
             });
         }
     }
}

/// <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);
     }
}

    上面代码中要注意的是[ScriptableType]和[ScriptableMember],前者允许Silverlight把类型暴露给脚本,后者
则会把成员方法或属性暴露给脚本.

  而下面的代码就是page.xaml中的内容:  

 

<UserControl xmlns:my="clr-namespace:System.Windows.Controls;assembly=System.Windows.Controls.Data"   x:Class="Silverlight_JS_call.Page"
     xmlns
="http://schemas.microsoft.com/client/2007"
     xmlns:x
="http://schemas.microsoft.com/winfx/2006/xaml"
     Width
="400" Height="300">
    
<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>
</UserControl>

  下面则是相应的page.xaml.cs文件的内容(相关内容见注释):  

[ScriptableType]
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)
     {
         javaScriptableObject
= new JavaScriptableObject();
        
//注册js可用的类型(详情见Silverlight_JS_callTestPage.aspx中的js代码)
         HtmlPage.RegisterScriptableObject("EmployeeObject", javaScriptableObject);
         HtmlPage.RegisterScriptableObject(
"Page", this);
     }
    
    
/// <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;
            
//执行选中信息事件操作(最终会执行js所绑定的function代码)
             javaScriptableObject.OnSelectEmployeeInfo(employeeInfo);
         }
     }     

  
//这里必须声明是public,否则js调用该方法时会报错
     [ScriptableMember]
    
public void LoadData(int count)
     {
        
//加载指定数据的雇员信息
         EmployeeList.ItemsSource = new EmployeeManager().GetEmployeeList(count);
     }

     JavaScriptableObject javaScriptableObject;       
}


    上面代码要注意的是RegisterScriptableObject方法的调用,它用来注册可被脚本使用的对象实例,
与它相对应的还有一个方法RegisterCreateableType,它用于注册可被脚本使用的类型.

  到这里,基本上完成的cs代码的开发工作.下面则是相应的js调用以及事件绑定代码了,请看:

<script type="text/javascript">
   
//显示选取的雇员信息
   //注:args为cs中的EmployeeInfoEventArgs类型实例
   function ShowSelectEmployeeInfo(sender, args)
    {  
       $get(
"employeeNo").value = args.employeeInfo.EmployeeNo;
       $get(
"employeeName").value = args.employeeInfo.EmployeeName;
       $get(
"employeeAddress").value = args.employeeInfo.Address;
       $get(
"results").style.display = 'block';
    }
   
   
//初始化操作,绑定到input元素("加载数据")的click事件上,详情参见aspx文件
   function Init(obj)
    {
       
//绑定上面的js函数到silverlight的事件handler
        $get("Xaml1").content.EmployeeObject.SelectEmployeeInfo = ShowSelectEmployeeInfo;
       
       
//加载雇员信息     
        $get("Xaml1").content.Page.LoadData(parseInt(obj.title));              
    }
</script>

           
    另外在进行初始化操作,这里使用了onclick方法来执行操作,而不是直接运行相应代码.原因是
silverlight对象加载是使用了异步方式,这样会造成对象实例化完成时间迟于页面JS脚本的运行时间.
这样设计的原因,我个人认为主要是UE方面的考虑.而这时如果脚本中直接调用对象实例化的属性或
方法时,会出现对象未知的情况.

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值