silverlight与javascript交互操作.doc

在silverlight开发中，我们可以使用js来调用silverlight中的方法（当然方法上要捆绑相应属性），也可以将指定的js方法绑定到silverlight应用中的事件上本DEMO演示了通过js调用完成silverlight数据列表控件(DataGrid)的数据绑定操作，并通过DataGrid的EmployeeList_BeginningCellEdit事件将当前选取的数据行信息返回到js所绑定的事件参数上，并调用该js方法显示选中数据行信息，如下图所示:下面介绍一下主要的开发过程:)首先，我们需要建立一个Silverlight Application ，名称为：Silverlight_JS_call.然后我们要在当前的项目中加入一个类文件，名称为：EmployeeInfo.cs.下面是相应的代码，相关内容见注释:ScriptableTypepublic class EmployeeInfo/ summary/ 雇员编号/ /summaryScriptableMemberpublic int EmployeeNo get; set; / summary/ 雇员名称/ /summaryScriptableMemberpublic string EmployeeName get; set; / summary/ 地址/ /summaryScriptableMemberpublic string Address get; set; / summary/ 雇员事件参数（用于完成与js绑定事件参数）/ /summaryScriptableTypepublic class EmployeeInfoEventArgs : EventArgsScriptableMemberpublic EmployeeInfo employeeInfo get; set; / summary/ 要注册并在页面中使用的js调用脚本对象/ /summaryScriptableTypepublic class JavaScriptableObject/ summary/ js捆绑的事件handler/ /summaryScriptableMemberpublic event EventHandlerEmployeeInfoEventArgs SelectEmployeeInfo;public void OnSelectEmployeeInfo(EmployeeInfo employeeinfo)if (SelectEmployeeInfo != null)SelectEmployeeInfo(this, new EmployeeInfoEventArgs()employeeInfo = employeeinfo);/ summary/ 雇员信息管理类/ /summarypublic class EmployeeManagerpublic IEnumerableEmployeeInfo employeeList;/ summary/ 初始化会员数据/ /summarypublic EmployeeManager()/初始化雇员数据employeeList = new ListEmployeeInfo()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/returnspublic IEnumerableEmployeeInfo GetEmployeeList(int count)return (from e in employeeListselect new EmployeeInfoEmployeeNo = 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.Pagexmlns=/client/2007xmlns:x=/winfx/2006/xamlWidth=400 Height=300Grid x:Name=LayoutRoot Background=WhiteGrid.RowDefinitionsRowDefinition Height=300 /Grid.RowDefinitionsmy: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文件的内容（相关内容见注释）:ScriptableTypepublic partial class Page : UserControlpublic Page()InitializeComponent();this.Loaded += Page_Loaded;this.EmployeeList.BeginningCellEdit +=new EventHandlerDataGridCellEditingCancelEventArgs(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/paramvoid EmployeeList_BeginningCellEdit(object sender, DataGridCellEditingCancelEventArgs e)/当有要编辑的信息时if (EmployeeList.SelectedItem != null)EmployeeInfo employeeInfo = EmployeeList.SelectedItem as EmployeeInfo;/执行选中信息事件操作(最终会执行js所绑定的function代码)javaScriptableObject.OnSelectEmployeeInfo(employeeInfo);/这里必须声明是public,否则js调用该方法时会报错ScriptableMemberpublic 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 = Show