A significant part in developing the Blocks4.net community is played by the interaction with the users of the site, starting with the registered publishers and on to every user that is accessing the site and is willing to offer us his/hers feedback.  The idea of receiving feedback is a common measure for a site administrator interested in constantly improving the quality of his site. Therefore, the users are able to provide us their comments in a section of the Contact Us area. And because we are very interested in using the new technologies that emerge in the asp .net field, we recently decided to use another control from the AJAX Control Toolkit, this time for implementing a secondary feedback method, this one accessible right from the main menu that appears on our site, under the Feedback link.

Let’s spend some time and see what the steps of achieving that result are.

First of all let’s assume that you have already downloaded and installed the ASP .NET Extensions v1.0 and the ASP .NET AJAX Control Toolkit available at http://ajax.asp.net/downloads/default.aspx?tabid=47 and you can use these controls in your development environment (Visual Studio). The AJAX control chosen for this task is named ModalPopupExtender and it allows us to display content for the user in a “modal” manner. This modal content can be a hierarchy of controls and is displayed above a background that can have a custom style applied to it. While accessing the popup content, the user is prevented from interacting with the rest of the site. By clicking an OK/Cancel control the modal mode is dismissed and some custom script can be optionally executed.

In order to have access to the functionality provided by the ASP .NET AJAX it is mandatory to add the <asp:ScriptManager> control on any page that plans to use AJAX controls.

Next, let’s take care of the content that we want to appear in the modal popup. I used an <asp:Panel> control in which I set up the table containing the needed text, the textbox for taking the user feedback and the buttons for sending the feedback, respectively exiting the popup without sending. The panel control reads a css class for rendering in the desired mode. The functionality of these controls is assured by a couple of functions in code behind, the function associated with the OnServerClick event of the Send button and a function for sending the email to our support address. Don’t forget to validate the fields that are filled by users.

The ModalPopupExtender control has two mandatory properties that have to be filled and the rest of the properties are optional. So you have to specify the TargetControlID – the ID of the element that activates the modal popup; and the PopupControlID – the ID of the element to display as a modal popup (in this case that would be the Panel’s ID). Other properties: BackgroundCssClass accepts a css class for customizing the background when the popup is displayed, DropShadow can take either true or false value, OkControlID – this is the control that dismisses the modal popup, CancelControlID – the control that cancels the modal popup, OnOkScript and OnCancelScript – each take script to be run in that particular situation, PopupDragHandleControl – to specify an embedded element that contains the popup header which will be used as a drag handle. There is an important issue that I want to emphasize here. The Send button that I used needs to activate the validation controls and if everything is ok to use the server side method and send the email. Well, it won’t work if I associate its ID with the OkControlID, because then the button would act like a client side control, and I need it to fire a server side event. The solution was to remove that property from the popup control tag.

Finally, if the feedback was successfully sent, the user will see a confirmation panel with an OK button. For doing that, I used the same Panel control that I chose to modify it programmatically (that can be done fairly easy from code behind).

In conclusion, ModalPopupExtender is a versatile control; it can be a little tricky for a first use, but it surely can provide great functionality on a website. Have a look at the final result and feel free to share your opinion and experience with this particular AJAX control.