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>
Justin Cooney 
Justin, yet again you have helped me solve a problem I’ve been wrestling with for a couple of months now. I can’t thank you enough for the info you’ve posted, it’s been very effective for me. The clear and easy descriptions are excellent! Thank you!
Hi, thanks for letting me know that some of the info on this site has been helpful to you, I am glad to hear it :)