ASP.NET VERSIONS: ALL
Finish with a Flourish
Brad s Top Three ASP.NET Tips and Tricks
By Brad McCabe
It is with sadness and excitement that I write this, my final column. Sadness because over the past two years I have had the pleasure of talking and working with so many asp.netNOW and asp.netPRO readers, and I will miss the interaction. Excitement because I start a new chapter in my life soon, working for Microsoft as the Visual Basic Content Strategist for MSDN. I will be responsible for the content and material at http://msdn.microsoft.com/vbasic. For those of you who work with Visual Basic check it out, and in the near future when my blog and e-mail are online feel free to contact me and let me know your thoughts.
I will be turning this column over to Andrew Flick and Devin Rader. Both are Technology Evangelists at Infragistics and are two of the best developers I know. I debated how to close things out and decided a review of the top three tips and tricks from the past two years that generated lots of talk and e-mails would be a good way to bring my stewardship of this column to a close.
Relative Paths with the ~
One of the most popular tips was a simple one from 2003 about using the ~ character in your file paths and the ResolveURL function.
One of the most difficult challenges of writing user controls or Web-based applications is that the path to objects, such as image files and hyperlinks, can vary based on the relative location of the requested page to the object. With ASP.NET, you can cut down on the complexity of these paths by using the ~ character.
The ~ character will cause ASP.NET to generate the relative path to the object at run time, even though you have entered an absolute path at design time. Let s look at what happens with the following image control:
The first thing you ll notice is that because the mapping of the path happens at run time, Visual Studio will not display the image on the design-time surface, and you ll see a red X as if the path is not valid. This is OK; the image will render correctly in the browser.
If you place this control either directly on a page or in a user control on a page at the root of your ASP.NET application, the resulting HTML will be:
Now create a new folder off the root of your project and move that page to this location. If you run the project again and view the resulting HTML of the page in your browser, you ll notice that the source attribute (src) has been adjusted automatically:
If you drag and drop the page into the Images directory and run the project again, you ll find the HTML for the image to be:
The use of the ~ character is not limited to just the Image control. You can use ~ on most of the standard server-side control properties that require a path, such as hyperlinks and image buttons.
In addition, you can use the ResolveURL function from the Page object to resolve a relative path in your code. The function will return a string containing the relative path based on the absolute path passed in. This is useful for various scenarios, such as creating navigation menus on the fly from your code.
You can take a variety of approaches if you are looking to hook client events to server controls. The easiest is when the control does not have a server event with the same name; you simply need to put the client event on the tag, such as:
For objects, like a button, you can hook them to client events by adding attributes from your server-side code. The following is some basic code you might add in your page load event:
Finishing out the top three is a tip about making an ASP.NET control scrollable.
One of the most common questions I get asked is how to make an ASP.NET control have scrollbars when there are no scroll-related properties on the control. This most commonly is requested in a scenario where you have a large amount of data on the data grid and you don t want to use pagination.
The answer to this question is two simple lines of HTML around the ASP.NET control. If you wrap your control in a Div tag you can use the overflow style attribute to have the browser render scrollbars when the HTML inside of the Div tag exceeds the specified size.
The following code will render the DataGrid inside of an area that is 400 pixels wide and 500 pixels high:
When the resulting HTML from the DataGrid control exceeds this space, the browser will render either horizontal or vertical scrollbars as needed (as shown in the figure below).
So there you have it, the top three ASP.NET Tips and Tricks over the past two years based on reader feedback. With that, I remind you to e-mail your questions to Andrew and Devin at [email protected]; you re in good hands.
Brad McCabe is a consultant with Ajilon Consulting, a leading solutions provider. Brad also has been a systems architect and consultant for several Fortune 500 companies and has been a featured speaker at numerous Microsoft events around the world. His primary interests include ASP.NET, Tablet PC, .NET Compact Framework, and Microsoft s networking technologies.