SilverLight学习笔记--Silverligh之在Javascript中调用.NET(包括简单参数和复杂参数的操作)...

最新推荐文章于 2024-07-28 20:27:10 发布

weixin_33887443

最新推荐文章于 2024-07-28 20:27:10 发布

阅读量78

点赞数

文章标签： javascript xhtml c# ViewUI

要在Javascript中调用.NET代码，我们需要先引入命名空间：

using System.Windows.Browser; // 引入此空间

然后，在此命名空间下，我们可用到HtmlPage对象，它有重要两个方法：

1 、RegisterScriptableObject方法，它用来注册可被脚本使用的对象实例.
2 、RegisterCreateableType方法，它用于注册可被脚本使用的类型．

此外，还有两个将要用到的暴露类型和成员的设置

1 、[ScriptableType]:它允许Silverlight把类型暴露给脚本，
2 、[ScriptableMember],它会把成员方法或属性暴露给脚本．

下面，我们开始学习如何使用上述方法和类来从javascript访问.NET代码。
首先，我们新建Silverlight应用程序，如图:

在SLJsCallNetFunctionTestPage.aspx中创建用户界面如图:

SLJsCallNetFunctionTestPage.aspx界面代码如下:

Code
<body style="height:100%;margin:0;">
    <form id="form1" runat="server" style="height:100%;">
        <asp:ScriptManager ID="ScriptManager1" runat="server"></asp:ScriptManager>
        <div  style="height:100%;">
            <div>
               <table>
                  <tr>
                    <td colspan="2" style=" font-size:17; color:Green; font-weight:bold"> 在Javascript中调用.NET Function 示例  </td>
                    <td></td>
                  </tr>
                   <tr>
                    <td> <asp:Label ID="Label2" runat="server" Text="输入第一个整数" ForeColor=Red > </asp:Label> </td>
                    <td> <asp:TextBox ID="txtBxNumOne" runat="server" BackColor=Yellow ></asp:TextBox>  </td>
                  </tr>
                  <tr>
                    <td> <asp:Label ID="Label3" runat="server" Text="输入第二个整数" ForeColor=Red> </asp:Label></td>
                    <td> <asp:TextBox ID="txtBxNumTwo" runat="server" Height="16px" BackColor=Yellow ></asp:TextBox> </td>
                  </tr>
                   <tr>
                     <td colspan="2" valign=middle;><input type="button" value="开始运算" onclick="OnClickCaculate()" /> </td>
                   </tr>
               </table>
            </div>
            <asp:Silverlight ID="Xaml1" runat="server" Source="~/ClientBin/SLJsCallNetFunction.xap" MinimumVersion="2.0.31005.0" Width="100%" Height="100%" />
        </div>
    </form>
</body>

一、简单参数的操作
在SL中定义一个类MyJSNetFunction,在此类中我们定义一段做加法运算的代码，此运算需要传入两个简单Int参数，返回值也为Int类型。其代码如下:

在SL后台代码注册上面定义的.NET Function,Page.xaml.cs代码如下:

using System;
using System.Collections.Generic;
using System.Linq;
using System.Net;
using System.Windows;
using System.Windows.Controls;
using System.Windows.Documents;
using System.Windows.Input;
using System.Windows.Media;
using System.Windows.Media.Animation;
using System.Windows.Shapes;
using System.Windows.Browser; // 引入此空间
namespace SLJsCallNetFunction
{
     public partial class Page : UserControl
    {
         public Page()
        {
            InitializeComponent();
            Loaded += new RoutedEventHandler(Page_Loaded);   // 添加Loaded事件
        }
         private void Page_Loaded( object sender, RoutedEventArgs e)
        {
            MyJSNetFunction netInstance = new MyJSNetFunction();
            HtmlPage.RegisterScriptableObject( " MyJsObject " ,netInstance); // 注册
        }
    }
}

在SLJsCallNetFunctionTestPage.aspx中编写Javascript程序段，引用上面注册的.NET代码段,Javascript代码如下:

     < script type = " text/javascript " >
        function OnClickCaculate()
        {
             // 取得在.NET中定义的Function,由于在注册时我们定义此Function名为"MyJsObject"，所以在下面的Content中，我们要使用注册时定义的名字
            var control = $ get ( " Xaml1 " );
            var content = control.content;
            var netObject = content.MyJsObject;

             // 分别取得两个TextBox输入框的数值
            var txtBxNumberOne = document.getElementById( " txtBxNumOne " );
            var NumberOne = txtBxNumberOne.value;
            var txtBxNumberTwo = document.getElementById( " txtBxNumTwo " );
            var NumberTwo = txtBxNumberTwo.value;

             // 调用.NET Function代码进行运算并返回运算结果
            var result = netObject.SLAdd(NumberOne, NumberTwo);
            alert(result);
        }
     </ script >

SLJsCallNetFunctionTestPage.aspx.cs ASP.NET页面代码如下:

Code
<%@ Page Language="C#" AutoEventWireup="true" %>

<%@ Register Assembly="System.Web.Silverlight" Namespace="System.Web.UI.SilverlightControls"
    TagPrefix="asp" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" style="height:100%;">
<head runat="server">
    <title>SLJsCallNetFunction</title>
    <script type="text/javascript">
        function OnClickCaculate()
        {
            //取得在.NET中定义的Function,由于在注册时我们定义此Function名为"MyJsObject"，所以在下面的Content中，我们要使用注册时定义的名字
            var control = $get("Xaml1");
            var content = control.content;
            var netObject = content.MyJsObject;

            //分别取得两个TextBox输入框的数值
            var txtBxNumberOne = document.getElementById("txtBxNumOne");
            var NumberOne = txtBxNumberOne.value;
            var txtBxNumberTwo = document.getElementById("txtBxNumTwo");
            var NumberTwo = txtBxNumberTwo.value;

            //调用.NET Function代码进行运算并返回运算结果
            var result = netObject.SLAdd(NumberOne, NumberTwo);
            alert(result);
        }
    </script>
</head>
<body style="height:100%;margin:0;">
    <form id="form1" runat="server" style="height:100%;">
        <asp:ScriptManager ID="ScriptManager1" runat="server"></asp:ScriptManager>
        <div  style="height:100%;">
            <div>
               <table>
                  <tr>
                    <td colspan="2" style=" font-size:17; color:Green; font-weight:bold"> 在Javascript中调用.NET Function 示例  </td>
                    <td></td>
                  </tr>
                   <tr>
                    <td> <asp:Label ID="Label2" runat="server" Text="输入第一个整数" ForeColor=Red > </asp:Label> </td>
                    <td> <asp:TextBox ID="txtBxNumOne" runat="server" BackColor=Yellow ></asp:TextBox>  </td>
                  </tr>
                  <tr>
                    <td> <asp:Label ID="Label3" runat="server" Text="输入第二个整数" ForeColor=Red> </asp:Label></td>
                    <td> <asp:TextBox ID="txtBxNumTwo" runat="server" Height="16px" BackColor=Yellow ></asp:TextBox> </td>
                  </tr>
                   <tr>
                     <td colspan="2" valign=middle;><input type="button" value="开始运算" onclick="OnClickCaculate()" /> </td>
                   </tr>
               </table>
            </div>
            <asp:Silverlight ID="Xaml1" runat="server" Source="~/ClientBin/SLJsCallNetFunction.xap" MinimumVersion="2.0.31005.0" Width="100%" Height="100%" />
        </div>
    </form>
</body>
</html>

二、复杂参数的操作

还是用到我们在"SilverLight学习笔记--Silverligh之在SL中调用Javascript (四种方法+简单与复杂参数的传递) "一文中定义的两个类
即：PlusNumbers类与PlusResults.cs类
PlusNumbers类定义如下:

Code
using System;
using System.Net;
using System.Windows;
using System.Windows.Controls;
using System.Windows.Documents;
using System.Windows.Ink;
using System.Windows.Input;
using System.Windows.Media;
using System.Windows.Media.Animation;
using System.Windows.Shapes;
using System.Windows.Browser;//引入此命名空间

namespace SLJsCallNetFunction
{
        //定义一个将作为Javascript传入参数的类
        [ScriptableType]
        public class PlusNumbers
        {
            private int _x;
            private int _y;

            [ScriptableMember]
            public int X
            {
                get { return _x; }
                set { _x = value; }
            }

            [ScriptableMember]
            public int Y
            {
                get { return _y; }
                set { _y = value; }
            }

            //构造函数
            public PlusNumbers()
            {
                this.X = 10;
                this.Y = 10;
            }

            //构造函数
            public PlusNumbers(int num1, int num2)
            {
                this.X = num1;
                this.Y = num2;
            }
        }

}

PlusResults类定义如下:

修改MyJSNetFunction.cs代码内容如下(我们把它的SLAdd函数的传参改为传入上述定义的PlusNumber类实例，返回类型则为PlusResult类):

using System;
using System.Net;
using System.Windows;
using System.Windows.Controls;
using System.Windows.Documents;
using System.Windows.Ink;
using System.Windows.Input;
using System.Windows.Media;
using System.Windows.Media.Animation;
using System.Windows.Shapes;
using System.Windows.Browser; // 此入此命名空间

namespace SLJsCallNetFunction
{
    [ScriptableType]
     public class MyJSNetFunction
    {
         // 此处定义的代码段传入和返回的都是复杂的参数（即：我们自定义的两个类）
         // 编写一个SLAdd方法，该方法将在JavaScript中被调用，必须为public，用ScriptableMember特性暴露给脚本。
        [ScriptableMember]
         public PlusResults  SLAdd(PlusNumbers OpNumbers)
        {
            PlusResults plReturn = new PlusResults();
            plReturn.RetValue = OpNumbers.X + OpNumbers.Y;
             return plReturn;
        }

    }
}

修改Page.xaml.cs代码内容如下:

using System;
using System.Collections.Generic;
using System.Linq;
using System.Net;
using System.Windows;
using System.Windows.Controls;
using System.Windows.Documents;
using System.Windows.Input;
using System.Windows.Media;
using System.Windows.Media.Animation;
using System.Windows.Shapes;
using System.Windows.Browser; // 引入此空间

namespace SLJsCallNetFunction
{
     public partial class Page : UserControl
    {
         public Page()
        {
            InitializeComponent();
            Loaded += new RoutedEventHandler(Page_Loaded);   // 添加Loaded事件
        }
         private void Page_Loaded( object sender, RoutedEventArgs e)
        {

            MyJSNetFunction netInstance = new MyJSNetFunction();
            HtmlPage.RegisterScriptableObject( " MyJsObject " , netInstance); // 加载时注册一个脚本可调用的当前页面实例：

             // HtmlPage.RegisterCreateableType("OpNumbers", typeof(PlusNumbers));   // 把在SL中定义的一个类映射为将在Javascript代码中使用的类型

        }
    }
}

修改Javascript代码如下:

     < script type = " text/javascript " >
        function OnClickCaculate()
        {
             // 取得在.NET中定义的Function,由于在注册时我们定义此Function名为"MyJsObject"，所以在下面的Content中，我们要使用注册时定义的名字
            var myXaml = $ get ( " Xaml1 " );
            var content = myXaml.content;
            var netObject = content.MyJsObject;


             // 分别取得两个TextBox输入框的数值
            var txtBxNumberOne = document.getElementById( " txtBxNumOne " );
            var NumberOne = txtBxNumberOne.value;
            var txtBxNumberTwo = document.getElementById( " txtBxNumTwo " );
            var NumberTwo = txtBxNumberTwo.value;

             // 传参处理
            var args = netObject.createManagedObject( " PlusNumbers " );
            args.X = NumberOne;
            args.Y = NumberTwo

             // 调用.NET Function代码进行运算并返回运算结果
            var  result = netObject.SLAdd(args);
             alert(result.RetValue);
        }
     </ script >

SLJsCallNetFunctionTestPage.aspx页面代码内容如下:

Code
<%@ Page Language="C#" AutoEventWireup="true" %>

<%@ Register Assembly="System.Web.Silverlight" Namespace="System.Web.UI.SilverlightControls"
    TagPrefix="asp" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" style="height:100%;">
<head runat="server">
    <title>SLJsCallNetFunction</title>
    <script type="text/javascript">
        function OnClickCaculate()
        {
            //取得在.NET中定义的Function,由于在注册时我们定义此Function名为"MyJsObject"，所以在下面的Content中，我们要使用注册时定义的名字
            var myXaml = $get("Xaml1");
            var content = myXaml.content;
            var netObject = content.MyJsObject;


            //分别取得两个TextBox输入框的数值
            var txtBxNumberOne = document.getElementById("txtBxNumOne");
            var NumberOne = txtBxNumberOne.value;
            var txtBxNumberTwo = document.getElementById("txtBxNumTwo");
            var NumberTwo = txtBxNumberTwo.value;

            //传参处理
            var args = netObject.createManagedObject("PlusNumbers");
            args.X = NumberOne;
            args.Y = NumberTwo

            //调用.NET Function代码进行运算并返回运算结果
            var  result = netObject.SLAdd(args);
             alert(result.RetValue);
        }
    </script>
</head>
<body style="height:100%;margin:0;">
    <form id="form1" runat="server" style="height:100%;">
        <asp:ScriptManager ID="ScriptManager1" runat="server"></asp:ScriptManager>
        <div  style="height:100%;">
            <div>
               <table>
                  <tr>
                    <td colspan="2" style=" font-size:17; color:Green; font-weight:bold"> 在Javascript中调用.NET Function 示例  </td>
                    <td></td>
                  </tr>
                   <tr>
                    <td> <asp:Label ID="Label2" runat="server" Text="输入第一个整数" ForeColor=Red > </asp:Label> </td>
                    <td> <asp:TextBox ID="txtBxNumOne" runat="server" BackColor=Yellow ></asp:TextBox>  </td>
                  </tr>
                  <tr>
                    <td> <asp:Label ID="Label3" runat="server" Text="输入第二个整数" ForeColor=Red> </asp:Label></td>
                    <td> <asp:TextBox ID="txtBxNumTwo" runat="server" Height="16px" BackColor=Yellow ></asp:TextBox> </td>
                  </tr>
                   <tr>
                     <td colspan="2" valign=middle;><input type="button" value="开始运算" onclick="OnClickCaculate()" /> </td>
                   </tr>
               </table>
            </div>
            <asp:Silverlight ID="Xaml1" runat="server" Source="~/ClientBin/SLJsCallNetFunction.xap" MinimumVersion="2.0.31005.0" Width="100%" Height="100%" />
        </div>
    </form>
</body>
</html>

运行效果如下:

前往：Silverlight学习笔记清单
本文程序在Silverlight2.0和VS2008环境中调试通过。本文参照了部分网络资料，希望能够抛砖引玉，大家共同学习。
(转载本文请注明出处)

weixin_33887443

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
SilverLight学习笔记--Silverligh之在Javascript中调用.NET(包括简单参数和复杂参数的操作)...

要在Javascript中调用.NET代码，我们需要先引入命名空间：using System.Windows.Browser;//引入此空间然后，在此命名空间下，我们可用到HtmlPage对象，它有重要两个方法： 1、RegisterScriptableObject方法，它用来注册可被脚本使用的对象实例. 2、RegisterCreateableType方法，它用于注册...
复制链接

扫一扫