Sample for Displaying Images Updated + Screencast

  • Article

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!

Comments

  • Anonymous
    April 10, 2008
    PingBack from http://www.hanselman.com/blog/PuttingASPNETDynamicDataIntoContext.aspx

  • Anonymous
    April 10, 2008
    There's a lot of folks excited about ASP.NET MVC as an option for creating ASP.NET websites. As I say

  • Anonymous
    April 10, 2008
    Very cool! Thank you very much! :)

  • Anonymous
    April 25, 2008
    One of the best things about being a programmer is new technologies,&#160; taking a look at exciting

  • Anonymous
    April 25, 2008
    One of the best things about being a programmer is new technologies,&#160; taking a look at exciting

  • Anonymous
    April 30, 2008
    There&#39;s a lot of folks excited about ASP.NET MVC as an option for creating ASP.NET websites. As I

  • Anonymous
    June 09, 2008
    Just a note, in order to get the project to successfully add new images to the database I had to remove the UpdatePanel from site.master in the root. Otherwise, the FileUpload control always returns null. I think it would also work just to make the button perform a postback rather than disabling AJAX for the whole site (but I didn't try).

  • Anonymous
    July 01, 2008
    Hi Scott, Great screencast and library. I can't get the images to display from the Category table in Northwind. I have followed all the steps and the Picture colum does display when the page renders but there are no images in any of the rows. Also when I try to insert into the Category table the Description and Name column get inserted correctly but there is no data being inserted for the Picture column as it comes back as NULL. The file upload control works and lets me select a file etc but there data is not getting sent to the database. What can I try here to get this going? thanks - Rob

  • Anonymous
    July 27, 2008
    I followed the instructions, but seem to be having an issue similar to Rob.  The images appear, but I can't upload any new images to the db.  In the ExtractValues eventhandler for DbImage_edit, FileUploadEdit.HasFile is ALWAYS false.  Any idea why?

  • Anonymous
    October 05, 2008
    I had the same issue. Any solution?

  • Anonymous
    October 16, 2008
    Same problem for me, FileUploadEdit.HasFile is always false :) Working on a solution to that problem right now.

  • Anonymous
    December 04, 2008
    Any solution to FileUploadEdit.HasFile is always false?? I'm test with DynamicData into VS2008 SP1 And test with DynamicDataFuture idem problem

  • Anonymous
    December 04, 2008
    Me again. The problem is FileUpload webcontrol and EnablePartialRendering's ScriptManager First approximation's solution: EnablePartialRendering="false" into MAsterPage :)

  • Anonymous
    December 04, 2008
    Other solution Into PageTemplate: Edit Pre_Init Event... Code: Dim sm As ScriptManager = ScriptManager.GetCurrent(Me.Page)        sm.EnablePartialRendering = False

  • Anonymous
    July 25, 2010
    I accept your blog post comments for Sample for Displaying Images Updated + Screencast . I liked all comments shared in this post. Thanks for sharing. <a href="http://borsa.tv">ideas</a>