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]