Skip to main content

Use JavaScript on Controls in a GridView, DetailsView or FormView (even in a MasterPage with an UpdatePanel)

Ever want to use JavaScript on a Textbox inside a DetailsView? It can be done, you just need to overcome two issues. The first is that .Net will change the ID from "MyTextBox" to something like "ct100_ContentPlaceholder1_DetailsView1_MyTextBox". The second is that these controls may exist only in Edit or Insert mode.

The first thing we want to do is get the ID of MyTextbox that gets sent to the browser. Since MyTextbox only exists when we're editing or inserting, we need to use the PreRender event. We check to make sure we are in Edit/Insert mode and then use FindControl to get a handle on the textbox. Next we use the ScriptManager RegisterHiddenField method to register a hidden control that has the ClientID as its value.

Protected Sub DetailsView1_PreRender(ByVal sender As Object, ByVal e As System.EventArgs) Handles DetailsView1.PreRender
    If DetailsView1.CurrentMode = DetailsViewMode.Edit Or DetailsView1.CurrentMode = DetailsViewMode.Insert Then
        Dim txt As TextBox = DetailsView1.FindControl("MyTextbox")
        ScriptManager.RegisterHiddenField(DetailsUpdatePanel, "MyTextboxClientID", txt.ClientID)
    End If
End Sub

There's several important things to notice here. First, ScriptManager is used to register the hidden field since I'm assuming you are in an UpdatePanel. Look at ClientScript to add the hidden field if you're not using an UpdatePanel. Also, notice that I pass the UpdatePanel as the first parameter instead of the page.

Second, we dynamically register the hidden field. We don't use a HiddenField control because it will suffer from the same naming issue in a MasterPage.

Third, the hidden field is named MyTextboxClientID. We'll need that name in the JS to get our control. The following function takes the name and returns the control. If the hidden field or the control aren't present, it returns null. This keeps an error from getting thrown when we're not in Edit/Insert mode.

// Gets a contained control from a
// hidden field.
// name - The name of the hidden field
//        that has the ClientID name.
function GetContainedControl(name)
{
    var hdn = document.getElementById(name);
    if (hdn!=null)
        {return document.getElementById(hdn.value);}
    return null;
}

Here's how to call GetContainedControl. Notice we pass the name of the hidden field and not the name of the control we want to find. We check to see if it's null and we're ready to go.

var txt = GetContainedControl("MyTextboxClientID")
if (txt != null)
{
    // Do stuff here
}

Lastly, I'd recommend using constants for these names so that you don't get a name mismatch between the code behind and the JS. Here's the revised lines to use a constant.

Protected Const MyTextboxClientID As String = "MyTextboxClientID"

Protected Sub DetailsView1_PreRender(ByVal sender As Object, ByVal e As System.EventArgs) Handles DetailsView1.PreRender
    If DetailsView1.CurrentMode = DetailsViewMode.Edit Or DetailsView1.CurrentMode = DetailsViewMode.Insert Then
        Dim txt As TextBox = DetailsView1.FindControl("MyTextbox")
        ScriptManager.RegisterHiddenField(DetailsUpdatePanel, MyTextboxClientID, txt.ClientID)
    End If
End Sub

And the JavaScript.

var txt = GetContainedControl('<% = MyTextboxClientID %>')
if (txt != null)
{
    // Do stuff here
}

Hope that helps!!!!

Comments

Anonymous said…
just what I needed. thanks!
Anonymous said…
You saved me!
Thanks
Fred said…
8 years later and you've just saved me with this as well! You're my hero! Haha.

Popular posts from this blog

Migrating Legacy Apps to the New SimpleMembership Provider

Asp.Net MVC4 uses the new SimpleMembership provider, changes the table structure and adds a new hashing algorithm. The reasons for the changes can be found in this article by Jon Galloway. This article shows how to migrate your existing apps to the new provider.I’m assuming that you stored your passwords in the unrecoverable SHA-1 format. If you didn’t, then you’ll have to change a couple of things. All of my apps are done this way so… I’m also assuming that you have created the basic skeleton of the new app and ran it once so the correct tables will be created.First, we’ll look at the new tables. Previously, we had all of those aspnet_xxxxxx tables. Here’s the new ones.UserProfileContains all of the elements relevant to the user. This is a combination of the aspnet_Users table and the aspnet_Profiles table.webpages_MembershipStores the password info when not using OAuth, Live, Facebook, etc. This table is somewhat of a match to the aspnet_Membership table.webpages_OAuthMembershipStor…

JavaScript function to automatically add slashes to date

In converting an old Windows app to a browser app, the user wanted to be able to enter dates without the slashes. Here's a simple jscript: 1:// Function to convert short date string (MMddyy) 2:// or (MMddyyyy) to a date string (mm/dd/yyyy). 3:// txtBox is the actual textbox control 4:// with the value to be processed. 5:function FixShortDate(txtBox) { 6:if (txtBox == null) { 7:return'' } 8: 9:var re = new RegExp(/(\d{6})(\d{2})?/); 10: 11:if (re.test(txtBox.value)) 12: { 13:if (txtBox.value.length == 8) { 14: txtBox.value = txtBox.value.substring(0, 2) + '/' + txtBox.value.substring(2, 4) + '/' + txtBox.value.substring(4, 8) 15: } 16: 17:if (txtBox.value.length == 6) { 18:if (txtBox.value.substring(4, 6) < 20)

Get Asp.Net Profile properties from Sql

Ever wanted to include the profile information from an Asp.Net profile in a query? It’s not that hard once you understand the structure. I’ve written a little function that does all the work. Note: I’m using Sql Server as my repository.

First we need to understand how the profile data is stored. Looking at the aspnet_Profile table, we can see that it stores the information in two columns: PropertyNames and PropertyValuesString.

Looking at PropertyNames we can see that it has a basic structure of Property Name, Data Type, Starting Position and Length. For example, in the string “FirstName:S:0:4:Phone:S:4:10:LastName:S:14:5:” we can see that FirstName is of type string, starts at position 0 and has a length of 4. Notice the zero base for the starting position, we need to correct for that in our function. This means in the PropertyValuesString “John2175551212Smith”, we would start with the first position and proceed 4 characters to get the name.

You might be thinking …