Finish with a Flourish

UI Tips

LANGUAGES: ALL

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, myfinal column. Sadness because over the past two years I have had the pleasureof talking and working with so many asp.netNOWand asp.netPRO readers, and I willmiss 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 willbe responsible for the content and material at http://msdn.microsoft.com/vbasic. Forthose of you who work with Visual Basic check it out, and in the near futurewhen my blog and e-mail are online feel free to contact me and let me know yourthoughts.

I will be turning this column over to Andrew Flick andDevin Rader. Both are Technology Evangelists at Infragistics and are two of thebest developers I know. I debated how to close things out and decided a reviewof the top three tips and tricks from the past two years that generated lots oftalk and e-mails would be a good way to bring my stewardship of this column toa close.

Relative Paths with the ~

One of the most popular tips was a simple one from 2003about using the ~ character in your file paths and the ResolveURL function.

One of the most difficult challenges of writing usercontrols or Web-based applications is that the path to objects, such as imagefiles and hyperlinks, can vary based on the relative location of the requestedpage to the object. With ASP.NET, you can cut down on the complexity of thesepaths by using the ~ character.

The ~ character will cause ASP.NET to generate therelative path to the object at run time, even though you have entered an absolutepath at design time. Let s look at what happens with the following imagecontrol:

The first thing you ll notice is that because the mappingof the path happens at run time, Visual Studio will not display the image onthe design-time surface, and you ll see a red X as if the path is not valid. Thisis OK; the image will render correctly in the browser.

If you place this control either directly on a page or ina user control on a page at the root of your ASP.NET application, the resultingHTML will be:

Now create a new folder off the root of your project andmove that page to this location. If you run the project again and view theresulting HTML of the page in your browser, you ll notice that the sourceattribute (src) has been adjusted automatically:

If you drag and drop the page into the Images directoryand run the project again, you ll find the HTML for the image to be:

The use of the ~ character is not limited to just theImage control. You can use ~ on most of the standard server-side control propertiesthat require a path, such as hyperlinks and image buttons.

In addition, you can use the ResolveURL function from thePage object to resolve a relative path in your code. The function will return astring containing the relative path based on the absolute path passed in. Thisis useful for various scenarios, such as creating navigation menus on the flyfrom your code.

Wiring Client-side JavaScript to ASP.NET Controls

Another tip that received lots of e-mails, also from 2003,dealt with wiring up client-side JavaScript events to ASP.NET controls.Although it s a rather short tip, it generated an incredible amount of e-mail.

You can take a variety of approaches if you are looking tohook client events to server controls. The easiest is when the control does nothave a server event with the same name; you simply need to put the client eventon the tag, such as:

"

For objects, like a button, you can hook them to clientevents by adding attributes from your server-side code. The following is somebasic code you might add in your page load event:

Button1.Attributes.Add("onclick","alert('Clicked');")

If you need to hook up to the form submission, or in theevent of validation cases, you can use the RegistorOnSubmitStatement in youserver-side code. The following page load code snippet will cause any controlon the page to display a JavaScript alert box before a submission or postback:

RegisterOnSubmitStatement("uniqueKey","alert('Submit!');")

Any one of these strategies can be used to call moreadvanced JavaScript; however, using the approach that fits your needs can allowyou to perform more logic on the client side and reduce the overhead ofpostbacks in ASP.NET.

Scrollable DataGrids

Finishing out the top three is a tip about making an ASP.NETcontrol scrollable.

One of the most common questions I get asked is how to makean ASP.NET control have scrollbars when there are no scroll-related propertieson the control. This most commonly is requested in a scenario where you have alarge 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 HTMLaround the ASP.NET control. If you wrap your control in a Div tag you can usethe overflow style attribute to have the browser render scrollbars when theHTML inside of the Div tag exceeds the specified size.

The following code will render the DataGrid inside of anarea that is 400 pixels wide and 500 pixels high:

When the resulting HTML from the DataGrid control exceedsthis space, the browser will render either horizontal or vertical scrollbars asneeded (as shown in the figure below).

Sometimes the simplest answer to a complex ASP.NET problemlies in the simple behaviors of an HTML element. ASP.NET does not allow you tosimply throw out your JavaScript knowledge and understand basic HTML (nor doesASP.NET allow to you forget or never learn HTML). In fact, a knowledge of basicHTML and JavaScript is often the difference between an average ASP.NETdeveloper and an expert.

Conclusion

So there you have it, the top three ASP.NET Tips andTricks over the past two years based on reader feedback. With that, I remindyou to e-mail your questions to Andrew and Devin at [email protected]; you re ingood hands.

Brad McCabe is aconsultant with Ajilon Consulting, a leading solutions provider. Brad also hasbeen a systems architect and consultant for several Fortune 500 companies andhas been a featured speaker at numerous Microsoft events around the world. Hisprimary interests include ASP.NET, Tablet PC, .NET Compact Framework, andMicrosoft s networking technologies.