Thursday, August 26, 2010

Display images from embedded resources in ASP.NET

From one Web application to another, we often reuse the same picture for saving, editing and deleting data. To avoid copying these images again and again, from one site to another, you can embed theses images inside a class library that will be referenced by all your projects. This will have the benefit of sharing the same images/icons across all your Web sites and therefore, if you have new images, you only have to replace the images inside the class library and the changes will be applied on all your Web sites.

Now, let me show how you can do that.

Step 1: Create class library project

The first step is to create a class library project in which we will add the images. Here, I will create two different class libraries, one in C# and the other one in VB to show you the minor differences between both languages. I named the C# class library “MyCSharpClassLibrary” and the VB class library “MyVBClassLibrary”. In both projects, I added the folder Resources/Images. Then, I added in the C# library the images for the delete and edit images and in the VB class library, the save and cancel images. The projects should look like this:

image



Step 2: Embedding images has resource

Now that we have added the images to our class library, we need to make sure these images will be include when building the assembly. To do that we need to change build action on each images using the property window. The default value for this type of files is “Content”. All we need to do is to change that value to “Embedded Resource”.

image


Step 3: Enabling Web resource

Finally, we need to enable these embedded resources in order to be used as Web resource. This is done using the WebResourceAttribute attribute inside the assembly declaration of our class libraries. The WebResourceAttribute constructor take two parameters. The first one is a string representing the name of the Web resource and the second one is a string that represents the content type like “text/javascript” or in our case “image/gif”.



For the first parameter, the name of the Web resource, we need to specify the fully qualified namespace of the embedded resource, which include the full path in c# but not in VB. So to enable the embedded resources as a Web resource in the C# class library, you simply open the assembly file “AssemblyInfo.cs” and add the following lines:

  1. [assembly: WebResource("MyCSharpClassLibrary.Resources.Images.Delete.gif", "img/gif")]
  2. [assembly: WebResource("MyCSharpClassLibrary.Resources.Images.Edit.gif", "img/gif")]




In the VB class library “AssemblyInfo.vb” file, you add the following two line:

  1. <Assembly: WebResource("MyVBClassLibrary.Cancel.gif", "img/gif")>
  2. <Assembly: WebResource("MyVBClassLibrary.Save.gif", "img/gif")>



Note that you will need a "using" or "Import" directive for System.Web.UI, which is where WebResourceAttribute is.



Step 4: Add reference to our class libraries

Once our class libraries are completed and compile, it’s time to add them to our Web project using the add reference dialog and adding a reference to both class libraries.

image image

Step 5: Using the Web resource

Finally, all that is left to do is to used these embedded images. This is done using the ClientScriptManager.GetWebResourceUrl method like this: This method take two parameters: the type of the resource and the fully qualified name of the resource in the assembly. It will return the URL reference to a resource in the assembly. Therefore, to use our embedded image, all we have to do is to set the ImageUrl property to the desired Web resource.

  1. Image1.ImageUrl = Page.ClientScript.GetWebResourceUrl(typeof(MyCSharpClassLibrary.Class1), "MyCSharpClassLibrary.Resources.Images.Edit.gif");
  2. Image2.ImageUrl = Page.ClientScript.GetWebResourceUrl(typeof(MyVBClassLibrary.Class1), "MyVBClassLibrary.Save.gif");








A good example would be in a GridView like this:

image image

This is done by using ImageButton controls in a TemplateField for the edit, update, delete and cancel operations.



  1. <asp:TemplateField>
  2. <ItemTemplate>
  3. <asp:ImageButton ID="btnEdit" runat="server" ImageUrl='<%# (GetEditImageUrl()) %>'
  4. CommandName="Edit" />
  5. <asp:ImageButton ID="btnDelete" runat="server" ImageUrl='<%# (GetDeleteImageUrl()) %>'
  6. CommandName="Delete" />
  7. </ItemTemplate>
  8. <EditItemTemplate>
  9. <asp:ImageButton ID="btnUpdate" runat="server" ImageUrl='<%# (GetUpdateImageUrl()) %>'
  10. CommandName="Update" />
  11. <asp:ImageButton ID="btnCancel" runat="server" ImageUrl='<%# (GetCancelImageUrl()) %>'
  12. CommandName="Cancel" />
  13. </EditItemTemplate>
  14. </asp:TemplateField>








If you notice, I bind the ImageUrl property to simple method that return the assembly resource URL.
  1. public string GetDeleteImageUrl()
  2. {
  3. return Page.ClientScript.GetWebResourceUrl(typeof(MyCSharpClassLibrary.Class1), "MyCSharpClassLibrary.Resources.Images.Delete.gif");
  4. }
  5. public string GetEditImageUrl()
  6. {
  7. return Page.ClientScript.GetWebResourceUrl(typeof(MyCSharpClassLibrary.Class1), "MyCSharpClassLibrary.Resources.Images.Edit.gif");
  8. }
  9. public string GetCancelImageUrl()
  10. {
  11. return Page.ClientScript.GetWebResourceUrl(typeof(MyVBClassLibrary.Class1), "MyVBClassLibrary.Cancel.gif");
  12. }
  13. public string GetUpdateImageUrl()
  14. {
  15. return Page.ClientScript.GetWebResourceUrl(typeof(MyVBClassLibrary.Class1), "MyVBClassLibrary.Save.gif");
  16. }








This is it. Nothing more complicated!

Enjoy,

Bruno

1 comment:

  1. très intéressant bruno, lâches-pas!

    -Dan D.

    ReplyDelete