3

We have a DNN module that uses Angular as its client side framework. I'd like to be able to embed all the resources such as html , js ,css ,images and fonts to my module.(actually our module have more than one dll and every one of them has its own resources so that I don't want to copy all of these resource into main module folder every time I want to make a package)

So far I have tried WebResource.axd which was successful to some extent (Here's what I have done)but then I realized that It is somehow impossible to embed html,images and other stuffs rather than js and css (or it isn't?)

Then I decided to try using VirtualPathProvider and I used this open source project that implements an EmbeddedResourcesVirtualProvider.

I have registered this provider using IRouteMapper interface of DNN. Now that I start testing my project I am getting 404 for all of my resources. I tried to debug the project and put some break points over FileExists ,DirectoryExists and GetFile methods of VirtualProvider but the only virtual path that is being asked from VirtaulProvider is "~/Default.aspx" and nothing else

I would like to ask if it is possible to use VirtualParhProvider with DNN ?

We are using DNN 8.

VDWWD
  • 35,079
  • 22
  • 62
  • 79
Beatles1692
  • 5,214
  • 34
  • 65

2 Answers2

0

I think you are over complicating things a bit. If you need a virtual provider for your module to work you are doing it wrong (in my opinion). A module should be a self-contained package that could be deployed on any DNN installation without having to do anything but install the module.

Normally when you buy or download a free module, it comes in a single zip file with all the necessary files contained in that zip. That could be any type of file (.dll, .js, css, .ascx, .aspx etc) is does not matter as long as it's defined in the .dnn installation file.

You can then link to the files in the ascx of your module.

<script type="text/javascript" src="/DesktopModules/YourModulePath/js/file.js"></script>
or
<img src="/DesktopModules/YourModulePath/images/image.jpg">
VDWWD
  • 35,079
  • 22
  • 62
  • 79
  • "A module should be a self-contained package that could be deployed on any DNN installation" is true and I am not going to do otherwise. On the contrary I want to be able to keep related files of each dll as its embedded resources so I can reuse them with other modules very easily. – Beatles1692 Mar 04 '17 at 20:59
0

With WebResource you can embed anything - images, html, fonts etc., so I would suggest continuing with the approach you've already taken.

I downloaded and installed your module in DDN 8 for testing. So the following assumes that setup.


To embed an image you can do this:

In the library MyFramework:

  1. Add a file called image.png to a new folder \content\images\
  2. Set Build Action to Embedded Resource for this image
  3. Add [assembly: System.Web.UI.WebResource("MyFramework.content.images.image.png", "image/png")] to AssemblyInfo.cs
  4. Add protected string myImageUrl { get; private set; } so we can access the URL in the inheriting class
  5. Add myImageUrl = Page.ClientScript.GetWebResourceUrl(typeof(MyModuleBase), "MyFramework.content.images.image.png"); to your OnInit() method

In the consuming project MyModule:

  1. Add <img src="<%=myImageUrl%>"/> to View.ascx


For HTML and similar content type, you can do basically the same as you have already done for the scripts:

In the library MyFramework:

  1. Add a file called myhtml.html to a new folder \content\html\ (in my file I have: <div style="font-weight: bold;font-size: x-large">Some <span style="color: orange">HTML</span></div>)
  2. Set Build Action to Embedded Resource for the html
  3. Add [assembly: System.Web.UI.WebResource("MyFramework.content.html.myhtml.html", "text/html")] to AssemblyInfo.cs
  4. Add protected string MyHtmlUrl { get; private set; } so we can access the HTML in the inheriting class
  5. Add:
var assembly = Assembly.GetExecutingAssembly();
var resourceName = "MyFramework.content.html.myhtml.html";

using (Stream stream = assembly.GetManifestResourceStream(resourceName))
{
   using (StreamReader reader = new StreamReader(stream))
   {
       MyHtmlUrl = reader.ReadToEnd();
   }
}

In the consuming project MyModule:

  1. Add <%=MyHtmlUrl%> to View.ascx

K Scandrett
  • 16,390
  • 4
  • 40
  • 65
  • well the problem is that angular loads html files for example using template option in a route using its url. How we can load html files using web resources this way ? – Beatles1692 Mar 10 '17 at 10:29
  • I haven't played much with Angular routes, but I expect you can use the "image" option above to the get url to the html if you want to use `templateUrl`. Otherwise you can pass in the html template itself in the `template` property, rather than using `templateUrl` – K Scandrett Mar 10 '17 at 10:41
  • I just tested the first suggestion `MyHtmlUrl = Page.ClientScript.GetWebResourceUrl(typeof(MyModuleBase), "MyFramework.content.html.myhtml.html"`. Now I can view that html via `http:/hostsite/WebResource.axd?d=MVB7....` so pass that to templateUrl. – K Scandrett Mar 10 '17 at 10:47