Monday 7 July 2008

Dynamic Data: Part 2 - FileImage_Edit FieldTemplate

  1. Part 1 - FileImage_Edit FieldTemplate
  2. Part 2 - FileImage_Edit FieldTemplate

I've had some more ideas:

  1. Image Aspect Ratio lock, keeping the proportions of the image the same when resized.
  2. Doing the same as DynamicDataFutures disabling EnablePartialRendering when the FileImage is in an Edit or Insert page.

So here's the new helper class FileImageHelper.

using System;
using System.Text;
using System.Web.DynamicData;
using System.Web.UI;
public static class FileImageHelper
{
    public static void UpdateHeightWidth(ref int scaleWidth, ref int scaleHeight, String fileName)
    {
        System.Drawing.Image image = System.Drawing.Image.FromFile(fileName);
        float originalHeight = image.Height;
        float originalWidth = image.Width;
        float height = 0;
        float width = 0;
        if (scaleWidth > 0 && scaleHeight == 0)
        {
            //scale to width only
            //calculate height based on width keeping correct proportions
            height = originalHeight * (scaleWidth / originalWidth);
            scaleHeight = (int)height;
        }
        else if (scaleHeight > 0 && scaleWidth == 0)
        {
            //scale to height only
            //calculate height based on width keeping correct proportions
            width = originalWidth * (scaleHeight / originalHeight);
            scaleWidth = (int)width;
        }
        //else scale to both dims sent
    }

    /// <summary>
    /// If the given table contains a column that has a UI Hint with the value "DbImage", finds the ScriptManager
    /// for the current page and disables partial rendering
    /// </summary>
    /// <param name="page"></param>
    /// <param name="table"></param>
    public static void DisablePartialRenderingForUpload(Page page, MetaTable table)
    {
        foreach (var column in table.Columns)
        {
            // TODO this depends on the name of the field template, need to fix
            if (String.Equals(column.UIHint, "DBImage", StringComparison.OrdinalIgnoreCase)
                || String.Equals(column.UIHint, "FileImage", StringComparison.OrdinalIgnoreCase))
            {
                var sm = ScriptManager.GetCurrent(page);
                if (sm != null)
                {
                    sm.EnablePartialRendering = false;
                }
                break;
            }
        }
    }
}

1. Image Aspect Ratio lock

This is facilitated but the helper method UpdateHeightWidth which is used to return the correct scaled image dimensions by taking the width, height and full path to the image fileName. The method only changes the scale dimensions if one is set to zero. If one of the two scale dimensions is set to zero then is is calculated from the original dimensions.

An snippet of code shows its use:

int width = 0;
int height = 0;
if (imageFormat != null)
{
    width = imageFormat.DisplayWidth;
    height = imageFormat.DisplayHeight;
}
FileImageHelper.UpdataHeightWidth(ref width, ref height, Server.MapPath(imagesDir + "/" + fileName));
if (width > 0 && height > 0)
{
    ImageEdit.Width = width;
    ImageEdit.Height = height;
}

In this snippet of code we create the width and height set them to 0 and then if there is an ImageFormatAttribute get the DisplayWidth and DisplayHeight into width and height, then we call UpdateHeightWidth method which will update the dimensions the the correct size for keeping the aspect ratios the same. In my project I've modified both the FileImage and FileImage_Edit to use this.

2. Dealing with EnablePartialRendering and FileUpload

My version of DisablePartialRenderingForUpload is only modified slightly by adding a test for UIHint FileImage and is placed instead of the current line in Edit.aspx and Insert.aspx see below.

//DynamicDataFutures.DisablePartialRenderingForUpload(this, table);
FileImageHelper.DisablePartialRenderingForUpload(this, table);
Note: This line MUST be in the Page_Init event handler as the EnablePartialRendering cannot be changed after the Init event.

FileImage_Edit file based website download

Note: This has an SQL Server 2008 version of Northwind if using an earlier version of SQL Server just replace the Northwind DB with a compatible version and add the following table FileImageTest

USE [Northwind]
GO

/****** Object:  Table [dbo].[FileImageTest]    Script Date: 07/08/2008 12:01:45 ******/
SET ANSI_NULLS ON
GO

SET QUOTED_IDENTIFIER ON
GO

CREATE TABLE [dbo].[FileImageTest](
    [Id] [int] IDENTITY(1,1) NOT NULL,
    [Description] [nvarchar](50) NOT NULL,
    [filePath] [nvarchar](256) NOT NULL,
 CONSTRAINT [PK_FileImageTest] PRIMARY KEY CLUSTERED 
(
    [Id] ASC
)WITH (PAD_INDEX  = OFF, 
STATISTICS_NORECOMPUTE = OFF,
IGNORE_DUP_KEY = OFF,
ALLOW_ROW_LOCKS = ON,
ALLOW_PAGE_LOCKS = ON) ON [PRIMARY] ) ON [PRIMARY] GO

Happy Coding smile_teeth