Creating Rails Like Flash Feature in .NET The Flash Control

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:

01class PostsController < ActionController::Base
02    def create
03      # save post
04      flash[:notice] = "Successfully created post"
05      redirect_to posts_path(@post)
06    end
07 
08    def show
09      # doesn't need to assign the flash notice to the template, that's done automatically
10    end
11  end
12 
13  show.html.erb
14    <% if flash[:notice] %>
15      <div class="notice"><%= flash[:notice] %></div>
16    <% end %>

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.

01using System.Web.UI.WebControls;
02 
03namespace FlashControl
04{
05    public class Flash : Label
06    {
07        public string Message { get; set; }
08 
09        public void Show(string message)
10        {
11            Text = message;
12        }
13        
14        protected override void OnPreRender(System.EventArgs e)
15        {
16            RegisterClientScripts();
17            base.OnPreRender(e);
18        }
19 
20        private void RegisterClientScripts()
21        {
22            string script = @"function flash() { $('#" + ID + "').fadeIn(2000).fadeOut(2000);";
23            script += "} setTimeout('flash()',1000);";
24 
25            if(!Page.ClientScript.IsClientScriptBlockRegistered("FlashClientScript"))
26            {
27                Page.ClientScript.RegisterClientScriptBlock(GetType(),"FlashClientScript",script,true);
28            }
29 
30           
31        }
32    }
33}

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.

`1`	`<%@ Register Assembly="FlashControl"` `Namespace="FlashControl"` `TagPrefix="mycontrols"` `%>`

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

1<form runat="server">
2<mycontrols:Flash ID="flash1" BackColor="Blue" runat="server" />
3 
4<asp:Button ID="btn1" runat="server" Text="Insert Customer!" OnClick="btn1_click" />
5 
6</form>

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.

1  protected void btn1_click(object sender, EventArgs e)
2        {
3            flash1.Show("Customer has been inserted!");
4        }

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.

`1`	`this.Style.Add("display","none");`

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]