Friday, July 28, 2006

Cool Controls: Custom Validators

Custom validators are pretty cool to use in ASP.NET 2.0. There are quite a few samples on the web for getting these hooked up. However, most of the samples are REALLY simple in the client-side script. I wanted to throw this one out there just in case someone else has to do something similar.

The Sample:
Lets say you have a checkbox and a DropDownList, and you want the DropDownList to have validation on it only when the checkbox is checked. When the checkbox is not checked you want the DropDownList disabled. Okay, sounds pretty simple, but can we do it without a postback.

Toggling the Disabled property

The JavaScript to toggle the DropDownList disabled property can be done like so:

<script type="text/JavaScript">
function Change(chkfield,field)
{
if (chkfield.checked == true)
{ document.getElementById(field).disabled = false; }
else
{ document.getElementById(field).disabled = true; }
}
</script>


Notice that I'm passing in the checkbox object and the field to be disabled. The DropDownList will be called "dd1."
In the checkbox you just plug in the function like so:

<input id="chk1" title="chk1" onclick="Change(this,'dd1')" type="checkbox" value="X" name="chk1">MyCheckBox

Adding the CustomValidator
Next we add the CustomValidator control after the checkbox. The code would like the following:

<asp:CustomValidator
ID="CustomValidator1" runat="server" ClientValidationFunction="Checkit" ControlToValidate="dd1"
ErrorMessage="Required Field" Font-Size="Large">*</asp:CustomValidator>


With the CustomValidator control you can supply a "ClientValidationFunction" that will be called. Remember to provide a server-side function as well because if you don't it can be a security risk according to Microsoft. For this example I left that out.


The Validation Function
The validation function, called "Checkit" in this example, will check the validation of the DropDownList "dd1."

This function would look like this:

function Checkit(sender, args)
{
if(!document.getElementById(sender.controltovalidate).disabled && args.Value=="bad")
{
args.IsValid=false;
}else{
args.IsValid=true;
}
}

Notice that the function is checking for a value of "bad" in the args.Value. The CustomValidator doesn't like having null values in there so just put the word "bad" in the value of your empty selector item in the dropdownlist. There was a hack for getting this to work with null values but for this example this should do nicely.

Anyway, that's it for the Custom Validator control. Another cool control in the ASP.NET arsenal.

Happy Coding!

DX Jas




Thursday, July 06, 2006

Problem stretching images with GDI+


I've noticed a problem when trying to zoom in on an image using the DrawImage method. The above image shows the problem. Basically, if you scale the image, the first row and column doesn't get scaled correctly. I've posted the problem twice on Expert-Exchange but have not found an explanation or fix yet.

I created a test app that takes a 40x40 bitmap with a checkerboard pattern and zooms it by a zoomfactor. The render code is as follows:

Protected Overrides Sub OnPaint(ByVal e As
System.Windows.Forms.PaintEventArgs) Try

If (bmp Is Nothing) Then

Else

Dim g As
Graphics = e.Graphics()
g.SmoothingMode = Drawing2D.SmoothingMode.None

g.InterpolationMode = Drawing2D.InterpolationMode.NearestNeighbor
g.SmoothingMode = Drawing2D.SmoothingMode.None

Dim rect As New Rectangle
rect.X = 0
rect.Y = 0
rect.Width = (bmp.Width * m_ZoomLevel)
rect.Height = (bmp.Height * m_ZoomLevel) 'attribute shows that destination rect is
the right size but not needed for test.

Dim attr As System.Drawing.Imaging.ImageAttributes
attr = New System.Drawing.Imaging.ImageAttributes()

attr.SetWrapMode(System.Drawing.Drawing2D.WrapMode.TileFlipXY)


g.DrawImage(bmp, rect,0, 0, 40, 40, GraphicsUnit.Pixel, attr)
attr.Dispose()

End If
Catch ex As Exception

MessageBox.Show("ouch")

End Try
End Sub


This bug has been posted to Microsoft and confirmed by other programmers. A fix is to do the following:

Use (-0.5 + 0.5*srcw/dstw, -0.5 + 0.5*srch/dsth) as the source origin.

Happy Coding!
Jas