Jon's Blog

.NET Development & More

IE8: Image max-width bug

I found a strange IE8 bug dealing with images and the CSS max-width property.  I had an image inside of a table cell.  The image had a max-width set using CSS.  In IE8, if the actual image width was larger than the max-width value then the image was resized properly, but the table cell was not.  It was strange because it worked fine in IE7 and Firefox.  The way I fixed this issue was to wrap the image inside of a div and then set the width of the div to the same value as the max-width of the image.  Oh well, easy enough.

HTML:

<table class="myTable">
    <tr>
        <td class="col1">
            <div class="imageWrapper">
                <img src="images/blah.jpg" class="myImage" />
            </div>
        </td>
        <td class="col2">
            <p>Content here</p>
        </td>
    </tr>
</table>

 

CSS:

table.myTable .col1 { vertical-align: top; width: 122px; }
table.myTable .col2 { vertical-align: top; width: 353px; padding-left: 5px; }

img.myImage { max-width: 122px; max-height: 172px; }
div.imageWrapper { width: 122px;  }

DropDownList: Customized DataTextField

If you try to bind a DropDownList to a DataSouce you will find that you can only use one column as the DataTextField.  The easiest way I have found to overcome this is to manually add the items to the DropDownList like this:

foreach (var item in items)
{
ListItem li = new ListItem(item.FirstName + " " + item.LastName, item.ID);
ddlMyDDL.Items.Add(li);
}

You could also change your query/stored procedure to pull back what you needed displayed in a single column.  But I prefer the above method.

SQL Server Trigger for Row Archive

This trigger will write to an archive table when a row is updated or deleted.  Very useful when you want to know who did what and when.

USE [DatabaseName]
GO

SET ANSI_NULLS ON
GO
SET QUOTED_IDENTIFIER ON
GO

CREATE TRIGGER [dbo].[trigTableName_Archive] 
   ON  [dbo].[TableName]
   FOR UPDATE, DELETE
AS 
BEGIN
    SET NOCOUNT ON;
    
    INSERT INTO TableName_ARCHIVE
        (Column1,
        Column2,
        Column3)
    SELECT
        Column1,
        Column2,
        Column3
    FROM deleted

END

ASP.NET AJAX Web Service Call

So I was working on a project where I needed to have some checkboxes in a GridView.  When checked they needed to update the underlying business object.  My first idea was the just wrap the whole thing in an UpdatePanel, but that would of course require a partial postback with the full contents of the grid being posted back to the server.  The better solution is to call a web service method to do the update.

First, add a new Web Service class to your project.  You need to add the [ScriptService] attribute to this class.  This attribute is from the System.Web.Script.Services namespace.  Then create your WebMethod, including whatever parameters you will need to pass in.

[WebMethod]
public void UpdateFlag(int id, bool isChecked)
{
// Logic to update business object
}

Next you need to add a ServiceReference that points to the web service you just created.  You can add this to your ScriptManager instance.  In my scenario the ScriptManager was in the Master page and I just wanted to include the ServiceReference in this one ASPX page.  Here you can use the ScripManagerProxy object like so (assuming the WebService file is in the same directory as the ASPX file):

<asp:ScriptManagerProxy ID="scriptManProxy" runat="server">
    <Services>
        <asp:ServiceReference Path="MyWebService.asmx" />
    </Services>
</asp:ScriptManagerProxy>

 

Then add the following code to your GridView's RowDataBound event.  This will set the onclick events for the individual checkboxes you are binding to the GridView.

if (e.Row.RowType == DataControlRowType.DataRow)
{
    BusinessObject obj = (BusinessObject)e.Row.DataItem;
    CheckBox myCB = (CheckBox)e.Row.FindControl("myCB");

    string eventText = string.Format("myCB_Checked({0}, this);", obj.SomeID);
    myCB.Attributes["onclick"] = eventText;
}

 

Now you need to actually write the JavaScript method that will call your web service.  Here it is:

<script type="text/javascript">
    function myCB_Checked(id, ctrl) {
        var isChecked = ctrl.checked;
        Namespace.MyWebService.UpdateFlag(id, isChecked);
    }
</script>

 

Make sure that you use the fully qualified name of your class here.