This is a strange one to explain but hope I make sense.
Our organisation has a library of custom controls that we use in our solutions. One example of these controls is a textbox combined with a set of validators which can be configured appropriately by its properties set in the markup.
I now have a problem when using this control in (which I beleive to have narrowed it down) a TabContainer.
If I wanted to use the following markup in the container:
<scc:TextBox ID="txtEmailAddr" runat="server" CssClass="input EmailAddress" EnforceEntry="EmailAddress"
ErrorMessage_RequiredFieldNotCompleted="" ErrorMessage_ShowExclamation="true"
MaxLength="150" ShowErrorMessageBelow="false" Label="Email Address " />
When I save or reload the .aspx markup it then renders the following markup for the same control:
<scc:TextBox ID="txtEmailAddr" runat="server" CssClass="input EmailAddress" EnforceEntry="EmailAddress"
ErrorMessage_RequiredFieldNotCompleted="" ErrorMessage_ShowExclamation="True"
MaxLength="150" ShowErrorMessageBelow="False" Label="Email Address "
ClientSidePreventInvalidChars="True" EnableClientScript="True"
EnfoceOnPaste="False" EnforceMaxLengthWithRXOnMultiline="True"
EnforceOnPaste="False" EnforceSpaceInPostcode="True"
ErrorMessage_InvalidFormat="Email Address : Please enter a valid email address"
ErrorMessage_NumericValueInvalidOrOutOfRange="Email Address requires a number to be entered in the range to ."
GuidanceText="" GuidanceText_RenderInMouseoverPanel="False"
JavascriptURL="~/Include/TextBoxMaximumLength.js" LabelBold="False"
LabelCSSClass="" MaxValue="9999999" MinValue="-9999999" Read_Only="False"
RememberAnswer="False" RenderInParagraphs="True"
RenderRequiredTextForRequiredFields="True" Required="True"
RequiredField_InitialValue="" Rows="0" ShowMaxLength="False" Text=""
TextBox_TabIndex="0" TextboxSkinID="" TextMode="SingleLine"
TooltipPopup_BodyText="" TooltipPopup_TooltipText="(guidance)"
ValidationGroup="" ValidationExpression="" />
This would not be a problem other than the properties that are now being rendered in the markup are overriding default functionality of the actual control. In this case the default Email Address regular expression is being ignored because the property 'ValidationExpression' is being set to an empty string!
Again I could place the default regex in that property, but I would just like to understand why the markup is behaving in this manner?
Thanks.
Get the code for the AjaxContolToolkit and step through it to see why all properties are rendered. You can adjust that code as you need and compile the dll and use that. From personal experience, that is the only way I have found use for the Toolkit because of behaviors like you describe.
Related
Situation: I have been creating webpages in HTML5/CSS3 & Javascript using Sublime 2 text editor for a year, however a college course now requires me to use Asp.Net and Visual Studio 2010. I do not use the designer because I am proficient at doing things by hand, however I find that writing asp: inside every element is time consuming and causes syntax errors when applied to some HTML 5 tags and not others.
Example HTML 5: <button id="btn" type="submit" value="Button"/>
Example Asp.net: <asp:Button ID="Button1" runat="server" Text="Button" />
Question: Can the asp: portion be omitted without effecting anything or is it required for IIS or the C# back-end functionality? What about runat="server" can that be omitted?
Google has come up dry regarding my inquiry, so any help is appreciated.
you simply cannot remove either of the two
but hear me out why, because I have a feeling you are not familiar with ASP and therefor are mistaking the meaning of the asp: and the runat="server" syntax.
first: runat="server"
this property on an element, tells the the compiler that this is actually a server side control
so a <button/> is not the same as an <button runat="server"/>
the first one is pure html, while the second one is a control, which can be bound to on the server side. .Net will give it a clientID (not to be mistaken by the ID you have to give it yourself).
second: asp:
this is a prefix, on certain elements, that tells the compiler these are ASP controls (the default controls given by the ASP.net framework). These include Buttons, TextBoxes, DropDownLists, ...
do not mistake 1 of these with a html element.
an <asp:Button id="myAspButton" runat="server"/>
is not the same as a <button id="myHtmlButton"/>
the first, is a server side control, which can be bound to (see it's runat="server" attribute), and this control renders to the browser as a <input type="submit"/> for example.
you could alter the rendering of the asp.net button class to make it return something entirely differnt if you wish.
and you are also not limited to using asp.net classes.
you can create your own controls, and put them in a custom created library
you could give those your own prefix.
if I created such a custom control, I could register a prefix for it in the web.config file,
and thus I could create a custom button extending from the original one (but with a default label in front...
<myc:CustomButton ID="myButton" Text="myButton" Label="myLabel" runat="server"/>
which could render into:
<label>myLabel</label>
<button ID="*******">myButton</button>
the asterisks are symbolizing the Unique ID it will get from the .net framework
if you want to know more on custom controls, or extending default controls
here is a step by step explanation to create custom controls, or extend from a TextBox control.
it also shows how you add a custom prefix for your controls (in the this case 'cc')
you can find more info here
The runat="server" part is required to tell .NET that it will have to render a button there (which will contain .NET specific ID for processing upon POST). Not too familiar with web forms (I started with MVC), but I would assume that the asp: part is to help distinguish between server controls and standard HTML markup.
Why not try removing it and if it breaks something, then you know it's needed. For instance if the button doesn't show up after removing it, then obviously the .NET markup parser needs it to be there in order to know that it is a place holder for a server control.
Site will exclusively be used on mobile devices. So for fields requiring only numeric input, I want to bring up the numeric keypad. I can successfully do this by using an html input element with the type set to tel. I want to add an asp:RequiredFieldValidator to this field and based on MSDN.
I need to set the input to runat="server". When I do this, I get this error;
tel is not a valid type for an input tag.
If I remove the runat="server", I get
Unable to find control id Contract referenced by the ControlToValidate property of ''
Here is my code:
<input type="tel" runat="server" id="Contract"></input>
<asp:RequiredFieldValidator runat="server" ControlToValidate="Contract"
ValidationGroup="IfOnRent" Text="*"
ErrorMessage="Contract Required">
</asp:RequiredFieldValidator>
Am I just out of luck and have to code my own validations?
You may want to leave "type" undeclared in your code "front". You can set this in the code behind (maybe in the Page_Init or Page_Load):
this.Contract.Attributes.Add("type", "tel");
If you have Microsoft .NET Framework 4 Reliability Update 1 (KB2533523) installed, than TextBox accepts new html5 input types (you would need it for UpdatePanel to recognize them on postback too).
Or you can just inherit HtmlInputText in your own control (any .net version - any input type):
[ToolboxData("<{0}:Input runat='server' />"), Themeable(true)]
public sealed class Input: HtmlInputText { }
If you are using C#
Contract.Attributes["type"]="tel"
Writing inline types for html inputs may produce parse error in .net. So add the above line of code in your PageLoad()
you can use
Make sure that the submit button has the same validationgroup property value as the requiredfieldvalidator
As I understand it, the <input type=email> element in HTML5 will render as a simple text field in browsers that do not support the tag. On other browsers it will render properly, like on the iPhone it will bring up the e-mail keyboard layout.
I’d like to use this in a project but my input fields are <asp:TextBox> controls. How can I use the HTML5 element but still access its data server-side like the rest of my fields?
There is an update for .NET framework 4 which allows you to specify the type attribute
http://support.microsoft.com/kb/2468871.
See feature 3 way down the page
Feature 3
New syntax lets you define a
TextBox control that is HTML5
compatible. For example, the following
code defines a TextBox control that is
HTML5 compatible:
<asp:TextBox runat="server" type="some-HTML5-type" />
you can try adding the attributes manually, like:
TextBox1.Attributes["type"] = "email";
TextBox1.Attributes["type"] = "url";
TextBox1.Attributes["type"] = "number";
Sorry I'm a bit late to the party, though I think that others can benefit from what I did. I have a page which is HTML 5 though we still have .NET 3.5. We wanted to keep the .NET element, though have the type change to email. I've tried several methods (including Milox above) to no avail, though the one which worked for me was the following: I added a JavaScript property to the element itself inline (when I put it in a script tag it wouldn't pick up for some reason...)
Here is what your tag would look like if you use my changes:
<asp:TextBox runat="server" type="email" onfocus="this.type='email'"/>
Eli
Whether or not it is accessible as a server control, you should be able to access the HttpRequest.Form collection and retrieve the value. No matter what the browser does with the tag, it has to submit a string to the server.
in your .aspx file add
<input type="text" required autofocus placeholder="Email Address"
class="txt-input txt-input-username" ID="myTextBox" runat="server"/>
in your Code Behind .cs
myTextBox.Attributes["type"] = "email";
This Worked For Me
You need to create your own custom control and override the Render routines. Feel free to use either the source code or DLLs
I'm adding multi language support to a prototype web site. The site was developed using html lables which I could multilanguage using asp:literal or I could change them all to asp:labels as shown below.
<asp:label ID="lblAddress1" runat="server" Text='<%$ Resources:lblAddress1 %>' /></br>
<label><asp:Literal ID="Literal1" runat="server" Text="<%$ Resources:lblAddress1 %>"></asp:Literal></label>
Web stuff isn't my area of expertise and the guys here don't think there is any advantage one way or the other. What would you choose and why?
<asp:Literal>
Use this control as a placeholder for any text you wish to insert in the page. The output will not be wrapped in any html markup tags (simplest).
<asp:Label>
Use this control in the same way as the , however, This control will wrap the text in html tags. These span tags allow the control to have additional properties (css styling etc.) which can be leveraged.
<label>
This html tag has semantic value in a page and is used to associate form elements with their description.
<label for="SaveLoginName">Remember Me:</label>
<input type="checkbox" id="SaveLoginName" />
A browser can use this info to provide additional accessibility features such as enabling clicking text to toggle checkbox value.
Each of these have appropriate usage scenarios.
Seems to be a matter of taste. Although I think the second option may add a little weight to the page because literals are usually wrapped in <span>
The following .NET 3.5 code, placed in an aspx file, will trigger a JavaScript error when the page is loaded (for users who have JavaScript enabled):
<noscript>
<asp:TextBox ID="txt" runat="server"></asp:TextBox>
<asp:RequiredFieldValidator ID="txt_RequiredFieldValidator" runat="server"
ControlToValidate="txt"></asp:RequiredFieldValidator>
<asp:Button ID="btn" runat="server" Text="Button" />
</noscript>
The error happens because the JavaScript generated by the ASP.NET validator control does not contain a null check on before the second code line below:
var ctl00_body_txt_RequiredFieldValidator =
document.all ?
document.all["ctl00_body_txt_RequiredFieldValidator"] :
document.getElementById("ctl00_body_txt_RequiredFieldValidator");
ctl00_body_txt_RequiredFieldValidator.controltovalidate = "ctl00_body_txt";
Can anyone suggest a workaround to this?
Footnote: Why am I doing this? For my non-JavaScript users I am replacing some AJAX functionality with some different UI components, which need validation.
You should add the following to the RequiredFieldValidator:
enableclientscript="false"
Seeing as you are using these in <noscript> tags, there is no point in supplying client side vaildation of the controls - they are only going to display if JS is turned off.
This will force the validation to happen (automatically) on the server side for you.
Just make sure you call "Page.IsValid" before you process the response.
See BaseValidator.EnableClientScript for more details.
The javascript is looking for an element contained in the noscript? AFAIK there's no clean way to detect script support from the server side.
I think you'll need to build in a redirect (I've seen this done with a meta-refresh in a header noscript if you don't mind a validation failure) to push noscript users to a "please turnscript on page" or do some surgery to loosen up the validation/control binding which may take some amount of wheel reinventing. This is one of those areas where asp.net's tight coupling between controller and view really punishes.