HTML

ASP.NET MultiLine TextBox MaxLength Validation

Published on by Zachary Lyons

There have been many articles and forums addressing the fact that the MaxLength property of the ASP.NET TextBox does not work when you set TextMode to MultiLine. The majority of these solutions use the KeyPress and OnBlur events. This brings with it lots of JavaScript and a host of browser issues. I was impressed by the RegularExpressionValidator options because they can tie in to the AJAX ValidatorCalloutExtender. I also like the server-side validation that you get with the native validation controls.

The solution I settled on is a combination of all the above. I use an ASP.NET RegularExpressionValidator on the MultiLine TextBox. The code looks like this:

<asp:TextBox runat="server" ID="txtDescription" TextMode="MultiLine" Rows="5" Width="300" />
<asp:RegularExpressionValidator runat="server" ID="revtxtDescription" ControlToValidate="txtDescription" ErrorMessage="Exceeds 500 character maximum." ValidationExpression="^[\s\S]{0,500}$" Display="None" />
<ajax:ValidatorCalloutExtender ID="vcerevtxtDescription" runat="server" TargetControlID="revtxtDescription" />

Good so far, but to quote Mark Hildreth:

“I agree that that works for preventing users from posting too much text, however it does’t prevent them from typing more than 500 characters into the box. The validators only perform their validation in the onchange event which is not triggered on every key stroke. Imagine your dismay if you spent 10 minutes typing into a textbox, only to have the form say you have exceeded the 500 character limit?”

The JavaScript below will call this RegularExpressionValidator every second. I find that it does not noticeably slow down the form.

<script type="text/javascript">

    $(document).ready(function () {
        setInterval("validateDescription();", 1000);
    });

    function validateDescription() {
        var myValidator = document.getElementById("<%= revtxtDescription.ClientID %>");
        ValidatorValidate(myValidator);
    }

</script>

Now as the user is typing, they will be warned within one second of exceeding 500 characters. If they paste into the textbox, it will alert them too.

jQuery Get Next Textbox in a GridViewRow

Published on by matt

In a GridView I have a column of checkboxes and a column of textboxes. I wanted to modify the value of the textbox when the checkbox is checked. jQuery is the perfect fit for this. Here is the code I used:

$(function () {
    var $inp = $('input:checkbox');
    $inp.bind('click', function () {
        var textbox = $(":input:text:eq(" + $inp.index(this) + ")");

        if (this.checked == true) {
            textbox.val('123ABC');
            textbox.attr('disabled', 'disabled');
        } else {
            textbox.attr('disabled', '');
        }
    });
});

This post uses ideas from Suprotim Agarwal.

How to Make Favicons with Visual Studio

Published on by Zachary Lyons

I don’t have any fancy program to generate an icon. Since I always forget how to do this, here are simple instructions:

Open the logo in Photoshop and flatten it to one layer on a transparent background. Duplicate it and resize to 16×16 pixels. Open a new instance of Visual Studio and click New File. Select Icon and it will open a pane with two versions. The first version is 16×16, and will appear in browsers. There is also a 32×32 version, which I always do just in case someone adds a link to their desktop.

Set up the image type in Visual Studio. The default image type is 4 bit, and you want 24 bit. Press Insert on your keyboard and select “16×16, 24 bit” then delete the 4 bit image type.

Go to Photoshop and copy the entire canvas to the clipboard. Return to Visual Studio and CTRL+A, Delete, CTRL+V. Switch to the 32px version and the thumbnail for the 16px version should update.

Back in Photoshop, close the 16px version and resize the original to 32px. Copy it into Visual Studio the same way as above. Save as favicon.ico, and upload it.

The HTML code I use is as follows:

<link rel="SHORTCUT ICON" type="image/x-icon" href="/favicon.ico" />

GridView Row Index in Markup

Published on by matt

Sometimes I want to show the e.Row.RowIndex of a GridViewRow in the markup of the page. I don’t want to hook into the RowDataBound method just to display a simple number. The answer varies for GridViews and Repeaters. Click here for the complete rundown.

GridView:

<asp:Literal runat="server" Text='<%# Container.DataItemIndex + 1 %>' />

Repeater:

<asp:Literal runat="server" Text='<%# Container.ItemIndex + 1 %>' />

IE6 Float Bug

Published on by matt

Lots of people like CSS and it certainly has it’s place. But when the most popular browser has a bug that prevents a simple div element from displaying properly we all get frustrated. All I wanted to do was have a box “float” to the right side of the page. It works great in IE7 and Firefox. IE6 displayed the box in the content area instead of to the right. See this page for more details. But the simple answer is add “display: inline” to the style. As I understand this, we are using a bug in IE6 to correct another bug in IE6. Okay, I grant you, this is confusing.

To fix the IE6 “float” bug to this:

<div class=”box”>
   <div class=”sidebar” style=”float: right; display: inline“>content
   </div>
   content
</div>

Source: http://www.positioniseverything.net/explorer/floatIndent.html