Geeks With Blogs
Create Fun Things - Samer's Developer Blog Development Blog for C#, .NET and Obj-C

My general rule of thumb (which I actually read on some other site or blog, or maybe in a book or on the msdn?) is that if you plan on using a control once or twice, use a web user control. If, however, you want to use it all over your program, you should invest the time to make it a server control. They are much easier to use in the program (in the long-term), since they allow you to drag and drop them from the toolbox and you can pass them between programs easier as a DLL instead of a .ascx file.

Server controls were one of those things that took me a while to figure out, so I thought I’d start with a relatively easy one to put together. I’m using the AJAX Control Toolkit (available for download from www.asp.net) to put together a drag & drop control that is a modal confirm dialog.

To start off with, here is an example of the results. (Note: the CSS is totally up to you. Mine is just thrown together, so that’s why it doesn’t look very fancy :) )

 

image

And here’s what the design time code looks like in the page:

<asp:LinkButton ID="DeleteButton" runat="server" EnableViewState="false" CommandName="Delete"
             Text="Delete Note" />
<myCustomControl:ModalConfirmDialog runat="server" ID="ConfirmDelete1" ConfirmButtonText="Yes, delete note"
          CancelButtonText="No, cancel" ConfirmText="Are you sure you want to delete this note? Note: this cannot be undone."
          TargetControlID="DeleteButton" />

 

So what all is going on here? Let’s start at the beginning.

Step 1: Create a new class. 

Feel free to name it whatever you like. I went with ModalConfirmDialog.cs. Set the class to be public, and name it. I went with “myModalConfirmDialog”. This is going to be a composite control, since it will simply piece together several controls into one wrapped up package that is easy to set properties.

At the top, I imported the required namespaces to do the work we’ll be doing in the class. I already have the AjaxControlToolkit in my project, so I can just import it by name.

So far you should have something like this:

using System;
using System.Collections.Generic;
using System.Linq;
using System.Text;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;
using AjaxControlToolkit;
using System.ComponentModel;

namespace myCompany.CustomControls
{
    public class myModalConfirmDialog : CompositeControl
    {


    }
}

 

Step 2: Create all the controls we’ll be using inside the CompositeControl.

I first like to start out with all the controls that will be inside the control. There are a lot for this control to work, but I have explanations above each one, so you should be able to follow along:

// The label that shows the confirmation text
protected Label _MessageLabel = new Label();
// The confirm button extender from the AJAX control toolkit. 
// By default, it uses an annoying Ok/Cancel javascript popup
protected ConfirmButtonExtender _ConfirmExtender;
// The modal extender that we'll be using to instead pop up a nice in-window confirm dialog
protected ModalPopupExtender _ModalExtender;
// The panel that will be popping up
protected Panel _ModalPanel;
// The two buttons to confirm/cancel the action
protected LinkButton _ConfirmButton = new LinkButton();
protected LinkButton _CancelButton = new LinkButton();

 

Step 3: Create the public properties to get/set

You can make the control as customizable as you want, but I like to keep things simple, since I want the control to look about the same everywhere I use it. The four properties I’ll expose as public are:

1. The TargetControlID – This is necessary for the ConfirmExtender to work. It’s the button that the control will react to, when clicked.

2. ConfirmText – This is the text inside the panel that asks the user if they want to continue. (e.g. “Do you want to continue?”)

3. ConfirmButtonText – The text for the Confirm Button inside the modal panel. (e.g. “Ok” or “Continue”)

4. CancelButtonText – The text for the Cancel Button inside the modal panel. (e.g. “Cancel” or “Do not Continue”)

 

In each of these, I call EnsureChildControls() to make sure that it has (as the name suggests) child controls.  Also, for some of them, I add the optional [Description(“”)] attribute, for added design time fun.

Here is the code for each of the 4. It should all be pretty self explanatory.

1.

[Description("This is the target control ID of the button that is to be confirmed")]
public string TargetControlID
{
    get
    {
        EnsureChildControls();
        return _ConfirmExtender.TargetControlID;
    }
    set
    {
        EnsureChildControls();
        _ConfirmExtender.TargetControlID = value;
        _ModalExtender.TargetControlID = value;
    }
}

2.

[Description("This is the confirm text that is displayed inside the modal popup.")]
public string ConfirmText
{
    get
    {
        EnsureChildControls();
        return _MessageLabel.Text;
    }
    set
    {
        EnsureChildControls();
        _MessageLabel.Text = value;
    }
}

3.

public string ConfirmButtonText
{
    get
    {
        EnsureChildControls();
        return _ConfirmButton.Text;
    }
    set
    {
        EnsureChildControls();
        _ConfirmButton.Text = value;
    }
}

4.

public string CancelButtonText
{
    get
    {
        EnsureChildControls();
        return _CancelButton.Text;
    }
    set
    {
        EnsureChildControls();
        _CancelButton.Text = value;
    }
}

 

Step 4: Write CreateChildControls() Method

If you start writing protected override void you’ll notice CreateChildControls() pop up, like below:

image

This method is what does all the work in the control. It initializes all the backing controls and sets the properties that are required for them to work. I won’t go into too much detail for their properties. They are self-explanatory and nothing new.

The important part to pay attention to (which is marked in the code below as comments) is where I add the control(s) to the composite control class. Here is the method:

 

protected override void CreateChildControls()
{
    base.CreateChildControls();
    // create all the controls
    _ModalPanel = new Panel
    {
        ID = "ConfirmPanel",
        CssClass = "modalPopup",
    };
    // This is required so you don't get a "flash" on the screen of the panel:
    _ModalPanel.Style.Add(HtmlTextWriterStyle.Display, "none");
    _ConfirmButton = new LinkButton
    {
        ID = "ConfirmButton",
        Text = ConfirmButtonText,
        CssClass = "ModalButton",
    };
    _CancelButton = new LinkButton
     {
         ID = "CancelButton",
         Text = CancelButtonText,
         CssClass = "ModalButton",
     };
    _MessageLabel = new Label
    {
        CssClass = "warning",
        ID = "MessageLabel",
        Text = ConfirmText,
    };
    // Add several controls to the Panel
    _ModalPanel.Controls.Add(_MessageLabel);
    _ModalPanel.Controls.Add(new Literal { Text = "<br /> <br />" });
    _ModalPanel.Controls.Add(_ConfirmButton);
    _ModalPanel.Controls.Add(_CancelButton);
    // ***** //
    // Add the Panel to the CompositeControl
    this.Controls.Add(_ModalPanel);

    _ConfirmExtender = new ConfirmButtonExtender
     {
         DisplayModalPopupID = "ModalExtender",
         ID = "ConfirmExtender1",
     };
    _ModalExtender = new ModalPopupExtender
    {
        BackgroundCssClass = "modalBackground",
        OkControlID = "ConfirmButton",
        CancelControlID = "CancelButton",
        PopupControlID = "ConfirmPanel",
        ID = "ModalExtender",
    };
    // Add the two AJAX controls to the Composite Control (outside the panel)
    this.Controls.Add(_ConfirmExtender);
    this.Controls.Add(_ModalExtender);
    // Indicate that the childControlsCreated are true, now that all the controls are created.
    this.ChildControlsCreated = true;
}

Again, a lot of the properties are default things, such as the CSS that comes w/ the Ajax control toolkit samples, and names, etc.

Update:

I realized I missed one important aspect for this to work, especially if you are using a class library to make the custom control. You’ll want to register your assembly inside your web.config, so that you can access it inside your aspx pages using the <tagprefix:name> method. After I added a reference to my class library that contains the control (named CustomControls), which has a namespace of Company.Controls, I added this line to my web.config in the <Pages> <controls> section:

<pages>
            <controls>
                <add tagPrefix="asp" namespace="System.Web.UI" assembly="System.Web.Extensions, Version=3.5.0.0, Culture=neutral, PublicKeyToken=31BF3856AD364E35"/>
                <add tagPrefix="asp" namespace="System.Web.UI.WebControls" assembly="System.Web.Extensions, Version=3.5.0.0, Culture=neutral, PublicKeyToken=31BF3856AD364E35"/>
                <add namespace="Company.Controls" assembly="CustomControls" tagPrefix="myCustomControl"/>
            </controls>
</pages>

Summary:

So that’s that. You can compile it and then drag/drop it into your project, and attach it to a control that you want to interrupt with a confirm dialog. And this also serves as an introduction to CompositeControls, which are basically the server control equivalents to web user controls (.ascx).

 

Cheers!

samer paul

Posted on Saturday, August 1, 2009 10:19 PM | Back to top


Comments on this post: Modal Confirm Dialog Server Control

# re: Modal Confirm Dialog Server Control
Requesting Gravatar...
Excelent. I like create one control with modal popup extender and this include confirm,warning and information message. You have some sample.
Left by Alejandro on Aug 14, 2009 10:14 AM

# re: Modal Confirm Dialog Server Control
Requesting Gravatar...
I had a couple of issues which are really probably just one.

_ConfirmExtender.TargetControlID = value;
_ModalExtender.TargetControlID = value;

from the public string TargetControlID and

this.Controls.Add(_ConfirmExtender);
this.Controls.Add(_ModalExtender);

from the CreateChildControls override will not compile on my system. In trying to assin TargetControlID there is no TargetControlID within the extenders. And the second is that the extenders are not recognized as controls and therefore cannot be added.

I'm using Visual Studio 2008, with .Net 3.5.

Any ideas why this might be happening?
Left by Tarang Deshpande on Oct 20, 2009 10:18 PM

# re: Modal Confirm Dialog Server Control
Requesting Gravatar...
Are you using the latest release of the ajax controltoolkit? I'm using the one from may 2009 (the most recent update was sept 2009, which I have yet to upgrade to, but I'm pretty sure not much has changed outside of a few control additions).

If you are already running the latest toolkit, it sounds like it might be an issue with the DLL being registered in your project--It might not be loading it properly or is referenced incorrectly, which is why it is saying they are not valid properties.
Left by samerpaul on Oct 23, 2009 8:47 AM

# re: Modal Confirm Dialog Server Control
Requesting Gravatar...
How do I attach it to a control that you want to interrupt with a confirm dialog.
Left by joey aeb on Dec 27, 2009 7:50 AM

# re: Modal Confirm Dialog Server Control
Requesting Gravatar...
i create it as above in details
i copy and paste it
but there is some thing wrong happen
when i drag the control to my page
and define all the texts and target controlID
and then i run new button appear near the button i create and it have no text
and i cant remove it
what should i do???
Left by moayad on Mar 03, 2011 8:43 AM

Your comment:
 (will show your gravatar)


Copyright © samerpaul | Powered by: GeeksWithBlogs.net