Mark McDonnell

W3C Validator and the ViewState

2008-03-24T20:11:00Z

The problem:

I was having a bit of trouble validating my ASP.NET pages using the official W3C HTML Validator software.

It turned out that the problem was with the hidden VIEWSTATE field that the .NET framework inserts into the web forms automatically. The W3C validator doesn't like the underscores __ in the name/id attributes of the VIEWSTATE field.

The solution:

Although the answer to this issue can now be found in the official Microsoft ASP.NET forums (I started a thread a while back to find a solution to this issue), I decided it would be a good idea to post on a ASP.NET weblog so other developers would be able to find this information more easily.

Essentially the credit for finding this solution has to go to the author of the article: http://www.developerfusion.co.uk/show/4641/1/.

The solution required a C# Class file to be compiled into a DLL file and then placed in the Bin folder within the Web Application.

Note, for me to be able to compile the file succesfully I had to copy the file into the following folder on my hard drive C:\Program Files\Microsoft Visual Studio 9.0\VC and then open up the VS2008 Command Prompt and enter the line:

csc /t:library Liquid.Tutorial.cs

As well as this C# Class file I needed a ASPX page to test the solution. The ASPX code is directly below...


<%@ Page Inherits="Liquid.Tutorial.CustomPage" AutoEventWireup="True" %>
<%@ Register TagPrefix="Liquid" Namespace="Liquid.Tutorial" Assembly="Liquid.Tutorial" %>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">

<html lang="en-gb"> <head> <title>ASP.NET 2.0 [Fix W3C ViewState Validation Issue]</title> </head> <body>

<Liquid:CustomForm id="myId" method="post" runat="server"> 
<fieldset>
    <legend>Sample form</legend>

    <input type="submit"/>
    <asp:Literal id="inputViewState" runat="server"/>
</fieldset> 
</Liquid:CustomForm>
<p>
    <asp:Literal id="outputText" runat="server"/>
</p> 

</body>
</html>

The code for the C# Class file is directly below...

using System;
using System.IO;
using System.Web;
using System.Web.UI;
using System.Web.UI.HtmlControls;
using System.Web.UI.WebControls;

namespace Liquid.Tutorial
{

        public class CustomPage : Page
        {
                protected Literal inputViewState;
                protected Literal outputText;

                public CustomPage()
                {
                }

                /*
                * To get and set the hidden form field we need to override the
                * Page.LoadPageStateFromPersistenceMedium() and
                * Page.SavePageStateToPersistenceMedium() methods to get and set
                * the hidden form field value.
                *
                * NOTE: LosFormatter is a somewhat undocumented class that is used to write
                * the view-state object to a Base64 string and back again.
                */

                protected override Object LoadPageStateFromPersistenceMedium()
                {
                        LosFormatter format = new LosFormatter();
                        String viewState = HttpContext.Current.Request.Form["__VIEWSTATE"].ToString();
                        return format.Deserialize(viewState);
                }

                protected override void SavePageStateToPersistenceMedium(Object viewState)
                {
                        LosFormatter format = new LosFormatter();
                        StringWriter writer = new StringWriter();
                        format.Serialize(writer, viewState);
                        this.inputViewState.Text = "<input type=\"hidden\" name=\"__VIEWSTATE\" value=\"" + writer.ToString() + "\"/>";
                }

                // The code writes an output string to the final asp:Literal control when the form is submitted correctly.
                protected void Page_Load(Object sender, EventArgs e)
                {
                        if (Page.IsPostBack)
                        {
                                outputText.Text = "Is post back";
                        }
                }

                /*
                * You'll have probably realised the one function we overwrote but didn't
                * replace when we overrode the HtmlForm.RenderChildren() method, was the
                * check to see if a form already exists on the page. The problem is the
                * functionality to perform such a check is locked away in private functions
                * so we'll have to create our own solution.
                */

                // The Boolean field will allow us to set and get a flag stating if a form already exists on a page.
                private Boolean _fOnFormRenderCalled = false;
                internal void OnFormRender()
                {
                        if(this._fOnFormRenderCalled)
                        {
                                throw new HttpException("A page can have only one visible server-side CustomForm tag");
                        }
                        else
                        {
                                this._fOnFormRenderCalled = true;
                        }
                }
        }

        public class CustomForm : HtmlForm
        {
                public CustomForm()
                {
                }                 // This function adds/removes any attributes from the FORM tag
                protected override void RenderAttributes(HtmlTextWriter output)
                {
                        /*
                        * The code simply writes the attributes we are actually interested in
                        * and ignores the others. This could easily be extended should
                        * additional attributes be required (client-side form validation
                        * for example) but to keep it simple we'll stick with those three.
                        */                         output.WriteAttribute("id", this.ID);
                        output.WriteAttribute("method", this.Method);
                        output.WriteAttribute("action", HttpContext.Current.Request.Path);
                }

                // This function removes the ViewState field and adds it back in again
                protected override void RenderChildren(HtmlTextWriter output)
                {
                        /*
                        * This overridden function simply gets the code between the form tags
                        * and writes it to the page. You'll find that it outputs valid HTML.
                        * Only now the form doesn't actually post back properly, this is
                        * because there is an issue with all current versions of the
                        * .NET runtime that require the hidden input form field to be present,
                        * even if the value is blank.
                        */

                        foreach (Control c in base.Controls)
                        {
                                c.RenderControl(output);
                        }

                        /*
                        * This line of code simply casts the base page class as the derived page
                        * class so that it can read and write the flag field.
                        *
                        * The Boolean field (which is created above in the CustomPage class)
                        * will allow us to set and get a flag stating if a form already exists
                        * on a page. Set and get the property via the accessor property.
                        */

                        ((CustomPage)this.Page).OnFormRender();
                }
        }
}

Hope this helps.

[updated] Resize image BEFORE saving to server

2008-03-09T19:27:00Z

[updated]:

Hello again, it seems my post title was a little confusing, apologies to all who have already read the post. I have since corrected the title to reflect this mistake. The purpose of the below script was to save space on the server without requiring the client to have Photoshop (or any Image Editor Software) knowledge, and we found that the below example was the best way to do this. Just to clarify that I'm aware that this solution doesn't help with speeding up the uploading of the image as obviously the client still has to upload the full size image before it is resized. I have found this solution to be very useful for a lot of our clients and hopefully it will be of use to others as well. Again, apologies for the previous mis-communication.

The problem:

I noticed a problem recently with one of our clients Content Management Systems. Unfortunately this particular system was built by the clients previous development company and so wasn't picked up immediately as a serious issue. But although what probably seemed like a sensible thing to do at the time of development turned out to be the source of costing our client more and more money each year with regards to purchasing additional website hosting space.

The problem was to do with how images were being uploaded to the server via their Content Management System. The client would select an image from their hard drive (usually a large digital camera image) and they would upload the selected image to a specified folder on the server. On the front-end of their website the ASP.NET page would then connect to the database, pull out the image URL and would then display the image on the web page, but not before the .NET framework had done it's duty of resizing the image into a thumbnail so the end-user wasn't spanked with a huge file download.

The problem was that after about 3 months of uploading image after image, the client found they were out of server space because each image they were uploading was on average about 8mb - and although the end result (the thumbnail image) was only a couple of kilobytes in size - the server was being drained of its space by all these large photos being uploaded.

The solution:

Well the solution was simple enough, rather than upload an 8mb image and then resize it for the front-end, we fixed it so that instead the client would select an image from their hard drive to upload and the .NET framework would resize the image into a thumbnail BEFORE saving it onto the server (thus saving server space).

[updated note: although the image is resized before saving to the server, the original file size it still uploaded, so this solution does not speed up the uploading process]

Below is a simple code example I put together. There are only two files "ImageUpload.aspx" and its code-file "ImageUpload.aspx.cs"...

ImageUpload.aspx

<asp:FileUpload ID="fileUpload" runat="server" />

<asp:Button ID="uploadButton" runat="server" Text="Upload!" OnClick="UploadFile" />

<asp:Label ID="label" runat="server"></asp:Label> <br /><br />

<asp:Image ID="Image1" ImageUrl="" runat="server" Visible="false" />

</form>

ImageUpload.aspx.cs

using System;
using System.Collections;
using System.Configuration;
using System.Data;
using System.Web;
using System.Web.Security;
using System.Web.UI;
using System.Web.UI.HtmlControls;
using System.Web.UI.WebControls;
using System.Web.UI.WebControls.WebParts;
using System.IO; // this is for the file upload
using System.Drawing;
using System.Drawing.Drawing2D;
using System.Drawing.Imaging;

public partial class GDI_UploadImage : System.Web.UI.Page
{
     protected void Page_Load(object sender, EventArgs e)
     {
          //
     }

     protected void UploadFile(Object s, EventArgs e)
     {
          // First we check to see if the user has selected a file
          if (fileUpload.HasFile)
          {
               // Find the fileUpload control
               string filename = fileUpload.FileName;

               // Check if the directory we want the image uploaded to actually exists or not
               if (!Directory.Exists(MapPath(@"Uploaded-Files")))
               {
                    // If it doesn't then we just create it before going any further
                    Directory.CreateDirectory(MapPath(@"Uploaded-Files"));
               }

               // Specify the upload directory
               string directory = Server.MapPath(@"Uploaded-Files\");

               // Create a bitmap of the content of the fileUpload control in memory
               Bitmap originalBMP = new Bitmap(fileUpload.FileContent);

               // Calculate the new image dimensions
               int origWidth = originalBMP.Width;
               int origHeight = originalBMP.Height;
               int sngRatio = origWidth / origHeight;
               int newWidth = 100;
               int newHeight = newWidth / sngRatio;

               // Create a new bitmap which will hold the previous resized bitmap
               Bitmap newBMP = new Bitmap(originalBMP, newWidth, newHeight);

// Create a graphic based on the new bitmap
Graphics oGraphics = Graphics.FromImage(newBMP);

// Set the properties for the new graphic file
oGraphics.SmoothingMode = SmoothingMode.AntiAlias;oGraphics.InterpolationMode = InterpolationMode.HighQualityBicubic;

// Draw the new graphic based on the resized bitmap
oGraphics.DrawImage(originalBMP, 0, 0, newWidth, newHeight);

               // Save the new graphic file to the server
               newBMP.Save(directory + "tn_" + filename);

               // Once finished with the bitmap objects, we deallocate them.
               originalBMP.Dispose();
               newBMP.Dispose();
               oGraphics.Dispose();

               // Write a message to inform the user all is OK
               label.Text = "File Name: <b style='color: red;'>" + filename + "</b><br>";
               label.Text += "Content Type: <b style='color: red;'>" + fileUpload.PostedFile.ContentType + "</b><br>";
               label.Text += "File Size: <b style='color: red;'>" + fileUpload.PostedFile.ContentLength.ToString() + "</b>";

               // Display the image to the user
               Image1.Visible = true;
               Image1.ImageUrl = @"/Uploaded-Files/tn_" + filename;
          }
          else
          {
               label.Text = "No file uploaded!";
          }
     }
}