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!

Comments (15)

  1. ASPInsiders says:

    There’s a lot of folks excited about ASP.NET MVC as an option for creating ASP.NET websites. As I say

  2. Rami Abughazaleh says:

    Very cool!

    Thank you very much! 🙂

  3. One of the best things about being a programmer is new technologies,&#160; taking a look at exciting

  4. David.Yancey says:

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

  5. Blogs says:

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

  6. Drew Walker says:

    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).

  7. Robert says:

    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

  8. RJ says:

    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?

  9. Oguzhan says:

    I had the same issue.

    Any solution?

  10. Same problem for me, FileUploadEdit.HasFile is always false 🙂 Working on a solution to that problem right now.

  11. Any solution to FileUploadEdit.HasFile is always false??

    I’m test with DynamicData into VS2008 SP1

    And test with DynamicDataFuture idem problem

  12. Me again. The problem is FileUpload webcontrol and EnablePartialRendering’s ScriptManager

    First approximation’s solution:

    EnablePartialRendering="false" into MAsterPage

    🙂

  13. Other solution

    Into PageTemplate: Edit

    Pre_Init Event…

    Code:

    Dim sm As ScriptManager = ScriptManager.GetCurrent(Me.Page)

           sm.EnablePartialRendering = False

  14. Fredapinto says:

    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&gt;