(How)
C^# You Are - 24 June 2007

This week's questions revolve around getting common tasks done in ASP.NET.

1. How do you make an image such that when it is clicked the user is redirected to another page?  Answer

   The ASP.NET HyperLink control allows you to specify an image through the ImageUrl property.  When set the image is displayed in lieu of any text.  This gives you a clickable image. 

   If you want to redirect back to the same page then use ImageButton instead.  This particular control acts like a normal button but displays an image instead of text.  When clicked it posts back to the owning page (or optionally to another page). 

2. How do you make a clickable image button that also displays text?  Answer

   Surprisingly this is not supported by ASP.NET.  Instead you will either have to write the code manually or create a custom control.  To build an image button it is necessary to nest an image inside a link control.  To add text to the link all you need to do is add the text before or after the image.  Here is how the image button with text could be built.

   <asp:HyperLink id="lnk1" runat="server" NavigateUrl="users/adduser" target="_blank"><asp:Image id="imgadd" source="images/add.png" runat="server"></asp:Image>Add new user</asp:HyperLink>

   It would be nice if the HyperLink control supported both an image and text but it doesn't.  It will show either but not both.  Creating a custom control is pretty straightforward.  The easiest approach is to extend the existing HyperLink control and add a couple of properties to control rendering.  Ultimately overloading the rendering code to include the text is all that is necessary.  Here is code for a sample implementation.

   public enum ImageLinkDisplayMode
   {
      ImageAndText = 0, 
      Image = 1, 
      Text = 2,
   } 
   
   public class ImageLink : HyperLink
   {
      public ImageLinkDisplayMode DisplayMode
      {
         get
         {
            object obj = ViewState["DisplayMode"]; 
            return (obj != null) ? (ImageLinkDisplayMode)obj : ImageLinkDisplayMode.ImageAndText;
         }
         set
         {
            ViewState["DisplayMode"] = value;
         }
      }
   
      public TextAlign TextAlign
      {
         get
         {
            object obj = ViewState["TextAlign"]; 
            return (obj != null) ? (TextAlign)obj : TextAlign.Right;
         }
         set
         {
            ViewState["TextAlign"] = value;
         }
      }
   
      protected override void RenderContents ( HtmlTextWriter writer )
      {
         //Override the default hyperlink behavior by generating an image only if the mode is set
         bool bDisplayImage = false, bDisplayText = false; 
         switch (DisplayMode)
         {
            case ImageLinkDisplayMode.Image: bDisplayImage = true; break;
            case ImageLinkDisplayMode.ImageAndText: bDisplayImage = bDisplayText = true; break;
            case ImageLinkDisplayMode.Text: bDisplayText = true; break;
         };
         TextAlign align = TextAlign;
   
         //If displaying the text and text align is left
         if (bDisplayText && (align == TextAlign.Left))
         {
            //Write out the text
            writer.Write(this.Text);
         };
   
         //If displaying the image then write it out now
         if (bDisplayImage && (ImageUrl.Length > 0))
         {
            //Render the image
            Image img = new Image();
            img.ImageUrl = this.ImageUrl;
            string text = (ToolTip.Length > 0) ? ToolTip : Text; 
            img.ToolTip = img.AlternateText = text; 
            img.Visible = this.Visible;
            img.EnableViewState = false;
            img.RenderControl(writer);
         };
   
         //If displaying the text and align is right
         if (bDisplayText && (align == TextAlign.Right))
         {
            writer.Write(this.Text);
         };
      }
   }

   A slightly different version of this code is available in an upcoming release of Kraken.

3. How do you generate a confirmation message when a user clicks a button or link (such as a delete button)?  Answer

   The confirmation should occur on the client side.  This requires that you react to the client side onclick event handler.  Within this function you can use the Javascript confirm function to display a confirmation message to the user.  It displays a simple message with OK and Cancel buttons.  It returns true if the user clicks OK or false if the user clicks Cancel.  Returning false from the handler will cancel the click event.  To attach this to an ASP.NET control you have to add a new attribute to the control with the Javascript code as the value.  The Attributes collection exposed by server controls allows you to add arbitrary HTML attributes to a control.  They will be rendered at runtime.  To add a confirmation message to a button you would use the following code.

   Attributes.Add("onclick", "return confirm('Are you sure?');");

   A few notes about the above code.  First notice the mixing of single and double quotes.  This is necessary because you can not nest quotes within quotes.  Single quotes identify strings in HTML as well.  Secondly notice a call to return.  Since this is being done, and since it is a button, we do not need to deal with the event object at all.  Finally notice that the attribute value is actually Javascript code.  We can technically call any Javascript function we want here but it is best to keep it simple. 

   Using the above code as a baseline we can build a simple server control to encapsulate this.

   public class ConfirmButton : Button
   {
      public string ConfirmMessage
      {
         get
         {
            object obj = ViewState["ConfirmMessage"];
            return (obj != null) ? (string)obj : "Are you sure?";
         }
         set
         {
            value = (value != null) ? value.Trim() : "";
            if (value.Length > 0)
               ViewState["ConfirmMessage"] = value;
            else
               ViewState.Remove("ConfirmMessage");
         }
      }
   
      protected override void OnPreRender ( EventArgs e )
      {
         base.OnPreRender(e); 
   
         if ((ConfirmMessage.Length > 0) && (Page != null))
            Attributes.Add("onclick", "return confirm('" + Page.Server.HtmlEncode(ConfirmMessage) + "');");
      }
   } 

   A slightly different version of this code is available in an upcoming release of Kraken.  Notice the call to Page.Server.HtmlEncode.  This ensures that someone can not create a malformed HTML string in the page.

4. What about confirmation messages for other events like moving an object?  Answer

   The same technique will work in all cases but the event to be handled will vary.  One important thing to note is that not all events will cancel themselves if you call return in the Javascript code with a value of false.  Instead you should use the builtin window.event object that is defined whenever an event occurs.

   Among other things this object tells you who raised the event through the srcElement property.  One important property for events that you want to "cancel" is the returnValue property.  When this property is set to false and the event supports cancellation then it will cancel the event.  You should also set the cancelBubble property to true to prevent the event from being bubbled up the chain.

   Here is a little code that prevents the checkbox from being unchecked.  It detects when the box is checked and prevents it from being unchecked (at least by the mouse).

   <script language="javascript" type="text/javascript">
   function CancelCheck ( )
   {
      var ctrl = window.event.srcElement;
      if ((ctrl != null) && ctrl.checked)
      {
         alert("I don't think so");
         window.event.returnValue = false;
         window.event.cancelBubble = true;
      };
   }
   </script>
   
   <form id="form1" runat="server">
      <div>
         <input type="CheckBox" onmousedown="CancelCheck();"/>Click Me!
      </div>
   </form>

5. How do you bind a page's property to a parameter used in one of the commands of a data source (such as the select command)?  Answer

   For whatever reason a page's properties are not a valid option in the Define Parameters dialog in a data source when configuring it.  The options do include form values, control values, query string settings and a few others.  To bind a parameter of a data source to a page's property you will need to do it programmatically.  The easiest place to do this is in OnLoad.  Each parameter required by a command (select, delete, etc.) is exposed as a collection of the data source.  Locate the parameter within the collection and then set its value. 

   This example assumes that a SqlDataSource is being used to retrieve all books by a given name mask.  The code uses a property to assign the name mask to the parameter prior to the data source retrieving the data.  If the data source wizard exposed page properties directly this would have been a lot easier.  Maybe MS will add that functionality in a post-Orcas release.

   protected void Page_Load(object sender, EventArgs e)
   {
      SqlDataSource1.SelectParameters["name"].DefaultValue = NameMask;
   }
   
   private string NameMask
   {
      get { return "C++"; }
   }

   Alternatively you can handle the Selecting event from the data source and set the parameter at that point.  The event is raised when the data source begins the selection process.

6. How can you get a GridView to display the column headers even when the grid is empty?  Answer

   The standard implementation of a GridView will not display the column headers if the data source is empty. Instead it will display either the value stored in EmptyDataText or use the template defined by EmptyDataTemplate.  You have to write the code yourself to get it to display the column header in all cases.

   This is not as simple as it would first appear.  By default the columns are auto-generated based upon the schema returned by the data source.  If there is no data then GridView can not determine the headers.  In this case it is reasonable to not display the headers but the other case is when the columns are defined in advance.  If the columns are pre-defined then the GridView could display them even when no data is available.  Alas it does not.  There are a variety of examples online on how to force the GridView to display the column headers anyway.  Do a search to find them.

7. I set EmptyDataText to some nice string but the GridView is not displayed when there is no data.  Why not?  Answer

   GridView will only consider the data empty when it has a source.  If you forget to assign items to it or you do not set DataSource then GridView assumes there is nothing to display and does not render itself.  This is true even if EmptyDataText is set.  Always make sure that GridView is pointing to either some data or a data source even if it is empty to ensure that something is displayed.

8. As the first column in a GridView you want to place an image (of a pencil) where the user can click to edit the current row rather than using inline editing.  The editing will occur on another page.  How do you do it?  Answer

   This is a common, but unfortunately confusing, task.  The problem is that there are no pre-defined columns that meet this requirement.  The closest column that would work is the HyperLinkField.  This column allows you to link to another page.  You would set the DataNavigateUrlField to the field(s) that identify the current row.  You would then set the DataNavigateUrlFormatString to the URL to redirect to, including the format specifies for the fields.  So you might, for example, use these settings to redirect to the BookEdit.aspx page when a row is clicked.

   <asp:HyperLinkField DataNavigateUrlFields="Id" DataNavigateUrlFormatString="~/EditBook.aspx?Id={0}" />

   But the column does not support an image.  The ImageField column allows displaying of images but it is static and requires the image to be defined for each item (although they can all use the same image).  A hybrid approach is going to be needed here. 

   By converting the HyperLinkField to a TemplateField you can combine an image with the link as was discussed earlier.   Convert the template field to look like this.  In this particular example we use standard HTML controls rather than server controls because in this case there isn't much of a benefit.

   <asp:TemplateField>
      <ItemTemplate>
         <a href='<%# Eval("Id", "~/EditBook.aspx?Id={0}") %>'><img src="edit.png" /></a>
      </ItemTemplate>
   </asp:TemplateField>

9. The following link does not work correctly.  What is wrong?  It compiles and runs but does not work correctly.  Answer
   <asp:TemplateField>
      <ItemTemplate>
         <a href='~/AddBookByAuthor.aspx?Id= + '<%# Eval("id") %>'><img src="add.png"/></a> 
      </ItemTemplate>
   </asp:TemplateField> 

   Attempting to concatenate the string with the processor tokens (<%#) will not work as expected.  In fact the URL will only be partially built.  Always nest the formatting string inside the call to Eval rather than attempting to combine Eval with another value.

10. What is wrong with the following code?  Answer
    protected override OnLoad ( object sender, EventArgs e )
    {
       try
       {
          string value = Request.QueryString["id"];
          int id = 0;
          if (value != null)
             Int32.TryParse(value, out id);
    
          if (id <= 0)
             Response.Redirect("ErrorPage.aspx");
    
          //Initialize
          Title = "Edit Book";
       } catch (Exception ex)
       {
          LogError(ex);
       };
    }

    There is technically nothing wrong with the code.  However the log will show quite a few exceptions if bad data is sent to the page.  The problem is that Response.Redirect will always throw an exception.  This is how it forces the page request to terminate.  If you trap the exception as in the above case you will see a log entry where the exception occurred.  If you want to log all exceptions that occur on the page you should modify the above code to ignore ThreadAbortException which is raised when you call Redirect.