Displaying client messages with Ajax Control Toolkit


Hi ,

I’ve not written for a (pretty) long time. Developing software is lovely but when it is done for making money and paying the bills it gets stinky! This is why I don’t find time to update the blog.

However in this post I am goanna write a helper class to show client messages in an Ajax enabled web application which exploits Ajax Control Toolkit. In this senario we have a web application that pages are blended with a master page. The master page hosts a ScriptManager to avoid putting one on each page. We will use ModalPopupExtender to show pretty client side messages! Why I say “pretty messages” is that we may show a message by injecting a <script>alert(‘…’);</script> message into the response stream, but I beleive it is too much simple and ugly! We also can use this method to do something in the modal window, like data entry or having more than two Yes and No buttons.

Well, first suppose we have a master page. To display messages we put a panel at the end of the master page’s code and decorate it in any way we enjoy the most! For example we may fill it with a table, one exclamation image and one button.

<asp:Panel runat=”server” ID = “_pnlClientMessage_” style=”display:none;” >

This panel has a style that makes it invisible. There is also a label that will be used to show the message.

<asp:Label runat=”server” ID = “_lblClientMessage_” />

There is also a button that will be used to close the modal popup.

<asp:Button ID=”btnCLose” runat=”server” Text=” OK “ CausesValidation=”false” />

Now we will put a ModalPopupExtender to show the modal message box:

<ajaxtoolkit:modalpopupextender ID=”mdlPopup” runat=”server”

TargetControlID=”btnShowPopup” PopupControlID=”_pnlClientMessage_”

CancelControlID=”btnClose” />

The properties we must set for modalpopupextender are :

1- TargetControlID , the ID of a control that will make the popup show. This contol is mandatory and is usually a button, therefore we will put a button on _pnlClientMessage_ panel and make it invisible:

<asp:Button id=”btnShowPopup” runat=”server” style=”display:none” />

As you may have noticed, we have not used Visible=”false”  to make btnShowPopup button and _pnlClientMessages_ panel invisible. The reason is that if  a control’s Visible property is set to false, it will not be rendered at all!

2-PopupControlID is the ID of a panel that will be showed when modal popup extender’s .Show() method is called.

3-CancelControlID is  the Id of a Button control that is placed on the panel and closes the modal popup if it is clicked!

The complete code is like bellow:

<asp:Panel runat=”server” ID = “_pnlClientMessage_” style=”display:none;” >

<asp:UpdatePanel ID=”_updClientMessage_” runat=”server” UpdateMode=”Conditional” >

<ContentTemplate>

<asp:Button id=”btnShowPopup” runat=”server” style=”display:none” />

<ajaxtoolkit:modalpopupextender ID=”mdlPopup” runat=”server”

TargetControlID=”btnShowPopup” PopupControlID=”_pnlClientMessage_”

CancelControlID=”btnClose” />

<asp:Label runat=”server” ID = “_lblClientMessage_” />

<asp:Button ID=”btnCLose” runat=”server” Text=” OK “ CausesValidation=”false” />

</ContentTemplate>

</asp:UpdatePanel>

</asp:Panel>

Please notice that I have used ModalPopupExtender control in the simplest way. You may configure and decorate it in many different styles, like making it movable. You may also have noticed that there is an UpdatePanel in the above code. This update panel is needed becuase we should call it’s Update method to update the panel’s content. Otherwise nothing will be shown.

Now we will write a class named ClientServices or ClientHelper, with a static method named ClientMessage. This method has two arguments:

1- A parameter of type Page. This parameter actually represents tha page from which the method is called.

2-A string parameter that represents the message to show.

This method first checks to see if the calling page has a master page. If it doesnt have a master page, the message will be sown with javascript’s alert function:

public static void ClientMessage(Page p, string message)

{

if (p.Master == null)

{

p.ClientScript.RegisterClientScriptBlock(p.GetType(),  System.Guid.NewGuid().ToString(),

string.Format(“<script>alert(‘{0}’);</script>”, message));

}

If the page has a master page, we will find the panel and the label control that we have provided for messaging and will set the label’s Text property :

else

{

Label _lblClientMessage_ = p.Master.FindControl(“_lblClientMessage_”) as Label;

_lblClientMessage_.Text = message;

We also have to find the update panel that I mentioned above and call it’s update method:

UpdatePanel upd = p.Master.FindControl(“_updClientMessage_”) as UpdatePanel;

upd.Update();

This will update the label’s text. Finally, we should fine the ModalPopupExtender and call it’s Show() method:

ModalPopupExtender extender = p.Master.FindControl(“mdlPopup”) as ModalPopupExtender;

extender.Show();

That’s it. Now anytime you want to show a modal message box, you can write a code like this:

try

{

// some code here

}

catch (Exception ex)

{

ClientServices.ClientMessage(Page, ex.message);

}

That’s it. This approach is extermly flexible so you can use it to gather some data from the end user, display a table and so on.

The image bellow is an example of such a client message:

By for now…

Advertisements

6 thoughts on “Displaying client messages with Ajax Control Toolkit

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s