Setting a JQuery DatePicker to a .NET TextBox in a FormView

Using a FormView control on your ASP.NET WebForms page can be handy to quickly put together a functional page. However, if you are mixing in client-side script such as a JQuery DatePicker control, you should address the naming changes that the FormView control causes.

Hard-Coding the HTML Id (Not the Best Option)

If you are really in a rush, then you could just hard-code the combined id that ASP.NET generates for your control in the FormView by looking at the control’s Id in your HTML source. This isn’t the best practice for the long haul, though, because the automated naming convention for controls has been known to change between versions of .NET.

Using the ClientId Method

The best idea is to set your control id dynamically from .NET in your JQuery using the .NET ClientId method. Using ClientId will get you the fully qualified Id of your control so you don’t have to worry about it randomly changing in future based on a .NET update.

In the code example below I’m including the source code for a simple C# Web Form that uses ClientId to dynamically identify the control to JQuery. A little further down I show how to do the exact same thing using VB.NET. In either language, you need to get a reference to the control by referencing it in the object hierarchy. In this example the control called tstADt resides inside a FormView called fvShowingAForm that sits directly in the page form, so addressing the control can be done in C# as follows:

 ((TextBox)this.fvShowingAForm.FindControl("txtADt")).ClientID

Some Details About the Example Code Below

In the example code below, the top two input boxes are connected to the DatePicker outside of the FormView control. The first text box is a simple HTML object, which the second is an actual Text Box WebForm control. The third text input box is an example of hooking up a DatePicker to a Text Box WebForm control located inside the Insert template of the FormView control.

One thing to note is that since the third text box will only appear when the Insert template of the FormView control is shown, we will only want to register the JQuery code to associate the DatePicker when the Insert template is active. We can do this by placing the JQuery within a separate script block that is located in the Insert template of the FormView rather than in the page header.

The C# Example Code

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<script runat="server">
</script>
<html xmlns="http://www.w3.org/1999/xhtml">
<head id="Head1" runat="server">
 <title></title>
 <link rel="stylesheet" href="http://code.jquery.com/ui/1.10.1/themes/base/jquery-ui.css" />
<script src="http://code.jquery.com/jquery-1.10.2.js"></script>
<script src="http://code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
<script>
 $(function () {
 $("#datepicker").datepicker();
 $("#TextBox1").datepicker();
 });
 </script>
</head>
<body>
 <form id="form1" runat="server">
 <input type="text" id="datepicker">
 <asp:TextBox ID="TextBox1" runat="server"></asp:TextBox>
 <asp:FormView ID="fvShowingAForm" runat="server" DefaultMode="Insert" >
 <InsertItemTemplate>
 <!-- BEGIN INSERT ITEM TEMPLATE -->
 <script>
 $(function () {
 $('#<%= ((TextBox)this.fvShowingAForm.FindControl("txtADt")).ClientID %>').datepicker();
 });
 </script>
<table>
 <tr><td>
<asp:TextBox ID="txtADt" runat="server" Width="100px"></asp:TextBox></td></tr>
 <!-- END INSERT ITEM TEMPLATE -->
 </InsertItemTemplate>
 </asp:FormView>
 </form>
</body>
</html>

Make sure that you don’t make my mistake of referencing older JQuery libraries. I was referencing the JQuery 1.7 UI library, which resulted in a blank box on my page when it first loaded. As soon as I updated this to the JQuery UI 1.10.1 library everything magically worked, and I was annoyed at having spent time trying to debug my code when it was actually a problem with the version of JQuery that I was referencing.

The Vb.NET Example Code

Here is the same page with code in VB.Net

Notice that to properly cast the control to its type we use the VB-specific DirectCast method.

<%@ Page Language="VB" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<script runat="server">
</script>
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
 <title></title>
 <link rel="stylesheet" href="http://code.jquery.com/ui/1.10.1/themes/base/jquery-ui.css" />
<script src="http://code.jquery.com/jquery-1.10.2.js"></script>
<script src="http://code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
<script>
 $(function () {
 $("#datepicker").datepicker();
 $("#TextBox1").datepicker();
 });
 </script>
</head>
<body>
 <form id="form1" runat="server">
 <input type="text" id="datepicker">
 <asp:TextBox ID="TextBox1" runat="server"></asp:TextBox>
 <asp:FormView ID="fvShowingAForm" runat="server" DefaultMode="Insert" >
 <InsertItemTemplate>
 <!-- BEGIN INSERT ITEM TEMPLATE -->
 <script>
 $(function () {
 $('#<%= DirectCast(Me.fvShowingAForm.FindControl("txtADt"), TextBox).ClientID %>').datepicker();
 });
 </script>
<table>
 <tr><td>
<asp:TextBox ID="txtADt" runat="server" Width="100px"></asp:TextBox></td></tr>
 <!-- END INSERT ITEM TEMPLATE -->
 </InsertItemTemplate>
 </asp:FormView>
 </form>
</body>
</html>
Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s