Question: What is the best way to set focus to a web control in ASP .NET.
I can do it, but it's ugly. I have a web control wrapped in a web control hosted on a web page. So, if you do a view | source on the page the id is something like WrapperControl_Control_TextBox.
I've tried the "tried and true" Javascript methods of grabbing the element and setting it's focus: document.getElementByID( "WrapperControl_Control_TextBox" ).focus(); and it didn't work. I'm not sure why.
I know I could possibly do:
document.getElementById( "<%= TextBox.ClientID %>" ).focus(); too, I think. This won't work because of another totally separate error based on the fact you can't dynamically add controls to a header if there is a "<% %>" in the page. GAH.
In the "bottom-most" control, I've tried setting the focus (TextBox.Focus() in Page_Load) and that doesn't work either.
Anyway, the way that works is by simply taking the ControlsCollection of the Page, grabbing the control I need from that, getting it's collection, grabbing the next lower control and so forth.
I only have to do this seven times. So I have eight foreach loops.
Basically, my code is like this:
///////////////////////////////
// On the page
///////////////////////////////
ControlCollection controls = Controls;
foreach( Control control in controls)
{
if ( string.Equals( control.ID, "FormID", StringComparison.InvariantCultureIgnore ) )
{
ControlCollection nextControls = control.Controls;
foreach( Control nextControl in nextControls )
{
if ( string.Equals( nextControl.ID, "DivICareAboutInTheForm", StringComparison.InvariantCultureIgnor ) )
{
ControlCollection nextNextControls = nextControl.Controls;
//:
//:
//Yes, it's that bad and so forth.
//:
//:
}
}
}
}
You can use jQuery to do a search for IDs that end with your textbox name. This way you wont have to call the UniqueID server-side code. Just make sure not to have multiple controls that end with the same name
<script type="text/javascript">
$(document).ready(function() {
$('[id$=txtBox]').focus();
});
</script>
Or, you can use a Class name for the default text box.
<asp:Textbox ID="txtBox" runat="server" cCssClass="defaultTextbox" />
jquery:
$('.defaultTextbox').focus();
You can get around the "cannot add dynamic controls because a <%= %> block exists on the page" error by changing the block to use databinding syntax: <%# TextBox.ClientID %>, and manually calling Page.DataBind() in Page_Load.
If you really want to use the Page_Load method, then you could always call the SetFocus method on the Page object.
Page.SetFocus(myTextBox);
Related
I like to add a validation on a label based on its visibility, in that a submit button will raise a validation message or error if the label is not visible.
I am used to the validation controls in the Toolbox, which wont allow this functionality!
It seems as though if an asp:Label's visibility is set to false, the asp.net engine will not even put it in the DOM. So you can check in javascript, using the onclick property of the (html) button to check if the label is in the DOM or not, and use asp.net's __doPostBack() javascript function to post back to the server if it is there:
<script type="text/javascript">
function testMe()
{
var lbl = document.getElementById('lblTest');
if(lbl == null)
document.getElementById('msg').innerHTML = "Error";
else
__doPostBack('testButton');
}
</script>
<asp:Label ID="lblTest" runat="server" Visible="false" Text="Hello"></asp:Label>
<button onclick="testMe();">test</button>
To be completely honest, I thought the lbl would be undefined if the label did not exist in the DOM, but Firebug revealed it is actually null. Anyway, a couple things to note is that in order for asp.net to define the __doPostBack() method, I believe you need some control in the form that has autopostback="true", and in the code-behind you can check what caused the postback in the Page_Load method like so:
if(Request.Form["__EVENTTARGET"] == "testButton") {}
I am working on a project that requires that the programmers can add asp:hyperlinks to the pages, but I want to replace those with a custom spun asp:hyperlink which checks before render if the end user has a role or not.
So basically I need a way to tell the asp application that where it renders asp:hyperlink to actually render mycontrols:customhyperlink. Is there a way to make it so that the asp:hyperlink goes to my control library instead of System.Web.UI?
I'm going to assume/suggest that you perform the user-check in the code behind. In that case, you could simply have the two controls right next to each other and only make one visible. For example, in the web-form (aspx):
<asp:Hyperlink ID="Link1" ... />
<asp:CustomHyperlink ID="CustLink1" .../>
Then in the code-behind:
if (user.HasRole) {
CustLink1.Visible = true;
Link1.Visible = false;
}
else {
CustLink1.Visible = false;
Link1.Visible = true;
}
I have a textbox control Super1 in my MasterPage.
I am using javascript to access this control from my content page like this:
<asp:Content ID="ContentPage" ContentPlaceHolderID="ContentPlaceHolder1" Runat="Server">
<script type="text/javascript">
function Somethin() {
{
document.forms[0].elements['Super1'].value = "sdfsd";
//document.getElementById('<%=Super1.ClientID%>').value = "sdfsdf";
}
}
</script>
</asp:Content>
But while page load it says Super1 not found. How can I access Super1?
In your masterpage's onload add this code :
string script = #"<script>
function Somethin() {
document.getElementById('" + Super1.ClientID + #"').value = 'sdfsd';
}
Somethin();
</script>";
if (!Page.ClientScript.IsClientScriptBlockRegistered("somethin_script_block"))
{
Page.ClientScript.RegisterClientScriptBlock(this.GetType(), "somethin_script_block", script);
}
this will add your script to the end of the page.
EDIT : I just realized, you use your controls ID directly in your javascript code. this may cause the exception. I update your code to fix it.
I hope this helps.
You have to make sure the document has loaded, make sure to call your functions that rely on the DOM being loaded onload. E.g.:
<script type="text/javascript">
window.onload = function() {
Somethin();
}
</script>
From the sample code you posted and since you said you are using a control, check the rendered id of the control you are trying to get at. In my experience the name is something crazy like ctl100_masterpagename_namingcontainer_controlname... that needs to show up in the js as well.
Super1 might be in a different naming container (the masterpage's control collection). You either need to render out the clientid of the control in a global javascript variable during the masterpage rendering so it can be accessed by javascript in the child page or you need to get a reference to the Masterpage, find the control there and write out the client Id in your child pages javascript...
Something like...
if the text box is in its own content place holder
var txtSuper1 = Master.FindControl("ContentPlaceHolderName").FindControl("Super1") as Textbox;
or if its not in a content place holder
var txtSuper1 = Master.FindControl("Super1") as Textbox;
3rd option might be to expose the control as a property of the masterpage (not sure) - my webforms is rusty.
On the master page, declare a javascript variable for the control, e.g:
<asp:TextBox id="Super1" runat="server"/>
...
<script type="text/javascript">
var txtSuper1 = document.getElementById('<%= Super1.ClientID %>');
</script>
It's important that you use the ClientID property, because the rendered control's ID (on the client) will be different from the server control's ID (due to naming containers).
Now you can access the textbox from javascript declared in the content pages:
<asp:Content ID="ContentPage" ContentPlaceHolderID="ContentPlaceHolder1" Runat="Server">
<script type="text/javascript">
function Somethin()
{
txtSuper1.value = "sdfsd";
}
</script>
click me
</asp:Content>
BTW: in your code there are duplicate curly-braces in function Somethin() {{ ... }}
I'm sure I'm going to have to write supporting javascript code to do this. I have an autocomplete extender set up that selects values from a database table, when a selection is made, i would like it to set the ID of the value selected to a hidden control. I can do that by handling a value change on the text box and making a select call to the database, Select idCompany from Companies Where CompanyName = "the text box value";
The most important thing is to constrain the values of the text box that is the targetcontrol for the autocomplete extender to ONLY use values from the autocomplete drop down. Is this possible with that control, is there examples somewhere? is there a better control to use (within the ajax control toolkit or standard .net framework - not a third party control)?
I'm going to be trying to work out some javascript, but I'll be checking back to this question to see if anyone has some useful links. I've been googling this last night for quite a while.
Update: I did not get an answer or any useful links, I've posted an almost acceptable user control that does what I want, with a few workable issues.
No one was able to give me an answer. This has been an ongoing saga. It started when I was trying to find a solution not using drop down lists for large amounts of data. I have run into issues with this so many times in previous projects. This seems to be workable code. Now I need to know how to supply a AutoPostBack Property, and allow for some events, such as SelectedValueChanged. And due to the javascript, it will conflict with another control, if I have more than one of them on the same page. Well, that's some of the known issues I'm looking at with the code, but it's a start and definately better than looking at a hung browser for 3 or 4 minutes while the drop down is loading 30k list items.
This code is assuming there is an asmx file with the script methods GetCompanyListBySearchString and GetCompanyIDByCompanyName.
ASPX FILE
<%# Control Language="C#" AutoEventWireup="true" CodeFile="SelectCompany.ascx.cs" Inherits="Controls_SelectCompany" %>
<%# Register TagPrefix="ajaxToolkit" Namespace="AjaxControlToolkit" Assembly="AjaxControlToolkit" %>
<script language="javascript" type="text/javascript">
var txtCompanyIDHiddenField = '<%= fldCompanyID.ClientID %>';
var txtCompanyIDTextBox = '<%= txtCompany.ClientID %>';
function getCompanyID() {
if (document.getElementById(txtCompanyIDTextBox).value != "")
CompanyService.GetCompanyIDByCompanyName(document.getElementById(txtCompanyIDTextBox).value, onCompanyIDSuccess, onCompanyIDFail);
}
function onCompanyIDSuccess(sender, e) {
if (sender == -1)
document.getElementById(txtCompanyIDTextBox).value = "";
document.getElementById(txtCompanyIDHiddenField).value = sender;
}
function onCompanyIDFail(sender, e) {
document.getElementById(txtCompanyIDTextBox).value = "";
document.getElementById(txtCompanyIDHiddenField).value = "-1";
}
function onCompanySelected() {
document.getElementById(txtCompanyIDTextBox).blur();
}
</script>
<asp:TextBox ID="txtCompany" runat="server" onblur='getCompanyID()'
/><ajaxToolkit:AutoCompleteExtender runat="server" ID="aceCompany" CompletionInterval="1000" CompletionSetCount="10"
MinimumPrefixLength="2" ServicePath="~/Company/CompanyService.asmx" ServiceMethod="GetCompanyListBySearchString"
OnClientItemSelected="onCompanySelected" TargetControlID="txtCompany" />
<asp:HiddenField ID="fldCompanyID" runat="server" Value="0" />
CODE BEHIND
[System.ComponentModel.DefaultProperty("Text")]
[ValidationProperty("Text")]
public partial class ApplicationControls_SelectCompany : System.Web.UI.UserControl
{
public string Text
{
get { return txtCompany.Text; }
set
{
txtCompany.Text = value;
//this should probably be read only and set the value based off of ID to
// make certain this is a valid Company
}
}
public int CompanyID
{
get
{
int ret = -1; Int32.TryParse(fldCompanyID.Value, out ret); return ret;
}
set
{
fldCompanyID.Value = value.ToString();
//Todo: should set code to set the Text based on the ID to keep things straight
}
}
}
Thanks for your post here. It is useful, however, it is assuming that everyone knows the setup to get the webservice called by a javascript function.
Sorry to be soo newbie, but I couldn't get the webservice called from client-side.
I read this documentation: http://msdn.microsoft.com/en-us/magazine/cc163499.aspx
Furthermore, I found an interesting post that explains how to create/get a name value pair which is pretty much what you are expecting as far as I understood:
http://blogs.msdn.com/phaniraj/archive/2007/06/19/how-to-use-a-key-value-pair-in-your-autocompleteextender.aspx
Sorry if I misunderstood you, but I am just trying to guide other people that pass through the same situation.
Thanks a lot.
You can check the value of the selection by trapping on ClientItemSelected event and ensure that it is not blank.
i need to add JavaScript calls in some controls attributes, i am using master pages but in order to obtain the contentplaceholder client id i am iterating over the forms controls.
is there another way to obtain in the server side code of the content page?
foreach (Control control in this.Form.Controls)
{
if (control is ContentPlaceHolder)
{
contentPlaceHolderID = control.ClientID;
break;
}
}
If there's only few controls like this you can set up a global variable:
var contentPlaceholderId = '<%= this.ContentPlaceholder1.ClientId %>'
I do the following in jQuery:
$("*[id$='DivFullWarning']").each(function() {
// do whatever in here
});
this searches for any control that contains DivFullWarning in their ID, so you could name your ContentPlaceHolder "contentPlaceHolder" and then no matter how much asp.net muck's with your id, you'll still be able to grab it client side.
You could just expose the content placeHolder somewhere so you don't have to loop through all the controls.