silverlight與javascript交互操作

 

在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方面的考慮．而這時如果腳本中直接調用對象實例化的屬性或
方法時，會出現對象未知的情況．
　　    
    好了，今天的內容就到這裏了．
    
    源碼下載鏈接，請點擊這裏:)