Sample for Displaying Images Updated + Screencast
We've recently started getting newer builds of Dynamic Data out to the private testers and soon to more public testers. As a result I've got an updated version of my image controls that I posted on my blog in January. As well I've recorded a screen cast that shows how to use the image controls in a project. Here is the link to the new DbImage project for display images from the database or file system in a Dynamic Data project: DOWNLOAD DBIMAGE.
Here is a link to a screencast on how to use the controls: VIEW SCREENCAST.
Basic steps for using this in a project:
1) Open the zip file and open the redist directory. Copy the DLL from the Bin directory to the Bin directory in your website.
2) In the Redist\FieldTemplates directory copy the files from that directory to the DynamicData\FieldTemplates directory in your website.
3) Open the web.config and add "<add path="ImageHandler.ashx" verb="*" type="DbImageAPI.ImageHandler" />" to the httpHandlers section of your web.config.
At this point you have enabled image support in your project. To get it to work you need to add a UIHint attribute to the column in your data model that contains the image. Here are the steps for doing this for the Category table in Northwind.
1) Create a partial class for the Category table to extend the Category table in the data model. Right click on the project and click "Add New Item". Select "Class". Type in "Category". Press Add.
2) Add "using System.ComponentModel.DataAnnotations" and "using DbImageAPI" to the using clause section.
3) Change the definition of the class to look like this:
[MetadataType(typeof(CategoryMetadata))]
public partial class Category
{
}
public class CategoryMetadata {
[UIHint("DbImage")]
public object Picture { get; set; }
}
What we have done is changed the Category class to be a partial class so it extends the class from the data model. Next we have created a class "CategoryMetadata" that is used to provide metadata for the Category class. The MetadataType attribute is what associates this class with the original Category class. Next we have created a Picture member which we can place metadata on (this is sort of a hack we do today because C# does not support adding attributes on existing members in partial classes, hopefully a future version of C# will address this). Then we apply the UIHint attribute which specifies which field template will be used to render this column.
At this point running the application should display the images.
The sample download contains both the redist directory that contains all the stuff for adding this support to an existing project. Plus a fully running sample that builds the library. Enjoy!
