学步园

现在需要通过按钮来控制界面上的Silverlight显示的值。其方法如下。

1、首先在Silverlight中UserControl中编写一个js可以访问的方法。注意：此方法要用ScriptableMember特性。 

        //编写js访问silverLight 的方法,selectDate为参数
        [ScriptableMember()]
        public void GetTrendChart(string selectDate)
        {
            DateTime tempDate = new DateTime();
            if (string.IsNullOrEmpty(selectDate) || !DateTime.TryParse(selectDate, out tempDate))
            {
                ShowInfo("日期有误");
                return;
            }
               //取得资料,改变silverLight显示值，此处省略CreateTrendChart()的代码。
        　　　　CreateTrendChart(selectDate);
        }

2、在App.xaml中注册此方法。

        //在App.xaml中注册
        private void Application_Startup(object sender, StartupEventArgs e)
        {
                //调用UserControl
                this.RootVisual = new Trend();
                //注册js访问的方法
                System.Windows.Browser.HtmlPage.RegisterScriptableObject("TrendMethod", this.RootVisual);
        }

 3.在Aspx页面的调用Silverlight中增加onload事件

            <%--调用siliverlight--%>
            <object data="data:application/x-silverlight-2," type="application/x-silverlight-2"
                width="100%" height="100%">
                <param name="source" value="../ClientBin/Iaddtech.Environmental.Web.Silverlight.xap" />
                <param name="onError" value="onSilverlightError" />
                <param name="background" value="white" />
                <param name="minRuntimeVersion" value="3.0.40818.0" />
                <%--增加Load事件--%>
                <param name="onLoad" value="silverLoaded" />
                <param name="autoUpgrade" value="true" />
                <param name="Windowless" value="true" />
                <a href="http://go.microsoft.com/fwlink/?LinkID=149156&v=3.0.40818.0" style="text-decoration: none">
                    <img src="http://go.microsoft.com/fwlink/?LinkId=108181" alt="Get Microsoft Silverlight"
                        style="border-style: none" />
                </a>
            </object>

4、编写onload事件。通过onload事件得到siliverlight对象。

    <script type="text/javascript">
        var silverlightObj = null;
        function silverLoaded(sender, args) {
            silverlightObj = sender.getHost();     //get Siliverlight Object 
        }
    </script>

 5、在Aspx页面上增加一个input。通过此input改变Silverlight显示值。此input的onclick方法为GetTrendData.

        <div class="Query_button">
            <input type="image" value="getDate" onclick="GetTrendData(); return false;" src="../Resources/images/see_button.jpg" />
        </div>

 6、在js中添加input的click事件。 通过Click事件调用Silverlight中方法

    <script type="text/javascript">
        //input的click事件
        function GetTrendData() {
            //silverlightObj在上边的onload事件中已得到,selectDate为给silverlight的参数
            silverlightObj.Content.TrendMethod.GetTrendChart(selectDate);
        }
    </script>

 这样就可以通过js来控制Silverlight显示值了。