Differences between HTML server controls and Web server controls [go]

Project	HTML server Controls	Web server Controls
is mapped to HTML tags	There is a mapping relationship of one by one to the HTML tag. The Runat=server property converts a traditional HTML tag into a server control. This allows developers to port ASP pages to an ASP.	does not map directly to HTML tags, which makes it possible for developers to use third-party controls
Object model	Use the HTML central object model, in which the control includes a collection of attributes for key word/value pairs.	Using the component-based object model, the model requires a consistent object type.
Can I adaptive output	Cannot adjust the display of the output HTML document according to the different browser	You can automatically adjust the display of the output HTML document according to the different browser.

The key to ASP is that it has a powerful set of control libraries, including Web server controls, Web user controls, Web custom controls, HTML server controls, and HTML controls. Here I am talking about the differences between HTML controls, HTML server controls, and Web server controls.
1, HTML control: is our usual HTML language tags, these language tags in the past static pages and other Web pages exist, can not be controlled on the server side, only in the client through JavaScript and VBScript and other programming languages to control. <input type= "button" id= "BTN" value= "button"/>
2, HTML server control: In fact, the HTML control is based on the addition of runat= "Server" composed of the control. Their note differences are that they run in different ways, HTML controls run on the client, and HTML server controls are running on the server side. Refer to other information: When the ASP is executed, the label is checked for the Runat property, and if the label is not set, then the HTML callout will be treated as a string and sent to the stream waiting to be sent to the client, the client's browser will explain it If the HTML callout has a set runat= "Server" property, the Page object will put the control into the controller, the server-side code can control it, wait until the control is finished and then convert the results of the HTML server control to HTML markup, Then send to the client as a string stream to interpret <input id= "button" type= "button" value= "button" runat= "Server"/>
3. Web server controls: Also known as ASP. NET server controls, are the basic elements of Web Form programming and are unique to ASP. Instead of directly describing HTML elements, it produces one or more HTML controls in accordance with the client's situation. Such as:
<asp:button id= "Button2" runat= "Server" text= "button"/>
So what's the difference between it and an HTML server control? See the information on other Web pages as follows:
1), ASP. NET server controls provide a more unified programming interface, such as the Text property for each ASP.
2), hide the difference between the client, so that programmers can put more energy on the business, rather than to consider whether the client browser is IE or Firefox, or mobile devices.
3), the ASP. NET server control can be saved in the ViewState, so that the page can be saved in the process of uploading from the client to the server or downloading to the client from the server side.
4), the event-handling model, the HTML label and the HTML server control event handling is on the client's page, and the ASP. NET server control is on the server, for example:
<input id= "Button4" type= "button" value= "button" runat= "Server"/>
is an HTML server control, when we click this button, the page does not go back to the server side because we do not define a mouse click event for it.
<input id= "Button4" type= "button" value= "button" runat= "Server" onserverclick= "test"/>
We added a OnServerClick event for the HTML server control, and clicking this button will send the page back to the server and execute the test (object sender, EventArgs e) method.
<asp:button id= "Button2" runat= "Server" text= "button"/>
is an ASP. NET server control, and we do not define the click for it, but when we click, the page is sent back to the server side.
This shows that the events of HTML annotations and HTML server controls are triggered by the page, while the ASP. NET server control is the page that sends the form back to the server, which is handled by the server.
4, below I will combine my own test to illustrate the problem:
This code is I put in repeat in the template: where Deletecheck is a JS script function, note is used to send to the server side, here does not show the script code:

<input runat= "Server" type= "button" id= "delete" value= "server button"/>
<input type= "button" onclick= "return Deletecheck (This)" id= "Button1" value= "Client button"/>
<input runat= "Server" type= "submit" onclick= "return Deletecheck (This)" id= "Button2" value= "Server Submit"/>
<input type= "Submit" onclick= "return Deletecheck (This)" id= "Button3" value= "Client submit"/>
<button runat= "Server" id= "Button4" onclick= "return Deletecheck (This)" value= "Button-button" >button-button </button>
<asp:button runat= "Server" id= "button5" onclientclick= "return Deletecheck (This)" text= " Asp:button"/>

The HTML code shown is as follows:

<input name= "Data$ctl03$delete"  type= "button"  id= "Data_ Ctl03_delete " value=" Server button "&NBSP;/>
<input type=" button " onclick=" return  deletecheck (This) " id=" Button1 " value=" Client button "&NBSP;/>
<input name=" Data$ctl03$button2 " type=" Submit " id=" Data_ctl03_button2 " onclick=" Return deletecheck (this " value=" Server submit "&NBSP;/&NBSP;>&NBSP;
<input ut type=" Submit " onclick = "Return deletecheck (this)"  id= "Button3"  value= "Client submit" &NBSP;/>
<button  id= "Data_ctl03_button4"  onclick= "Return deletecheck (This)"  value= "Button-Button" > Button-button</button>
<input type= "Submit"  name= "Data$ctl03$button5"  value= "ASP: Button " onclick=" Return deletecheck (this); "  id= "Data_ctl03_button5" &NBSP;/>

The following points can be seen:
1. When there is a runat= "server" in the control property, the resulting HTML control changes in name and ID (. NET Framework).
2. When the Asp:button server button is converted to a client control of type submit by the generated page.
3. The resulting page is exactly the same as the original HTML code when the control is an HTML control (the reason is explained above).
In addition: I also tested the code directly into the form tag (not placed in other sub-tags) such as:

<input runat= "Server" type= "button" id= "delete" value= "server button" onserverclick= "Delete_serverclick"/>
<input type= "button" onclick= "return Deletecheck (This)" id= "Button1" value= "Client button"/>
<input runat= "Server" type= "submit" onclick= "return Deletecheck (This)" id= "Button2" value= "Server Submit"/>
<input type= "Submit" onclick= "return Deletecheck (This)" id= "Button3" value= "Client submit"/>
<button runat= "Server" id= "Button4" onclick= "return Deletecheck (This)" value= "Button-button" >button-button </button>
<asp:button runat= "Server" id= "button5" onclientclick= "return Deletecheck (This)" text= "Asp:button"
onclick= "Button5_click"/>
<asp:linkbutton id= "LinkButton1" runat= "Server" onclick= "LinkButton1_Click" >linkbutton</asp:linkbutton >

Generated HTML code:

<script type= "Text/javascript" >
<!--
var theform = document.forms[' Form1 '];
if (!theform) {
Theform = Document.form1;
}
function __doPostBack (Eventtarget, eventargument) {
I f (!theform.onsubmit (theform.onsubmit () = False)) {
Theform.__eventtarget.value = Eventtarget;
Theform.__eventargument.value = eventargument;
Theform.submit ();
}
}
-
</script>
<input language= "javascript" onclick= "__dopostback (' delete ', ')" name= "delete" type= "button" id= "delete" value= " Server button "/>
<input type= "button" onclick= "return Deletecheck (This)" id= "Button1" value= "Client button"/>
<input name= "Button2" type= "Submit" id= "Button2" onclick= "return Deletecheck (This)" value= "Server submit"/>
<input type= "Submit" onclick= "return Deletecheck (This)" id= "Button3" value= "Client submit"/>
<button id= "Button4" onclick= "return Deletecheck (This)" value= "Button-button" >Button-Button</button>
<input type= "Submit" Name= "Button5" value= "Asp:button" onclick= "return Deletecheck (this);" id= "Button5"/>
<a id= "LinkButton1" href= "Javascript:__dopostback (' LinkButton1 ', ')" >LinkButton</a>

Here are a few things to see:
1. When the HTML server control adds a server event to the server side, the generated code becomes: onclick= "_dopostback ()", which is actually a call script that submits the entire form to the server (if there is no add-on server event and just adds runat= "Server" is not sent to the server side) note here if you want to add a client event to the HTML server control as above:
<input runat= "Server" type= "button" id= "delete" value= "Serverbutton" onserverclick= "Delete_serverclick"/>
Become
<input runat= "Server" type= "button" id= "delete" value= "server button" onclick= "return Deletecheck (This)" onserverclick= "Delete_serverclick"/>
The resulting HTML code becomes
<input language= "javascript" onclick= "return Deletecheck (This) __dopostback (' delete ', ')" name= "Delete" type= " Button "id=" delete "value=" Server button "/>
A script error is prompted because the onclick event executed 2 scripts and was written in an incorrect format.
onclick= "return Deletecheck (this); _dopostback ()"
In this case, only the first function can be executed and the second function cannot execute (return). If you use a
onclick= "return Deletecheck (This), _dopostback ()"
means that 2 functions are executed at the same time without effect (equivalent to a statement). In one of my projects I need to make a summary of the controls, and I looked up the net to add my own actual test summary as follows:
Here are a few things to see:
1. When the HTML server control adds a server event to the server side, the generated code becomes: onclick= "_dopostback ()", which is actually a call script that submits the entire form to the server (if there is no add-on server event and just adds runat= "Server" is not sent to the server side) note here if you want to add a client event to the HTML server control as above
<input runat= "Server" type= "button" id= "delete" value= "server button" onserverclick= "Delete_serverclick"/>
Become
<input runat= "Server" type= "button" id= "delete" value= "server button" onclick= "return Deletecheck (This)" onserverclick= "Delete_serverclick"/>
The resulting HTML code becomes
<input language= "javascript" onclick= "return Deletecheck (This) __dopostback (' delete ', ')" name= "Delete" type= " Button "id=" delete "value=" Server button "/>
A script error is prompted because the onclick event executed 2 scripts and was written in an incorrect format.
onclick= "return Deletecheck (this); _dopostback ()" so that only the first function can be executed and the second function cannot execute (return). If you use onclick= "return Deletecheck (This), _dopostback () "means that 2 functions are executed at the same time without effect (equivalent to a statement).
2, Asp:button in the OnClientClick event has become the onclick event, the type becomes the type= "submit". The onclick of the server event, I think, is done by sending to the server side.
3, LinkButton does not define the onclick event, it will automatically generate the following code to send to the server side. href= "Javascript:__dopostback (' LinkButton1 ', ')"
4, Asp:button in the OnClientClick event has become the onclick event, the type becomes the type= "submit". The onclick of the server event, I think, is done by sending to the server side.

Differences between HTML server controls and Web server controls [go]