Visual Studio - Share Files in Web Application

Kornfeld Eliyahu Peter

Rate me:

4.29/5 (3 votes)

8 Feb 2016CPOL3 min read

10.4K

Play hide-and-seek with your shared files...

Introduction

Sharing a common file across different Visual Studio projects is extremely easy... All you need is to put the file-to-be-shared in a commonly accessible folder, than in the project select Add/Existing Item… and in the file explorer window select Add As Link…

From this point on, Visual Studio will handle it for you with no problem at all. Open. Edit. Compile. Publish. Source Control. All works perfectly…

So where is the problem?

If those files you are sharing are for UI (CSS) or client side code (JavaScript) the simple include in the HTML part will not find them, while you are debugging the project…

The Setup

Let us see ProjectA as a sample with shared CSS file...

[frame.css has a blue-arrow indicator on its icon to tell that this is a shared file]

Now the HTML source that uses the CSS may look like this...

HTML

<!DOCTYPE html>
<html>
<head>
    <title>Project A</title>
    <meta charset="utf-8" />
   <link href="App_Themes/Common/frame.css" rel="stylesheet" />
</head>
<body>
   <div class="frame">
       <h2 class="title">Hello A</h2>
   </div>
</body>
</html>

When debugging in the browser, it will not find that frame.css as it only logically exists at the declared location but that’s not enough...

The problem is of course that Visual Studio has no way to tell the browser where the file actually is... but you can help it and I will show how…

The Solution - Extending The MSBuild Process

This can be done by a simple editing of the project file, that uses shared files…

Even it may be a bit inconvenient to edit a project file (but after all it is only an XML), you will touch at a single place and only once… This solution also works for all the browsers (it makes a physical copy of the shared file), and it also takes care for updates, so no further manual interference needed...

Step 1 - Open the Project File for Editing

For this, you may have a few options:

Use Power Commands on context menu (part of Productivity Power Tools extension)
Unload the project and then pick Edit Project from context menu
Open the folder and use your favorite XML editor to edit the file (not to worry, Visual Studio will notice the external change and will ask you to reload the project after editing)

Step 2 - Edit the Project File

Scroll to the bottom of it until you see a comment like this:

XML

<!-- To modify your build process, add your task inside one of the targets below and uncomment it.
     Other similar extension points exist, see Microsoft.Common.targets.
  <Target Name="BeforeBuild">
  </Target>
  <Target Name="AfterBuild">
  </Target>
-->

Under this comment, but before the closing </Project> tag, add this new target declaration:

XML

<Target Name="CopyLinkedContentFiles" BeforeTargets="Build">
  <Copy SourceFiles="%(Content.Identity)" DestinationFiles="%(Content.Link)" SkipUnchangedFiles="true" 
   OverwriteReadOnlyFiles="true" Condition="'%(Content.Link)' != ''" />
</Target>

That new target will copy all new/modified files, that are linked to the project to the parallel physical location…

Even it’s very self explanatory, so I add just two notes here:

BeforeTargets="Build". “Build” is a pre-defined target and this part will ensure that before every build, there will be a copy to update files.
Condition="'%(Content.Link)' != ''". This part is there to ensure that only files with Link property will be copied (trying to copy files that are not there will throw an error and stop the build process).

To learn more about MSBuild targets, visit this location: How to: Extend the Visual Studio Build Process[^].

Last Notes

If, when finishing the tip. you asked yourself why I didn't mentioned map files, here are some answers... Map files are...

nowhere near to be standard yet
addressing only JavaScript files, but no CSS or images or other
must be there physicaly, so you have to handle them manually
can be created only by additional tool

License

This article, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)

Written By

Kornfeld Eliyahu Peter

Software Developer (Senior)

Israel

Born in Hungary, got my first computer at age 12 (C64 with tape and joystick). Also got a book with it about 6502 assembly, that on its back has a motto, said 'Try yourself!'. I believe this is my beginning...

Started to learn - formally - in connection to mathematics an physics, by writing basic and assembly programs demoing theorems and experiments.

After moving to Israel learned two years in college and got a software engineering degree, I still have somewhere...

Since 1997 I do development for living. I used 286 assembly, COBOL, C/C++, Magic, Pascal, Visual Basic, C#, JavaScript, HTML, CSS, PHP, ASP, ASP.NET, C# and some more buzzes.

Since 2005 I have to find spare time after kids go bed, which means can't sleep to much, but much happier this way...

Free tools I've created for you...