Xerratus - Community Server: Create custom image button control that inherits CSLinkButton

Wednesday, August 15, 2007

Community Server: Create custom image button control that inherits CSLinkButton

Working on a project today that has some aspects that integrate with Community Server, I ran into a slight problem. I needed to replace the submit resource link button for adding comments with an image button. At first it sounded easy. Just replace the <CSControl:ResourceLinkButton /> with an <asp:ImageButton />. Not so fast, the compiler said. The <CSBlog:WeblogPostCommentForm /> was looking for a link button that inherits from CSLinkButton. Of course, the built in image button does not do that. So my solution, create my own custom composite control that inherits CSLinkButton but generates a link button.

Here's how I did it:

First, create a new control in the CommunityServerControls20 project (anywhere is fine but I put it in a new folder called "Custom") and call it CustomImageLinkButton.cs.

Add the following code:

using System;

using System.ComponentModel;

using CommunityServer.Components;

namespace CommunityServer.Controls

{

    public class CustomImageLinkButton : CSLinkButton

    {

        [Bindable(true)]

        public virtual string ImageUrl

        {

            get

            {

                object state = ViewState["ImageUrl"];

                if(state != null)

                {

                    return (string)state;

                }

                return "";

            }

            set { ViewState["ImageUrl"] = value; }

        }

        protected override void OnPreRender(EventArgs e)

        {

            base.OnPreRender(e);

            if(!Globals.IsNullorEmpty(ImageUrl))

            {

                System.Web.UI.WebControls.Image image = new Image();

                image.ImageUrl = ImageUrl;

                this.Controls.Add(image);

            }

        }

    }

}

When you create the control in the UI and pass in an ImageUrl, the control creates an image object and adds it to the links control array. That's it.

Here is the UI code in action:

<CSBlog:WeblogPostCommentForm ID="WeblogPostCommentForm1" runat="server">

    ... snip ...

    <FormTemplate>

         <div class="CommonFormArea">

             ... snip ...

             <div class="CommonFormField">

                <br />

                <CSControl:CustomImageLinkButton runat="server" ID="btnSubmit" ImageUrl="http://localhost/project1/images/submit.jpg" ValidationGroup="CreateCommentForm" />

             </div>

        </div>

    </FormTemplate>

</CSBlog:WeblogPostCommentForm>

Enjoy!

Wednesday, August 15, 2007 @ 09:50 AM (-07:00) Pacific Daylight Time

Comments (0)

tags: Community Server | Programming

admin: Edit | Remove

Name
E-mail
Home page

	Remember Me
Comment (Some html is allowed: `a@href@title, b, blockquote@cite, em, i, strike, strong, sub, super, u`) where the @ means "attribute." For example, you can use <a href="" title=""> or <blockquote cite="Scott">.
Enter the code shown (prevents robots):
Live Comment Preview