We're working with a third party system and we need to modify some ASP.Net controls so that they have a specific token added to their HTML id attribute (so the third party system can identify them from the request), as well as HTML comments before and after the controls' output.
Basically, we need to be able to take say a TextBox (say for "Employee First Name") and dynamically change its output to something like this:
<!-- FIZZBOT_START -->
<input id="EmployeeFirstName_FIZZBOT_" ... />
<!-- FIZZBOT_END -->
We would ideally like to implement this so that the developers only have to do something like this:
<xxx:FizzbotWrapper ID="MyWrapper" runat="server">
<asp:TextBox ID="EmployeeFirstName" runat="server" />
</xxx:FizzbotWrapper>
Is there any way to get such an interface to produce such output, while still being able to:
maintain control state across requests
work properly with Validators
work properly with UpdatePanels
allow developers to refer to the original ID in the codebehind for readability (instead of having to refer to "EmployeeFirstName_FIZZBOT_"
work with out-of-the box ASP.Net controls like TextBox and not just controls we've derived.
I've tried a few ways of doing this (the technique that was the most promising was this, but I ran into some trouble getting it to work with validators, and it wouldn't work at all with controls we don't have the source code to).
Related
Climbing the learning curve for creating asp.net webform pages with Visual Studio 2010 (VB).
I had written a fairly complicated .aspx page with form controls, including textboxes and buttons, etc. I never thought to place the form controls inside a <form> block. Instead, all the controls include the "runat" directive; for example, <asp:textbox id="txtUserName" runat="server"> etc. In the codebehind I access the data with strUserName = txtUserName.text. This seems to work just fine.
Now, though, I received some form pages from our contracted "professional" web developer wherein the form code is all enclosed in a <form runat="server">block, and none of the controls include the runat directive. Accessing the data from these controls is a little different: It uses the <input type="text name="txtUserName" id="txtUserName" /> method, and accessing the data in the codebehind
is strUserName = Request.Form("txtUserName").ToString.
My method seems to work fine, but I am wondering if there is a difference in behavior or reliability between my method and his. Even though my way works, am I doing it wrong?
Mine is based on online research I have done to learn this stuff, and I don't remember seeing anything that looked like his. However, just today I see places that are saying that on .aspx pages, form controls MUST be enclosed in a <form> block (i.e., this page at w3schools.com).
Can anyone clarify this for me?
Thanks for your help!
You're not doing it incorrectly (you're using my preferred approach) but your inputs should still be in an enclosing Form tag.
He's using HtmlControls (System.Web.UI.HtmlControls namespace) and you're using web controls (System.Web.UI.WebControls.) Your controls provide better functionality on the server (viewstate and accessing via server code) and his approach is lighter weight.
MSDN documentation states with regard to the ClientIdMode:
Static The ClientID value is set to the value of the ID property. If the control is a naming container, the control is used as
the top of the hierarchy of naming containers for any controls that it
contains.
source: http://msdn.microsoft.com/en-us/library/system.web.ui.control.clientidmode%28v=vs.100%29.aspx
However, i am not finding the "top of the hierarchy" business to be the case. For example, I have a usercontrol:
<uc1:WidgetsListControl runat="server" id="WidgetsListControl" ClientIDMode="Static" />
For good measure, I set the clientidmode in the control source as well although I'm not sure which one is needed:
<%# Control Language="C#" AutoEventWireup="true" CodeBehind="WidgetsListControl.ascx.cs" Inherits="WebApplication1.WidgetsListControl" EnableViewState="false" ClientIDMode="Static" %>
Within the user control, I have a textbox:
<asp:TextBox ID="testTextBox" runat="server" />
My expectation is that the text box would be named something like WidgetsListControl$testTextBox
However what I find upon view source is:
<input name="ctl00$MainContent$WidgetsListControl$testTextBox" id="testTextBox" type="text"/>
What am I missing? Is there a way to achieve what I'm looking for (shorter ids) without setting 'static' on every control within the user control?
EDIT:
Actually after looking closer, I am finding that the ID attribute is working as described in the MSDN - however the name attribute is still the full concatenation of the naming-container hierarchy.
Given a site of high complexity, the names and IDs of these controls start to take up the majority of the bandwidth (markup size). I can't seem to find any good workaround to slim down the markup in this regard.
You must have this control within a Panel or something with runat="server" and the custom control itself is a naming container for its children. If you want identifiers to be how you name them with no change, you'll want to use the Predictable (IIRC) client id mode.
Note: though looking at the documentation for Predictable this doesn't seem to be the case, I'm sure it's what I've always used to get 'clean' .NET identifiers in ASP.NET.
Further, if you want to apply the ClientIDMode globally, then specify it in the web.config file in the attribute of the <pages> element.
ClientIdMode="Static" does work as described by Microsoft.
Make sure your looking at the id in the generated source, not the name.
That's the mistake I made.
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.
I want to be able to do something like this
<test:TabControl id="" runat="server"....>
<ItemTemplate>
<tabItem label="tab1" />
<tabItem label="tab2" />
</ItemTemplate>
</test>
The idea being here is that the only acceptable items in "ItemTemplates" are the tabitem types. There are many asp.net controls that use this, for example the ScriptManager class only allows you to specify certain types of objects under its various collections. Maybe thats the key to this.. I want to add a collection as opposed to a template.
The idea is that in code I will then iterate over each "tabItem" and create the tab as I want it to look (probably rendering div's etc).
Ive had a look at most of MSDN link on how to create templated controls but it doesnt seem to do exactly what I want it to.
Would be grateful for some assistance.
You need either a templated control or a custom control that can parse its content (Read about ParseChildrenAttribute(typeof())). Take a look at this article. Although not exactly your case it can inspire you.
What is the difference in functionality between
<asp:Button id="button1" Text="Click me" runat="server" OnClick="submitEvent" />
and
<input type="button" id="button1" runat="server" value="Click me" />
Does the input with runat="server" attribute has other or limited properties and methods?
Thank you!
The first one creates a System.Web.UI.WebControls.Button while the second one creates a System.Web.UI.HtmlControls.HtmlInputButton.
Both are server controls, but the controls in the WebControls namespace generally has a bit more functionality than the controls in the HtmlControls namespace. Typically they put some data in ViewState to keep track of their state, and they have server side postback events.
Each controls in the HtmlControls namespace correspond exactly to an HTML element, while the controls in the WebControls namespace may be rendered differently depending on what the browser that is requesting the page can support.
The button represented by <asp:Button runat="server".../> will be converted to a web server control with a rich state model and different properties and methods which has more clear representation in real world like Button.Text = "Click Me".
The button represented by <input type="button" runat="server"..../> will be converted to html server control represented by HtmlInputButton; with has limited properties, methods and events. Most of the properties resemble the html equivalents like Button.Value="Click Me".
Note that elements in a markup page are pre-processed/compiled before being used and will be converted to a class representation where every element is represented by a control. You can access server side controls which are identified by the runat="server" tag from the code behind since they will have the correct matching server control(web/html), other static content including an <input type="button.../> tag with out the runat="server" will be represented as a LiteralControl.
The former line is ASP.NET, the latter simple XHTML.
The former gets parsed and interpreted on the server side, after which the HTML code is generated, which pretty much corresponds to your second example. The ASP.NET Button is really little more than light wrapper over th HTML input button functionality, and should be used wherever you need to handle the Click event on the server side (or in the general case any events), and is usually the way to go, since you're letting ASP.NET abstract the idea of a button on your page for you.
functionality of both the controls is same with the difference that first one is .net control and second one is html control that can be made servercontrol by using
runat="server".
and first one is rich in evants and metods thn the second one....
There is no server events associated with such a controls, but you can use it in codebehind to change it's properties.
Your second option won't probably even work. runat="server" will be rendered directly to the HTML output where it will have no functionality and will only break HTML validation.
input is an HTML element which has only HTML properties, and definitely no methods of any kind.