Click here to Skip to main content
15,867,973 members
Articles / Web Development / ASP.NET

HTML Password Box with Silverlight

Rate me:
Please Sign up or sign in to vote.
2.88/5 (5 votes)
1 Jul 2008CPOL1 min read 29.2K   340   17   1
How to communicate from JavaScript/HTML page to Silverlight application using password form
samplescreen.JPG

Introduction

After posting a small article about how to create a password box in Silverlight 2 beta 2, I have got one request about usage of pure HTML password input instead of TextBox from Silverlight. I thought that this could be useful to present also how to sent objects from HTML page through JavaScripts into Silverlight page.

Using the Code

To establish communication with Silverlight page, we have to do two easy things.

Mark with special attribute name a method or a whole class that it will be accessed via JavaScript and then register an instance of this class.

Below is a Silverlight page class (generated from the project template) where I added RegisterScriptableObject line. Here, we tell to our Silverlight control that we would like to show this object with label loginProvider to JavaScript calls.
Secondly, we have a method which is a part of Page class with special ScriptableMember attribute. This means that we will expose this function for JavaScript calls. Summing it up, we published loginProvider with one available method - Login.

C#
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() : "");
    }
}

The second thing is to create an HTML code which will be responsible for collecting data from the entry form and send it to Silverlight control. For this purpose, we have created invokeManagedCode method which will be launched after pressing Login button. What could be not clear is where the sl2b2 tag is from. For this purpose, I have added an additional attribute to object instance of Silverlight control (inside the div tag).

ASP.NET
    <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" >

Points of Interest

For sure, communication between HTML content and Siliverlight can be done in several ways. This is only one of them.

History

  • 1st July, 2008: Initial post

License

This article, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)


Written By
Team Leader GOYELLO
Poland Poland
I started work with .Net in year 2005. During my studies I was a team leader of project which scored 4th place on Polish Imagine Cup Finals where we delivered WPF application with https WCF services. Meanwhile I have worked on Windows Mobile Applications with Windows CE 5.0. I have learned how to create Windows CE Images using Platform Builder and I gained high skills in Compact Framework 2.0. After one year of developing using this framework I have switched to ASP.Net. Currently I am using Monorail Framework together with Active Record and Extjs library (for presentation layer). I am a Team Leader in GOYELLO where we delivered quite successful projects. My aim is to develop good quality applications but not forgetting about reality. Always there are some drawbacks on each solution. The case is to find the proper balance Smile | :)

Comments and Discussions

 
GeneralThanks for sharing. Pin
Rajib Ahmed1-Jul-08 18:53
Rajib Ahmed1-Jul-08 18:53 

General General    News News    Suggestion Suggestion    Question Question    Bug Bug    Answer Answer    Joke Joke    Praise Praise    Rant Rant    Admin Admin   

Use Ctrl+Left/Right to switch messages, Ctrl+Up/Down to switch threads, Ctrl+Shift+Left/Right to switch pages.