HighOnCoding.com: Creating Rails Like Flash Feature in .NET The Flash Control

Creating Rails Like Flash Feature in .NET The Flash Control

AzamSharp
Published Date: 4/9/2009 1:57:01 PM
Views: 7086

Abstract:
Ruby on Rails exposes a very interesting feature which flashes a message on the screen for a brief period. This is called "Flash" in Rails. The main purpose of this feature is to notify the user that something has happened on the page. In this article Mohammad Azam will create a Flash control in .NET which mimics the behavior of the Flash feature in Ruby on Rails framework.
Flash Feature in Rails:

Here is the usage of the flash feature in the Rails framework:

In the above code when the Post is Saved the flash notice will display "Successfully created post". This message will disappear in few seconds.

Using JQuery to Our Advantage:

In order to make our message appear and then disappear we should create some DHTML effects to make this happen. Luckily, JQuery saves a lot of work by providing the fadeIn and fadeOut functions. We will reference the JQuery library in our page. If you are using Master Pages then you should refer to the JQuery library in our master pages.

The Complete Implementation of the Flash Control:

Since, our control is a simple one there is not much code to it. Here is the complete implementation of the Flash control.

The Message property is used to set the message to be displayed. The RegisterClientScripts method is where all the magic happens. We are injecting the custom JavaScript "flash" function into the page. If you don't like this approach then you can always use the WebResource method explained in the article below.

Injecting Client Side Scripts for RequiredTextBox Control

Another thing to notice is the setTimeout function which calls the "flash" function right after injecting the "flash" function into the page. If you simply call the flash function without using the setTimeout then it will not work. The reason is that the parser needs some time to digest the function that was created a millisecond ago. The setTimeout function will call the "flash" function after 1 second ensuring that the "flash" function was registered before a call was made.

Using the Control on the Page:

First, you need to register the FlashControl on the page using the Register directive.

Now, you can easily use the control using the following code:

Don't forget to link to the required JQuery JavaScript files since they are required by the control.

In the button click code you can define what message you want to set.

The effect is shown in the screenshot below:

One thing to notice is that the control does not really fade in. It just appears instantly and then fades out. In order to fade in the control you need to add the following line inside your RegisterClientScripts method.

This will make sure that the control fades in and then fades out. The effect is shown below:

Conclusion:

In this article Mohammad Azam explained how to create a simple flash control which will display messages to the user.

References:

Articles:

1) Creating a RequiredTextBox Web Server Control in ASP.NET
2) Injecting Client Side Scripts for RequiredTextBox Control
3) Attaching an ICON with the RequiredTextBox Control

Videos:

1) Building RequiredTextBox Custom Server Control
2) Custom RequiredTextBox With RegularExpressionValidator
3) Injecting Client Script For RequiredTextBox Control
4) Building RequiredTextBox Embedding WebResource
5) Creating ICON for RequiredTextBox Control

[Download Sample]

Comments/Feedbacks


	Subject: Nice Article Name: Thanigainathan S Date: 6/2/2009 2:16:09 AM Comment: Hi, Can you please tell any practical usage of this control ? Thanks, Thani


	Subject: re: Practical Use of Flash Control Name: Mohammad Azam Date: 6/2/2009 7:22:58 AM Comment: Hi Thanigainathan S, You can use it to display messages to the user. Put it on the master page and whenever any activity happens in the application like CRUD operations or errors you can use the Flash control to display them.


	Subject: Nice One Name: Shail Date: 6/3/2009 1:43:24 AM Comment: Good one !


	Subject: Great Name: Radas Date: 6/3/2009 7:52:16 AM Comment: Good article. Question off topic : what program do you use to create those nice animated screen shot gifs ? Thanks.


	Subject: Cool Feature Name: Ad Date: 6/4/2009 6:43:23 AM Comment: Nice work. Can you please provide VB.NET code for this article?


	Subject: re: Radas Name: Mohammad Azam Date: 6/4/2009 8:52:36 AM Comment: Hi Radas, I use Camtasia! Thanks,


	Subject: re: Ad Name: Mohammad Azam Date: 6/4/2009 8:53:12 AM Comment: Hi Ad, You can use online converters to convert from C# to VB.NET Thanks,


	Subject: JQuery? Name: Mike Date: 8/6/2009 8:43:38 AM Comment: You mention several times that if you're using master pages you need to link the JQuery library. What do you mean by linking? Could you offer more explaination or maybe include in the source download the html page in those animated screen shots.


	Subject: re: JQuery? Name: Mohammad Azam Date: 8/12/2009 1:37:47 PM Comment: Hi Mike, In order to use JQuery library in all the pages of your applications you should include the JQuery library to your Master Page. This means you need to add the script src reference inside the head section of the Master Page. This will allow you to use JQuery library in all the pages of your application that uses the Master page.


	Subject: Control not working on master page Name: Shishir Date: 12/29/2009 3:23:11 AM Comment: When i used this control on master page and referencing jquery files on master page it displayed the message but it doesn't fades in and fades out the message. Can you please tell me how to get rid of this problem . Thanks in advance.