html中调用silverlight中的方法

在xaml页面中放置一个textblock控件来绑定数据

     <ItemsControl   x:Name="cityname">
            <ItemsControl.ItemTemplate>
                <DataTemplate>
                    <TextBlock  Text="{Binding  CityName}" />
                </DataTemplate>
            </ItemsControl.ItemTemplate>
        </ItemsControl>

实体类:

  public class MyData
    {
        public string MyName { get; set; }
        public string CityName { get; set; }
        public double Longatuide { get; set; }
        public MyData(string name,string cityname, double atuide)
        {
            CityName=cityname;
            MyName = name;
            Longatuide = atuide;
        }
    }

后他代码:

 public MainPage()        

{           

  InitializeComponent();    

  Myinfos("China");            

  this.Loaded += new RoutedEventHandler(MainPage_Loaded);     

 }

 void MainPage_Loaded(object sender, RoutedEventArgs e)        

{             

   HtmlPage.RegisterScriptableObject("showmessage",this);    //注册要想浏览器公开的对象,然后才可以从js调用  

}        

[ScriptableMember]  //使用ScriptableMemberAttribute标记那些成员可被脚本化     

public void Myinfos(string strwhere)        

{            

List<MyData> datas = GetMyInfo(strwhere);

cityname.ItemsSource = datas;        

}        

public  List<MyData>  GetMyInfo(string  strwhere)        

{            

List<MyData> datas = new List<MyData>();            

switch(strwhere)            

{                

case  "China":                    

{                        

datas.Add(new MyData("danche","中国",12233));

 break;                    

}                

case  "America": 

{                        

datas.Add(new MyData("金泰熙","韩国",20013));                       

break;                    

}            

}            

return datas;        

}

 

现在在silverlight宿主html中添加按钮:

    </div> 
            <div id="JScontrol"   style="width:400px; height:76px; left:0px;top:200px; position:absolute">
            <input  type="button"  id="America"   value="btnAmercia" onclick="callMyinfos('America');" />
            <input  type="button"  id="China" value="btnChina"  onclick="callMyinfos('China');" />
        </div>

函数:

 <script type="text/javascript">
        function callMyinfos(country) {
            var mycontroldiv = document.getElementById("mycontrol");
            mycontroldiv.content.showmessage.Myinfos(country);//此处的showmessage就是在silverlight后台注册的key
        }
    </script>

完整代码:

<!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" >

<head>    

<title>silverlightviahtmlandjs</title>    

<style type="text/css">    

html, body {      height: 100%;      overflow: auto;     }    

body {      padding: 0;      margin: 0;     }    

#silverlightControlHost {      height: 100px;      width:200px;      text-align:center;     }    

</style>    

<script type="text/javascript" src="Silverlight.js"></script>

<script type="text/javascript">        

function onSilverlightError(sender, args) {  

           var appSource = "";            

           if (sender != null && sender != 0) {  

           appSource = sender.getHost().Source;            

           }                        

          var errorType = args.ErrorType;            

           var iErrorCode = args.ErrorCode;

            if (errorType == "ImageError" || errorType == "MediaError") {               return;             }

            var errMsg = "Silverlight 应用程序中未处理的错误 " +  appSource + "\n" ;

            errMsg += "代码: "+ iErrorCode + "    \n";            

            errMsg += "类别: " + errorType + "       \n";            

            errMsg += "消息: " + args.ErrorMessage + "     \n";

            if (errorType == "ParserError") {                

             errMsg += "文件: " + args.xamlFile + "     \n";                

             errMsg += "行: " + args.lineNumber + "     \n";                

             errMsg += "位置: " + args.charPosition + "     \n";            

             }            

            else if (errorType == "RuntimeError") {                          

           if (args.lineNumber != 0) {                    

           errMsg += "行: " + args.lineNumber + "     \n";                    

           errMsg += "位置: " +  args.charPosition + "     \n";                

           }                

           errMsg += "方法名称: " + args.methodName + "     \n";            

       }

            throw new Error(errMsg);         }      

    </script>    

<script type="text/javascript">        

function callMyinfos(country) {            

    var mycontroldiv = document.getElementById("mycontrol");            

    mycontroldiv.content.showmessage.Myinfos(country);        

}    

</script>

</head>

<body>    

<form id="form1" runat="server" style="height:100%">    

<div id="silverlightControlHost">        

   <object data="data:application/x-silverlight-2," type="application/x-silverlight-2" width="100%" height="100%"  id="mycontrol">    

     <param name="source" value="ClientBin/silverlightviahtmlandjs.xap"/>    

     <param name="onError" value="onSilverlightError" />    

     <param name="background" value="white" />    

     <param name="minRuntimeVersion" value="4.0.50401.0" />    

     <param name="autoUpgrade" value="true" />    

     <a href="http://go.microsoft.com/fwlink/?LinkID=149156&v=4.0.50401.0" style="text-decoration:none">      

         <img src="http://go.microsoft.com/fwlink/?LinkId=161376" alt="获取 Microsoft Silverlight" style="border-style:none"/>    

    </a>     

    </object>

    <iframe id="_sl_historyFrame" style="visibility:hidden;height:0px;width:0px;border:0px"></iframe>            

</div>             

<div id="JScontrol"   style="width:400px; height:76px; left:0px;top:200px; position:absolute">            

         <input  type="button"  id="America"   value="btnAmercia" onclick="callMyinfos('America');" />            

         <input  type="button"  id="China" value="btnChina"  onclick="callMyinfos('China');" />        

</div>    

</form>

</body>

</html>

 

posted on 2014-01-20 11:50  谭一丹  阅读(426)  评论(0编辑  收藏  举报

导航