How do I put a hint/placeholder inside a asp:TextBox? When I say a hint I mean some text which disappears when the user clicks on it. Is there a way to achieve the same using html / css?
The placeholder attribute
You're looking for the placeholder attribute. Use it like any other attribute inside your ASP.net control:
<asp:textbox id="txtWithHint" placeholder="hint" runat="server"/>
Don't bother about your IDE (i.e. Visual Studio) maybe not knowing the attribute. Attributes which are not registered with ASP.net are passed through and rendered as is. So the above code (basically) renders to:
<input type="text" placeholder="hint"/>
Using placeholder in resources
A fine way of applying the hint to the control is using resources. This way you may have localized hints. Let's say you have an index.aspx file, your App_LocalResources/index.aspx.resx file contains
<data name="WithHint.placeholder">
<value>hint</value>
</data>
and your control looks like
<asp:textbox id="txtWithHint" meta:resourcekey="WithHint" runat="server"/>
the rendered result will look the same as the one in the chapter above.
Add attribute in code behind
Like any other attribute you can add the placeholder to the AttributeCollection:
txtWithHint.Attributes.Add("placeholder", "hint");
Just write like this:
<asp:TextBox ID="TextBox1" runat="server" placeholder="hi test"></asp:TextBox>
<asp:TextBox runat="server" ID="txtPassword" placeholder="Password">
This will work you might some time feel that it is not working due to Intellisence not showing placeholder
Adding placeholder attributes from code-behind:
txtFilterTerm.Attributes.Add("placeholder", "Filter" + Filter.Name);
Or
txtFilterTerm.Attributes["placeholder"] = "Filter" + Filter.Name;
Adding placeholder attributes from aspx Page
<asp:TextBox type="text" runat="server" id="txtFilterTerm" placeholder="Filter" />
Or
<input type="text" id="txtFilterTerm" placeholder="Filter"/>
asp:TextBox ID="txtName" placeholder="any text here"
Related
I have a code which I have to use HTML elements instead of ASP.NET elements. So because I want to have access to the elements from CodeBehind I've set all of their attributes to runat=server.
As you know ASP.NET changes the name attribute of elements to something like CT100$MainContent$IDNameOfThatElement. How can I prevent ASP.NET to change it? Cuz I have to have some other names because of JQuery stuff...
For example ASP.NET changes the name attribute from required to CT100$MainContent$PaymentCode in the following code:
<div class="field">
<input type="text" runat="server" name="required" id="PaymentCode" />
</div>
Thanx in advance.
You have to add ClientIDMode="Static"
Example:
<asp:Panel ID="myPanel" runat="server" ClientIDMode="Static">
</asp:Panel>
As far as I know you can't override the name attribute without jumping through some hoops. What you can do is create a controlAdapter that can control which attributes will be rendered and how.
Have a look at this answer for an idea about how to accomplish your goal.
I would like to add a default value for an asp textbox that looks like this
<asp:TextBox ID="Title" runat="server" CssClass="textEntry" ClientIDMode="Static"><xsl:value-of select="oohru/form/title"/></asp:TextBox>
Reason being is the page called is an xml page which loads this page as the stylesheet. The XML page once on the client side would transform that xsl select into the appropriate value [Which is an XML element from a previous cross page post].
Of course it ends up escaping it to look like
<input class="textEntry" id="Title" value="<xsl:value-of select="oohru/form/title"/>" name="ctl00$RightColumn$Title" type="text">
and the text box instead of having the value contained in the value-of select contains the actual value-select statement since it is escaped.
I tried setting the value in the pageload and got the same results and I tried turning off ValidateRequest neither worked.
Try
<xsl:value-of select="oohru/form/title" disable-output-escaping="yes"/>
Edit:
<asp:TextBox ID="Title" runat="server" CssClass="textEntry" ClientIDMode="Static"><xsl:value-of select="oohru/form/title"/></asp:TextBox>
To become:
<asp:TextBox ID="Title" runat="server" CssClass="textEntry" Text="{oohru/form/title}" ClientIDMode="Static"></asp:TextBox>
I am having a problem with the asp.net multi line textbox
<asp:TextBox ID="Oohrl"
runat="server"
CssClass="textEntry"
ClientIDMode="Static"
Text="{/oohru/form/oohrl}">
</asp:TextBox>
This works fine with text= when the page loads it puts the appropriate value in there from the XML file
However the following does NOT do that
<asp:TextBox id="Description"
TextMode="MultiLine"
Columns="50"
Rows="4"
runat="server"
ClientIDMode="Static"
Text="{/oohru/form/desc}">
</asp:TextBox>
it just puts {/oohru/form/desc} as the literal text inside of the textbox. The multi line box renders as a textarea vs an input in the first example.
Below is how the xhtml is constructed on the browser
This is the one that works, where asdf IS the proper value that it should display
<input class="textEntry"
id="Oohrl"
value="asdf"
name="ctl00$RightColumn$Oohrl"
type="text">
This is the one that doesn't
<textarea id="Description"
cols="50"
rows="4"
name="ctl00$RightColumn$Description">
{/oohru/form/desc}
</textarea>
I did also try using my own textarea with runat="server" and another without that, it still won't put a value in . Is there a reason xslt won't render a value into a text area??
You can use Ajax TextBoxWaterMark Control to solve this issue. You need not use classes for this.
everything which you write in
double-course for text property, it
shown as default text for that ,so
you are getting like that
see the link below might it will help
here
When I create a form, I try to make accessibility a top priority, but the output from asp .NET negates some of this. For example, when I set a label tag for an input tag, I create it a such:
<label for="frmFirstName">First Name<span class="required">*</span></label>
<asp:TextBox id="frmFirstName" CssClass="textbox" runat="server" />
But, when the HTML is output from the page, it is output as:
<label for="frmFirstName">First Name<span class="required">*</span></label>
<input name="ctl00$phMainContent$frmFirstName" type="text" id="ctl00_phMainContent_frmFirstName" class="textbox" />
This is a problem, as now the label is no longer tied to the input element. Is there a way to force .NET to output the exact id I set for the input field? I shouldn't have to use Javascript to correct something like this.
If you use ASP.Net 4 you can set the ClientIDMode attribute of the control to static. This will let it keep the value of the ID tag when rendered.
Use the asp:Label element and point its AssociatedControlId property to your textbox.
<asp:Label ID="lblFirstName" runat="server" AssociatedControlId="frmFirstName">First Name<span class="required">*</span></asp:Label>
<asp:TextBox id="frmFirstName" CssClass="textbox" runat="server" />
That should output the correct HTML for you.
In addition to the AssociatedControlId and <%= control.ClientId %> solutions, if your control (in this case, "frmFirstName") is guaranteed to be the only control with that ID on the page, then you can set the ClientIDMode property of the control to "Static", which will mean that ASP.NET will not munge the ID in the rendered HTML.
For example:
<label for="frmFirstName" runat="server" ID="lblFirstName">First Name</label>
<asp:TextBox runat="server" ID="frmFirstName" ClientIDMode="Static" />
will render as
<label for="frmFirstName" id="some$aspnet$id$lblFirstName">First Name</label>
<input type="text" id="frmFirstName" />
This will also make it easier if you happen to need to refer to it from Javascript, since it can be a pain to render ASP.NET's auto IDs in Javascript (as far as I know, it's impossible to do in a seperate .js file, you'd need to embed the JS on the page and use <%= control.ClientID %>).
See more about ClientIDMode here: http://msdn.microsoft.com/en-us/library/system.web.ui.control.clientidmode.aspx
You can use the ClientId property. This is what will be output as the control Id in HTML and what you can use client side to reference the rendered element:
<label for="<%:frmFirstName.ClientId%>">First Name<span class="required">*</span></label>
<asp:TextBox id="frmFirstName" CssClass="textbox" runat="server" /
Note:
<%:%> is new with ASP.NET 4.0 - you will need to use <%=%> if on .NET 3.5 and before.
Edit:
Just to add that ClientId is the way to go when referencing the control from Javascript.
I really like the HTML tag which makes it really easy to see which label stands for which input element by checking its 'for' attribute. You know, something like:
<label for="txtInput"> Enter your name</label>
<input type="text" id="txtInput" />
Is it possible to do something similar in asp.net Label control so that I can see it stands for what input control? I could not see an attribute for that. Without extending the control?
Thanks!
http://msdn.microsoft.com/en-us/library/system.web.ui.webcontrols.label.associatedcontrolid.aspx
<asp:label AssociatedControlID="textbox1" runat="server" id="lblOne" />
<asp:textbox id="textbox1" runat="server" />
Not tested but along those lines...
If you set the AssociatedControlID property of the <asp:Label> control it will write out an HTML <label> instead of a <span>
AssociatedControlID works in .net 2+ in earlier versions you need to do something like the following:
<label for="<%=textbox1.ClientID %>">label text</label><asp:textbox id="textbox1" runat="server" />