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>
