asp.net: difference between runat="server" and server controls - asp.net

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.

Related

How to prevent asp.net to make lowercase my custom attribute I placed in a server control

I have an aspx page and controls on it. For the purpose consuming it at client side javascript I would like to place attributes for my elements. I would like to do it all in the markup, not in code behind. It seems the placed attributes will be all lowercased at client side.
For example:
<asp:LinkButton ID="anyButton" runat="server" confirmationMessage='any message'...
will be rendered at client side as:
<a confirmationmessage='any message'...
Consequently I must use this casing all my javascript code. Not a big issue, but quite disturbing if you like strict naming conventions.
Thanks in advance

When working in Visual Studio, can the ' asp: ' portion of an element be omitted?

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.

When isn't runat="server" used in asp.net?

When don't you need to use runat="server" in ASP.NET?
EDIT: Thanks for all the answers, but I was really thinking of runat="server" inside an <asp: tag.
Use the runat=server attribute when you're using ASP.NET controls, and/or you require programmatic access to those controls in your code-behind.
HTML controls don't require this attribute. It's useful if you have any HTML element like <span> <div>, or <table> when you want the ability to access them in code-behind.
<asp:Label runat="server" id="foo" />
<div runat="server" id="bar />
...
foo.Text = "Hello Label";
foo.Attributes["class"] = "baz";
You need to use runat="server" on any control that you want to be parsed as a server control.
Any element with runat="server" will be parsed into a server control in the Page herarchy. Anything else will be handled as plain text, and put in LiteralControl controls in the Page hierarchy.
The exception is elements that aren't real elements, but special tags within another server tag, for example ContentTemplate tags. They don't need a runat="server" because the containing control will parse them.
When you don't want the server side ASP.NET to render a server side variable against us.
Generally speaking you don't use it when you don't need to manipulate the DOM element at the server side e.g. which are only used for layout purposes.
Without runat="server" there would also be no other way to make html controls server side controls. It does look like an odd thing, because you can't do runat="client".
So in summation you can't leave it out on any ASP .Net controls ever and it was probably the easiets and cleanest way to find all server side controls for the developers who created ASP .Net Web forms.
source: http://mikeschinkel.com/blog/whyrunatserverforaspnetpart2/
Tag runat="server" indicates that the code contained within the script block will run on the server (and not on the client). On execution, ASP.NET will create server-side objects that contain this code as well as an instance of the Page class to contain the controls defined inside the page as instances of their given type (System.Web.UI.WebControls.Textbox, for example). This server-side object will be invoked on user request and will execute code in response to events.
Create Control in Runtime
I need one label in runtime that time don't need runat="Server" is not required
Example
protected void Page_Load(object sender, EventArgs e)
{
if (!IsPostBack)
{
Label lblNew = new Label();
lblNew.ID ="lblnew";
lblNew.Text ="Test";
}
}
this code create label in runtime at page load event

ASP.NET events symbol (yellow lightning bolt) missing

I created a new C# ASP.NET Web Application project in .NET 3.5
Then I dragged a button in my form.
In the property window the events symbol (yellow lightning bolt) does not show. When I double click the box next to 'OnClientClick' in the properties Window no default event handler is created. When I double click the button in design view no event handler is created either.
Any ideas on how I can get the events symbol and the automatic generation of a default event handler?
Perhaps you didn't have the option checked for "Place code in a separate file" when adding the webform? Also "OnClientClick" isn't a server side event, it is just a string property so it wouldn't ever map to a server side event handler.
Please check the tag that is being used for your control. If it looks like this:
<input type="submit" runat="server" value="OK" id="btn_1" />
then there will never be an Events symbol. Adding runat="server" to a regular HTML tag turns it into a rather basic Server'ified HTML control, with properties and events, yet Visual Studio does not recognize it as a control with events. (So events do exist, but you'll have to write all the necessary code and declarations yourself)
If the above is the case, rewrite it to this:
<asp:Button runat="server" Text="OK" id="btn_2" />
and then the Events symbol will be there. <asp:Button> creates a full featured Server Side Web Control, which in the end renders similar output, while offering a much richer set of features (such as Design mode support).

When to use HtmlControls vs WebControls

I like HtmlControls because there is no HTML magic going on... the asp source looks similar to what the client sees.
I can't argue with the utility of GridView, Repeater, CheckBoxLists, etc, so I use them when I need that functionality.
Also, it looks weird to have code that mixes and matches:
<asp:Button id='btnOK' runat='server' Text='OK' />
<input id='btnCancel' runat='server' type='button' value='Cancel' />
(The above case in the event you wanted to bind a server-side event listener to OK but Cancel just runs a javascript that hides the current div)
Is there some definitive style guide out there? Should HtmlControls just be avoided?
It might be useful to think of HTML controls as an option when you want more control over the mark up that ends up getting emitted by your page. More control in the sense that you want EVERY browser to see exactly the same markup.
If you create System.Web.UI.HtmlControls like:
<input id='btnCancel' runat='server' type='button' value='Cancel' />
Then you know what kind of code is going to be emitted. Even though most of the time:
<asp:Button id='btnCancel' runat='server' Text='Cancel' />
will end up being the same markup. The same markup is not always emitted for all WebControls. Many WebControls have built in adaptive rendering that will render different HTML based on the browser user agent. As an example a DataGrid will look quite different in a mobile browser than it will in a desktop browser.
Using WebControls as opposed to HtmlControls also lets you take advantage of ASP.NET v2.0 ControlAdapters which I believe only works with WebControls, this will allow you programatic config driven control over the markup that gets emitted.
This might seem more valuable when you consider that certain mobile browsers or WebTVs are going to want WML or completely different sets of markups.
In my experience, there's very little difference. As Darren said, if you don't need server-side functionality, HTML controls are probably lower-impact.
And don't forget, you can bolt server-side functionality onto almost any HTML control just by adding a runat="server" directive and an ID to it.
well... i wouldn't use an html control if you don't need to do anything on it on the server. i would do
<input id='btnCancel' type='button' value='Cancel' />
fin.
By adding runat="server" you can get access to any HTML controls in server side..
and I believe HTML controls are less weight compared to ASP.NET server controls..

Resources