LAMPProject: Html Password Box with Silverlight. Free source code and programming help

Report Article

Discuss

Send to a friend

4 votes for this Article.

Popularity: 1.63 Rating: 2.71 out of 5

Note: This is an unedited contribution. If this article is inappropriate, needs attention or copies someone else's work without reference then please Report This Article

Download JavaScriptAndSL2Beta2 - 500.55 KB

Introduction

After posting an small article about how to create password box in Silverlight 2 beta 2 I have got a 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 an method or a whole class that it will be accessed via javascript and then register a 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 a this object whit label loginProvider to javascript calls.
Secondly, we have 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 avaible method- 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() : "");
        }
    }

Second thing is to create a 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 from where is sl2b2 tag. For this purpose I have added additional attribute to object instance of Silverlight control (inside the div tag).

    <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

Keep a running update of any changes or improvements you've made here.

License

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

About the Author

Maciej Gren

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

Occupation:	Team Leader
Company:	GOYELLO
Location:	Poland

Other popular Silverlight articles:

Legion: Build your own virtual super computer with Silverlight
Legion is a grid computing framework that uses the Silverlight CLR to execute user definable tasks. It provides grid-wide thread-safe operations for web clients. Client performance metrics, such as bandwidth and processor speed, may be used to tailor jobs. Also includes a WPF Manager application.
Silverlight 1.1 Fun and Games
Silverlight 1.1 Fun and Games
Silverlight Animations in a Practical Business Application
An article on building a practical business application using Silverlight animations
Silverlight Alien Sokoban
A fun Silverlight implementation of the game Sokoban. Contrasting Silverlight 1.1 and WPF, while showcasing some new features of C# 3.0, Expression Design, Expression Blend, and Visual Studio 2008.
Beginning Silverlight 1.1 Part 1
Describing basic Silverlight principles

Article Top

You must Sign In to use this message board.

Msgs 1 to 1 of 1 (Total in Forum: 1) (Refresh)

FirstPrevNext

Subject

Author

Date

Thanks for sharing.

Rajib Ahmed

19:53 1 Jul '08

Last Visit: Friday, October 10, 2008 11:42 AM Last Update:Friday, October 10, 2008 11:42 AM

General News Question Answer Joke Rant Admin