带 Silverlight 的 HTML 密码框
2.88/5 (5投票s)
如何通过密码表单从 JavaScript/HTML 页面与 Silverlight 应用程序通信
引言
在发布一篇关于如何在 Silverlight 2 beta 2 中创建密码框的文章后，我收到一个请求，询问是否可以使用纯 HTML 密码输入框代替 Silverlight 中的 TextBox。我认为这也可以用来展示如何通过 JavaScript 将对象从 HTML 页面发送到 Silverlight 页面。
Using the Code
要建立与 Silverlight 页面的通信，我们只需要做两件简单的事情。
使用特殊属性名称标记一个方法或整个类，以便通过 JavaScript 访问它，然后注册该类的实例。
下面是 Silverlight 页面类（从项目模板生成），我添加了 RegisterScriptableObject 行。在这里，我们告诉我们的 Silverlight 控件，我们希望将此对象以标签 loginProvider 的形式显示给 JavaScript 调用。
其次，我们有一个属于 Page 类的方法，带有特殊的 ScriptableMember 属性。这意味着我们将把此函数暴露给 JavaScript 调用。总而言之，我们发布了 loginProvider，并提供了一个可用的方法 - Login。
public partial class Page : UserControl
{
public Page()
{
InitializeComponent();
HtmlPage.RegisterScriptableObject("loginProvider", this);
}
[ScriptableMember()]
public void Login(string password, string login)
{
this.Message.Text = "Your login is: " + login +
"\r\nFirst letter of your password is: " +
(password.Length > 0 ? password[0].ToString() : "");
}
}
第二件事是创建 HTML 代码，该代码将负责从输入表单收集数据并将其发送到 Silverlight 控件。为此，我们创建了 invokeManagedCode 方法，该方法将在按下登录按钮后启动。可能不清楚的是 sl2b2 标签来自哪里。为此，我在 Silverlight 控件的实例中添加了一个额外的属性（在 div 标签内）。
<script type="text/javascript">
function invokeManagedCode(){
var form = document.getElementById("loginpanel");
var password = form.password.value;
var user = form.user.value;
var control = document.getElementById("sl2b2");
control.Content.loginProvider.Login(password,user);
}
</script>
</head>
<body>
<form id="loginpanel" name="input" ACTION="javascript:invokeManagedCode()">
Username:
<input type="text" name="user">
Password:
<input type="password" name="password">
<input type="Submit" value="Login" >
关注点
当然，HTML 内容和 Silverlight 之间的通信可以通过多种方式实现。这只是其中一种。
历史
- 2008 年 7 月 1 日：初始发布