Differences between HTML controls and HTML server controls

The key to the convenience and quickness of Asp.net development is that it has a set of powerful control libraries, including Web server controls, Web user controls, Web custom controls, HTML server controls, and HTML controls. Here I will mainly talk about html controls

The differences between HTML server controls and web server controls.

1. html controls: These are commonly used HTML language tags that exist on previous static pages and other webpages and cannot be controlled on the server, you can only use JavaScript, VBScript, and other programs on the client.

Language.
For example, <input type = "button" id = "BTN" value = "button"/>

2. html Server Control: in fact, it is the control composed of the HTML control plus runat = "server. the differences between them are that HTML controls run on clients, while HTML server controls run on services.

Terminal. For more information, see ASP. when the web page is executed, the system checks whether the annotation has the runat attribute. If the annotation is not set, the HTML annotation is regarded as a string and sent to the string stream for delivery to the client.

The browser on the client will explain it. If the HTML annotation has the set runat = "server" attribute, the page object will put the control into the controller, the server-side code can be controlled. After the control is completed

The execution result of the HTML Server Control is converted to HTML annotation and then sent to the client as a string stream for explanation.
For example, <input id = "button" type = "button" value = "button" runat = "server"/>

3. Web Server Control: Also known as Asp.net Server Control, is a basic element of web form programming and also exclusive to Asp.net. It will generate one or more HTML controls based on the client, rather than directly describing HTML elements.

.
For example: <asp: button id = "button2" runat = "server" text = "button"/>
So what is the difference between it and the HTML Server Control? For more information, see the following:
1) The Asp.net Server Control provides a more unified programming interface. For example, each Asp.net Server Control has the text attribute.
2) Hide the differences between the client, so that the programmer can focus more on the business, instead of considering whether the client browser is IE, Firefox, or a mobile device.
3) The Asp.net server control can be saved to viewstate, so that the page can be saved during the process of uploading the page from the client back to the server or downloading it from the server to the client.
4) different event processing models: HTML tagging and HTML Server Control event processing are on the client page, while 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. Click this button, the page will not be uploaded back to the server, because we didn't define the mouse for it

Click events.
<Input id = "button4" type = "button" value = "button" runat = "server" onserverclick = "test"/> we added an onserverclick event to the HTML Server Control, click this button to go to the page

Send it back to the server and run 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 a click for it. However, when we click, the page is also sent back to the server.
It can be seen that HTML tagging and HTML server control events are triggered by pages, while Asp.net server controls are sent back to the server by pages for processing.

4. I will explain the problem with my own tests below:
This code is stored in the repeat template. deletecheck is a JS Script Function. Note that it is used for sending the code to the server. The script code is not displayed here.
<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 displayed HTML code is as follows:
<Input name = "Data $ ctl03 $ Delete" type = "button" id = "data_ctl03_delete" value = "server button"/>
<Input type = "button" onclick = "Return deletecheck (this)" id = "button1" value = "client button"/>
<Input name = "Data $ ctl03 $ button2" type = "Submit" id = "data_ctl03_button2" onclick = "Return deletecheck (this)" value = "server submit"/>
<Input ut type = "Submit" onclick = "Return deletecheck (this)" id = "button3" value = "client submit"/>
<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"/>
We can see the following points:
1. When the control property contains runat = "server", the name and ID of the generated HTML control change (. NET Framework ).
2. When the ASP: button server button is converted into a client control of the submit type after the page is generated.
3. When the control is an HTML control, the generated page is exactly the same as the original HTML code (the reason has been mentioned above ).

In addition, I also tested to put this Code directly in the form tag (not in other child tags), such:
<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>

HTML code generated directly in form tag
<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 we can see the following points:
1. When the HTML Server Control adds a server event to the server, the generated code becomes onclick = "_ dopostback ()", in fact, the script is called to submit the entire form to the server (if no server event is added

If runat = "server" is added, it will not be sent to the server ). Note that if you want to add a client event in the HTML server control as shown above

<Input runat = "server" type = "button" id = "delete" value = "server button" onserverclick = "delete_serverclick"/>

Change

<Input runat = "server" type = "button" id = "delete" value = "server button" onclick = "Return deletecheck (this)" onserverclick = "delete_serverclick"/>

The generated 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 executes two scripts and the writing format is incorrect. Onclick = "Return deletecheck (this); _ dopostback ()" in this way, you can only execute the first function, but not the second function.

Can be executed (return). If onclick = "Return deletecheck (this) is used, _ dopostback ()" means that the execution of both functions has no effect (equivalent to a statement ).
2. asp: The onclientclick event in the button is generated and becomes an onclick event. The type is changed to type = "Submit ". however, The onclick of a server event is sent to the server for execution.

3. linkbutton does not define an onclick event. It automatically generates the following code and sends it to the server. Href = "javascript :__ dopostback ('linkbutton1 ','')"

4. asp: The onclientclick event in the button is generated and becomes an onclick event. The type is changed to type = "Submit ". however, The onclick of a server event is sent to the server for execution.