Paths in ASP.NET

I ran into something interesting I though I’d share.

Problem: Paths used for developing ASP.NET applications can be a pain. Relative vs. Absolute. Server Side vs Client Side. Sometimes using paths such as “../../images/xyz.jpg” is not an option if controls can be used from different locations. Another problem is with using “/ESConsole/images/xyz.jpg” paths.

Solution: In essence you have to use ResolveClientUrl() in order to get it to work.

<img border="0" src="<%= ResolveClientUrl("~/images/es-logo.jpg") %>" alt="ICC ES Logo" />

The System.Web.UI.Control defines the method as

//
 // Summary:
 //     Gets a URL that can be used by the browser.
 //
 // Parameters:
 //   relativeUrl:
 //     A URL relative to the current page.
 //
 // Returns:
 //     A fully qualified URL to the specified resource suitable for use on the browser.
 //
 // Exceptions:
 //   System.ArgumentNullException:
 //     relativeUrl is null.
 public string ResolveClientUrl(string relativeUrl);

Note: If you are going to use this in a header, and specifically for scripts, you must place them in a ASP.NET PlaceHolder control as such.

<head runat="server">

    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
    <title>Your Project Title</title>

    <!-- You do not need to use ResolveClientUrl with Link elements --!>
    <link href="css/master.css" rel="stylesheet" type="text/css" />
    <link href="Stylesheets/jquery-ui-1.7.2.custom.css" rel="stylesheet" type="text/css" />

    <asp:PlaceHolder runat="server" id="mainScripts">
        <script type="text/javascript" src="<%= ResolveClientUrl ("~/js/jQuery-1.3.2.min.js") %>"></script>
        <script type="text/javascript" src="<%= ResolveClientUrl ("~/js/jquery.tools.min.js") %>"></script>
        <script type="text/javascript" src="<%= ResolveClientUrl ("~/js/jQuery-jTemplates.min.js") %>"></script>
    </asp:PlaceHolder>

</head>

You can also use it with JavaScript

<script type="text/javascript" language="javascript">

        function FilterTitle() {
            $(".findbox_grid").eq(0).tableFilter({
                imagePath: '<%= ResolveClientUrl ("~/js/filter/") %>',
                showDebug: false
        });
        }

</script>

In conclusion, if you are going to be deploying your application from DEV to QA to PRODUCTION, you don’t want to be worrying about whether your references such as scripts or css or images are going to work or not. (If you use css, note that all image reference in CSS are relative to the location of the CSS file itself.)

Advertisements
Tagged , , , ,

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

%d bloggers like this: