Using jQuery with ASP.NET Webforms – Validation

This isn’t to be a big post on how to use everything here, but I was asked last night to help someone out with a validation requirement and they wanted to use jQuery with asp.net webforms.  Figured I’d post how I handled it.’

First, I did want to try to address the ‘mangled id’s’ – or rather the INamingContainer with it’s auto-generated IDs. (supposedly being addressed in .net 4.0 ?)

John Sheehan’s blog posted a  suitable solution to get me started:

        String.prototype.endsWith = function(str) {
            return (this.match(str + '$') == str)
        }

        jQuery.expr[":"].asp = function(a, i, m) {
            return (id = jQuery(a).attr('id')) && id.endsWith(m[3]);
        };

.csharpcode, .csharpcode pre
{
font-size: small;
color: black;
font-family: consolas, “Courier New”, courier, monospace;
background-color: #ffffff;
/*white-space: pre;*/
}
.csharpcode pre { margin: 0em; }
.csharpcode .rem { color: #008000; }
.csharpcode .kwrd { color: #0000ff; }
.csharpcode .str { color: #006080; }
.csharpcode .op { color: #0000c0; }
.csharpcode .preproc { color: #cc6633; }
.csharpcode .asp { background-color: #ffff00; }
.csharpcode .html { color: #800000; }
.csharpcode .attr { color: #ff0000; }
.csharpcode .alt
{
background-color: #f4f4f4;
width: 100%;
margin: 0em;
}
.csharpcode .lnum { color: #606060; }

(This can go in the script tag at the top of the page)

What this does is allow us to use some custom jquery selector functionality.  An example is if I had a checkbox control:

<asp:CheckBox ID="cbTest" runat="server"  Text="Check"  />


I can use jquery to determine if it’s checked or not:

$(":asp('cbTest')").attr('checked')

.csharpcode, .csharpcode pre
{
font-size: small;
color: black;
font-family: consolas, “Courier New”, courier, monospace;
background-color: #ffffff;
/*white-space: pre;*/
}
.csharpcode pre { margin: 0em; }
.csharpcode .rem { color: #008000; }
.csharpcode .kwrd { color: #0000ff; }
.csharpcode .str { color: #006080; }
.csharpcode .op { color: #0000c0; }
.csharpcode .preproc { color: #cc6633; }
.csharpcode .asp { background-color: #ffff00; }
.csharpcode .html { color: #800000; }
.csharpcode .attr { color: #ff0000; }
.csharpcode .alt
{
background-color: #f4f4f4;
width: 100%;
margin: 0em;
}
.csharpcode .lnum { color: #606060; }

Ok, let’s get to the problem at hand:  The goal is use asp.net validators, but only fire them if the ‘cbTest’ checkbox is checked.   Additionally, when it’s checked or unchecked, it should also fire instantly to determine what should be validated.

To do this, I needed to better understand how asp.net webform validators work.  Luckily, not only did I find some information, but information with jquery on Simone Chiaretta’s blog post on ‘How to manage asp.net validation from javascript with jquery ‘

Couple of gems: there are some javascript functions we have available to us when using asp.net webforms:

ValidatorEnable is the one I’m interested in here:

ValidatorEnable($("#<%= valEncOtherMimetypeRequired.ClientID %>")[0], true);


This is good, just what I needed.  However, due to concerns with master pages, etc… I was able to use the custom selector logic instead:

ValidatorEnable($(":asp('FirstNameVal')")[0], true);
 

(note, the [0] is to to get the real DOM element and not the jQuery wrapper around it.)

That is enough to get me started then:

Simple example is we have a dropdown and a textbox.  When the checkbox is clicked, it validates.  If it’s unchecked it turns off the validation.

Here is the html:

<form id="form1" runat="server">
    <div>
        Type
        <asp:DropDownList runat="server" ID="ddl"></asp:DropDownList>
        <asp:CustomValidator runat="server" ID="rfv" ControlToValidate="ddl"
            ClientValidationFunction="RequiredDropDownCheck"
            ErrorMessage="*" />
        <asp:CheckBox ID="cbTest" runat="server" Text="Check" />
        <asp:TextBox ID="FirstName" runat="server"></asp:TextBox>
        <asp:CustomValidator runat="server" ID="FirstNameVal"
            ControlToValidate="FirstName"
            ClientValidationFunction="RequiredFirstNameCheck"
            ErrorMessage="*"
            ValidateEmptyText="True" />
        <br />
        <asp:Button ID="Button2" runat="server" Text="Button" OnClick="Button2_Click" />
    </div>
    </form>

.csharpcode, .csharpcode pre
{
font-size: small;
color: black;
font-family: consolas, “Courier New”, courier, monospace;
background-color: #ffffff;
/*white-space: pre;*/
}
.csharpcode pre { margin: 0em; }
.csharpcode .rem { color: #008000; }
.csharpcode .kwrd { color: #0000ff; }
.csharpcode .str { color: #006080; }
.csharpcode .op { color: #0000c0; }
.csharpcode .preproc { color: #cc6633; }
.csharpcode .asp { background-color: #ffff00; }
.csharpcode .html { color: #800000; }
.csharpcode .attr { color: #ff0000; }
.csharpcode .alt
{
background-color: #f4f4f4;
width: 100%;
margin: 0em;
}
.csharpcode .lnum { color: #606060; }
.csharpcode, .csharpcode pre
{
font-size: small;
color: black;
font-family: consolas, “Courier New”, courier, monospace;
background-color: #ffffff;
/*white-space: pre;*/
}
.csharpcode pre { margin: 0em; }
.csharpcode .rem { color: #008000; }
.csharpcode .kwrd { color: #0000ff; }
.csharpcode .str { color: #006080; }
.csharpcode .op { color: #0000c0; }
.csharpcode .preproc { color: #cc6633; }
.csharpcode .asp { background-color: #ffff00; }
.csharpcode .html { color: #800000; }
.csharpcode .attr { color: #ff0000; }
.csharpcode .alt
{
background-color: #f4f4f4;
width: 100%;
margin: 0em;
}
.csharpcode .lnum { color: #606060; }
.csharpcode, .csharpcode pre
{
font-size: small;
color: black;
font-family: consolas, “Courier New”, courier, monospace;
background-color: #ffffff;
/*white-space: pre;*/
}
.csharpcode pre { margin: 0em; }
.csharpcode .rem { color: #008000; }
.csharpcode .kwrd { color: #0000ff; }
.csharpcode .str { color: #006080; }
.csharpcode .op { color: #0000c0; }
.csharpcode .preproc { color: #cc6633; }
.csharpcode .asp { background-color: #ffff00; }
.csharpcode .html { color: #800000; }
.csharpcode .attr { color: #ff0000; }
.csharpcode .alt
{
background-color: #f4f4f4;
width: 100%;
margin: 0em;
}
.csharpcode .lnum { color: #606060; }


(Messy, but this is what I received minus the validators – lol)

Now, the javascript in the head tag:

<script src="jquery-1.3.2.min.js" language="javascript" type="text/javascript"></script>

    <script type="text/javascript">
        String.prototype.endsWith = function(str) {
            return (this.match(str + '$') == str)
        }

        jQuery.expr[":"].asp = function(a, i, m) {
            return (id = jQuery(a).attr('id')) && id.endsWith(m[3]);
        };

        function RequiredFirstNameCheck(sender, args) {
            if ($(":asp('cbTest')").attr('checked')) {
                if ($(":asp('FirstName')").val().length == 0) {
                    args.IsValid = false;
                    return;
                }
            }
            args.IsValid = true;
        }

        function RequiredDropDownCheck(sender, args) {
            if ($(":asp('cbTest')").attr('checked')) {
                if ($(":asp('ddl')").val() == 0) {
                    args.IsValid = false;
                    return;
                }
            }
            args.IsValid = true;
        }

        $(function() {
            $(":asp('cbTest')").click(function() {
                if ($(":asp('cbTest')").attr('checked')) {
                    ValidatorEnable($(":asp('FirstNameVal')")[0], true);
                    ValidatorEnable($(":asp('rfv')")[0], true);
                }
                else {
                    ValidatorEnable($(":asp('FirstNameVal')")[0], false);
                    ValidatorEnable($(":asp('rfv')")[0], false);
                }
            });
        });

    </script>

.csharpcode, .csharpcode pre
{
font-size: small;
color: black;
font-family: consolas, “Courier New”, courier, monospace;
background-color: #ffffff;
/*white-space: pre;*/
}
.csharpcode pre { margin: 0em; }
.csharpcode .rem { color: #008000; }
.csharpcode .kwrd { color: #0000ff; }
.csharpcode .str { color: #006080; }
.csharpcode .op { color: #0000c0; }
.csharpcode .preproc { color: #cc6633; }
.csharpcode .asp { background-color: #ffff00; }
.csharpcode .html { color: #800000; }
.csharpcode .attr { color: #ff0000; }
.csharpcode .alt
{
background-color: #f4f4f4;
width: 100%;
margin: 0em;
}
.csharpcode .lnum { color: #606060; }

 

Just as a reference, I initially had “$(":asp(‘cbTest’)").change(function() {“, but IE didn’t recognize it, so I had to use the click event instead.  Not really ideal, but what can I say.

I’m sure there might be better ways to handle this, but it was interesting to see jQuery working with asp.net validators!

( More information on jQuery selectors: http://docs.jquery.com/Selectors and asp.net validation controls: http://www.codeproject.com/KB/validation/aspnetvalidation.aspx )

Advertisements

NHibernate 2.1and NHibernate Linq 1.0 Released

NHibernate 2.1 has been released

Read more here

Ayende also announces the RTM of NHibernate Linq 1.0  – this is fantastic news!

A couple of items with NH Linq to keep in mind:

This Linq release support just about anything that you can do with the criteria API. We do not support group joins or subqueries in select clauses, since they aren’t supported by the criteria API. NHibernate’s Linq support has been tested (in production!) for the last couple of years, and most people find it more than sufficient for their needs.

https://sourceforge.net/projects/nhibernate/files/NHibernate/2.1.0.GA/NHibernate.Linq-1.0.0.GA-bin.zip/download

As FYI, NHibernate.Linq includes the NHibernateContext class that supports the IUpdateable and IExpandProvider interfaces required by ADO.NET Data Services (thanks Shawn)

Silverlight 3 with RIA.NET Domain Services

 

Brad Abrams Series on SL3/RIA.NET Services

Brad Abrams has a great series of blog posts on using Silverlight 3 with RIA.NET Domain Services.  These posts highlight some of the great new features added to Silverlight 3.

Business Apps Example for Silverlight 3 RTM and .NET RIA Services July Update: Part 1: Navigation Basics
Business Apps Example for Silverlight 3 RTM and .NET RIA Services July Update: Part 2: Rich Data Query
Business Apps Example for Silverlight 3 RTM and .NET RIA Services July Update: Part 3: Authentication
Business Apps Example for Silverlight 3 RTM and .NET RIA Services July Update: Part 4: SEO, Export to Excel and Out of Browser
Business Apps Example for Silverlight 3 RTM and .NET RIA Services July Update: Part 5: Astoria, Add Service Reference and WinForms
Business Apps Example for Silverlight 3 RTM and .NET RIA Services July Update: Part 6: Data Transfer Objects (DTOs)
Business Apps Example for Silverlight 3 RTM and .NET RIA Services July Update: Part 7: ADO.NET Data Services Based Data Store
Business Apps Example for Silverlight 3 RTM and .NET RIA Services July Update: Part 8: WCF Based Data Source
Business Apps Example for Silverlight 3 RTM and .NET RIA Services July Update: Part 9: POCO and Authentication Provider
Business Apps Example for Silverlight 3 RTM and .NET RIA Services July Update: Part 10: LinqToSql

Silverlight 3 & RIA.NET Domain Services

Data Driven Apps with Silverlight 3 and RIA.NET Services
Unit Testing Business Logic in RIA.NET Services
.NET RIA Services: Get your metadata from anywhere!  – metadata vs. attributes for validation

David Poll on Activity and Navigation

David has a couple of great posts to read – I especially like the ability to load dynamic assemblies from navigation:

Silverlight 3 Navigation: Navigating to Pages in dynamically-loaded assemblies
Silverlight 3 Navigation: Navigating to Pages in referenced assemblies
Update: Displaying background activity in a Silverlight RIA application

Ruby on Rails on Windows Notes

I’ll try to tidy this up.  Some notes:

I’m a Windows .NET developer for quite some time, exploring Ruby on Rails (again)  🙂

1. go ahead and get MySql after you get rails – your need it

2. run gem install mysql   ignore the documentation errors

3. to create your rails app   :   rails –d mysql <yourAppName>

4. go the folder you ran that in (ie. c:/RailsApps/<yourAppName>) – goto the config folder database.yml file and update with your password etc…

5. after your all done, run rails script/server in the <yourAppName> folder

6. goto http://localhost:3000 

 

This link helped me  http://wiki.rubyonrails.org/database-support/mysql

Update…

7. don’t try installing 64 bit mysql or 5.1 unless your an expert  :)    I had to uninstall and install 5.0.  Then rerun the gems.  Have problem where it complained about missing libmySQL.dll.   I copied it in Ruby/bin and that solved it (I have mysql in the path, maybe I should have rebooted after that …)

But I got it to work.  Started on this tutorial: http://wiki.rubyonrails.org/getting-started/first-rails-app-walkthrough

It’s nice being able to do all this without any ide actually  🙂