How does ASP. NET client JS access the value of the server control?

How does ASP. NET client JS access the value of the server control? This is a frequently asked question for beginners of Asp.net.

ASP. NET has three forms of controls: HTML control, HTML server control, and server control.

Server Control: The proposal of the server control greatly facilitates the programmer's programming work. The programmer can operate these controls in the background or output the data query results to the client. Typical server controls include Textbox Control, dropdownlist control, button control, and datagridview control. Datagridview is a data output control with powerful functions. With this control, programmers can design complex table output results without any effort. (If the datagridview control is not used, it will be very troublesome for programmers to implement similar functions simply by using JS Code ).

HTML controls: Common HTML code of HTML controls. When submitting a web page, the values of these HTML controls can be submitted to the server, and the server can use: String STR = request. form ["txtusername"]. trim. Therefore, it is easier for the server to obtain the value of the HTML control of the client (the page must be submitted to the server ).

HTML Server Control: in fact, it is the control composed of the HTML control plus runat = "server. for more information, see ASP. when a 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 sending to the client, the browser of 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, and the server code will be able to control it, after the control is executed, convert the execution result of the HTML Server Control to HTML annotation, the stream is sent to the client as a string for explanation. <-- input id = "button" type = "button" value = "button" runat = "server"/>

Our question is: how does ASP. NET client JS access the value of the server control?

Suppose there is a server-side control textbox1 whose ID is textbox1. Now there is a JS Code on the page that wants to get the value of this control. How can this problem be solved?

Answer 1: var T1 = Document. All. textbox1.value; (directly use the server-side control as a client control) if you are lucky, this method will be uncomfortable. But one day, you suddenly encountered an error. "The document. All. textbox1.value object is empty" you can no longer get the value corresponding to textbox1.

At this time, you can check the source code of the webpage and find a file named "ctl00_contentplaceholdercontent_textbox1" (the specific value depends on the situation. all. textbox1.value is a standard JS call. It obtains the value with the Control ID "textbox1. Now the id value of textbox1 in the source code is changed to "ctl00_contentplaceholdercontent_textbox1". Of course, it will be wrong.

Why can we call it successfully ??? Yes !!!!

The answer is: you have just met me !!

The "HTML server control" and "Server Control" are processed on the server first, the server generates one or more corresponding "HTML control code strings" based on the control content. In this process, the server will, generate a new ID as the ID of the new control. To avoid conflicts with other parts of the client, the new ID may be different from the original ID, and finally output the generated strings to the client. (If the new ID is the same as the original ID, no error will occur if you use "Var T1 = Document. All. textbox1.value ).

Under what circumstances will the generated new Id be different from the original ID?

1. When textbox1 is output as the template column of the datagridview. At this time, multiple corresponding HTML controls may be generated at the user end, so the new ID must be prefixed.

2. Textbox1 is located inside the template page, because it is unclear whether there is an HTML control with the same ID and textbox1 outside the template. Therefore, you must add some prefixes before the new ID to ensure the safety of the template.

... ... Other situations .........

Both the "HTML server control" and "Server Control" must be processed by the server, so the above problems may occur.

Solution: 1. If the page is relatively simple and the Server Control ID is the same as the generated client Control ID, use VaR T1 = Document. All. textbox1.value directly.

2. If the generated ID is different:

Method A. Introduce a global variable to obtain clientid on the. ASPX page. Then, the JS script file can call this global variable, as shown below:

<Script language = "JavaScript">
VaR DDD = "<% = Server Control ID. clientid %> ";
</SCRIPT>

Method B. Pass the control itself as a function parameter to the JS script:

<Asp: textbox id = "tbusername" runat = "server" onblur = "check (this);"> </ASP: textbox>

Then, you can directly call the following in the script file:

Function check (OBJ)
{
VaR name = obj. value;
}