Having the code below for a button, can I add an id to it so I can add CSS to the button?? Or I can put only a class??
<asp:Button ID="registerLink" runat="server" Text="Create Account">
</asp:Button>
In WebForms, the ID="" attribute of controls is transformed into something of the form ctl0__ctl1__registerLink (where ctl0 and ctl1 are the ID="" values of parent controls). This means the rendered id="" attribute is (generally) unpredictable and cannot be relied upon for styling or Javascript uses.
There are three possible solutions:
Use ctrl.ClientId to get the final rendered id="" attribute value, this works when you want to reference the rendered HTML from a client script on the same page, however it isn't of much use for styling unless it's an inline <style> element.
Use the clientIDMode setting to override how the id="" attribute is rendered. This requires ASP.NET 4.0 or later. You can set this in web.config, in your <%# Page declaration, or on each element. Set it to Static so the value is verbatim (with exceptions).
Implement your own Control Adapters that override how attributes render.
Ditch WebForms and use ASP.NET MVC ;)
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.
i would like to know what exactly the difference between Html control
and asp.net web control. why do we need these two types of controls?
i have placed one html input text ,html button and asp.net text box AND ASP.NET BUTTON on my web page
<input id="Text1" type="text" />
<input id="Button2" type="button" value="button" />
<asp:TextBox ID="TextBox1" runat="server"></asp:TextBox>
<asp:Button ID="Button1" runat="server" Text="Button" />
when i take view source, both are rendered similarly
<input id="Text1" type="text" />
<input id="Button2" type="button" value="button" />
<input name="TextBox1" type="text" id="TextBox1" />
<input type="submit" name="Button1" value="Button" id="Button1" />
what is the advantage of web control over html control.
I got some links in the internet,but not clear what exactly
they are used for.
http://www.extremeexperts.com/Net/FAQ/DiffBetweenServerandHTMLControls.aspx.
Could any one please explain the difference between these two controls.
First, if you drag an Html control from the Toolbox onto your design surface as in your example, the tag created does not include runat="server". That means it is native Html tag and not a .NET control. A native Html tag without the runat="server" has no server-side functionality. Thus, you could not set the value of the your "Text1" input tag in the code-behind.
Second, once you add the runat="server" to your Html input tag, you convert it from a native Html tag into a HtmlControl which derives from System.Web.UI.Control. Now the question could morph into the differences between something that derives from System.Web.UI.Control and System.Web.UI.WebControl. However, to specifically address your question, let's compare a standard input type="text" control to the TextBox control:
TextBox control can be access from the code-behind where an input control cannot (not easily) which also means that you can wireup server-side events for a TextBox control whereas you cannot with a standard Html control.
A TextBox control automatically saves its value using ViewState.
A TextBox control can be skinned using a Theme and .skin file whereas a native Html control cannot.
A TextBox can render as either an input type="text" control or a textarea depending on its TextMode property.
A TextBox control can participate in validation using validators.
Last but not least, the TextBox control can use control adapters to render differently in different browsers if required. See http://msdn.microsoft.com/en-us/magazine/cc163543.aspx.
Now, all that said, if you do not need any of WebControl capabilities, then using an native Html control is substantially leaner. In your example, you simply dragged two empty controls onto your design surface. If that is all you needed then using the .NET control would be overkill. However, as you start adding AutoComplete and server-side events and such, the full content, Javascript and all, of what gets to the Browser is much larger.
In short HTML controls don't persist their state while Postbacks. On the other hand ASP.Net control provides you to luxury to have their state saved while several Postbacks automatically. Different while using ASP.Net control instead of HTML element is:
<input type="hidden" name="__VIEWSTATE" value="dDwtNTI0ODU5MDE1Ozs+.................." />
This hidden field is auto generated by ASP.Net and it contains all you controls state in value attribute.
The server controls have a runat="server" attribute which enables you to provide server-side logic for these controls in the code-behind. You can also add this attribute to existing HTML controls to gain this same functionality.
The HTML controls are simple controls that correspond directly to HTML elements.
The ASP.NET Web Controls abstract the HTML elements, and generally provide more control over styling (though some would call this a bad thing).
I have an usercontrol with an attribute targetUrl. I add this user control to a page and write targetUrl attribute from this page like below:
<PBG:Modal ID="Modal1"
runat="server"
Height="180"
Width="500"
src="pop_adres_giris.aspx"/>
This worked properly, but I want to change the targetUrl attribute from javascript. And I can't do it. I write code like below, but it didn't work.
var frm = document.getElementById('Modal1');
frm.targetUrl = 'pop_adres_giris.aspx';
How can I do it?
The UserControl object, which generates HTML on the client side, are not accessible as the rich objects which are available when handling server side calls.
Depending what the UserControl is, you will need to use a different method to get it and set the "targetUrl".
In addition, to ease your accessing of elements within the DOM you may want to consider using a library such as jQuery or prototype
Once you have declared your control, for instance, if you were using an asp:Hyperlink control:
<div id="hyperlink_holder">
<asp:Hyperlink ... NavigateUrl="http://someurl" />
</div>
You know that asp:Hyperlink generates html like <a href="http://someurl" ... />
So we can access the element and change the link like:
$('#hyperlink_holder a').attr("href", "http://newurl");
In addition, note that the ID you give an item in ASP.NET is not necessarily the ID which will render in the id element in the HTML; it is instead a concatenation of a number of ids; therefore use selectors based on non runat="server" controls where possible, or pass the ClientID of the UserControl through to the client to use for selection if absolutely necessary.
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.
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>