Asp. NET implementation controls Web pages on the server side

Source: Internet
Author: User
Tags html page visibility
Asp.net| Server | control | Web use. NET and C # development of Web applications often give us a lot of inspiration, especially when developing relatively simple routine tasks. For example, in many cases, we all need to conditionally display a part of a Web page. There are many reasons to do so, for example, depending on the user's role, part of it should not be seen. Alternatively, we might consider the search function, which is available only if you click on a link.

Let's explain how to solve this problem first, and then explain the code in detail. By developing Web applications in. NET, we can use either server-side Web controls (Web Forms) or HTML controls. Use. NET development Web application is focused on server-side controls. We used the Web Form server-side control in this article.

A panel is a server-side Web Form control, and a panel control is a rectangular area on an HTML Web page that is visible and can be controlled on the server side. So, first, we can put the HTML snippet in a panel control, and the HTML snippet can be made up of server-side controls and client controls. Once we set the visibility property of the Panel control to false, the entire HTML snippet becomes invisible. Second, we can use another Web Form control named LinkButton, which is essentially a hyperlink, but it can act as a button through the server-side onclick method. In this approach, the Web page automatically refreshes itself by simply accessing the C # language representation of the Panel object and setting its Visibility property to true or false.

An important difference in developing Web applications in. NET is that each control on a Web page is represented as one on the server side. NET objects, and the state of these objects (controls) is maintained through multiple interactions with the server, which allows us to respond to server-side and client-end events. When you respond to server-side events, all objects (controls) inside it are refreshed when the hundred pages are refreshed. We don't have to draw any more controls, and all of this is done automatically. The most appealing aspect of this approach is that a good object-oriented programmer can work in a programming language pattern, and it is easy to use JavaScript and debugging. A small problem with this approach is that it cannot use HTML code editors such as FrontPage or Dreamweaver. Once this problem has been resolved, the server-side programming model is more complete.

Here are the steps required to write the example code in this article:

• Get the Panel control for the HTML code snippet.
• Place HTML code into the Panel control.
• Create a LinkButton control.
• Provides an onclick function.
• Hide/show the Panel control in the Click function of the button.

 1. Get Panel control for HTML code Snippets

Open Design view of Web page (. aspx) and select the WebForms Control Toolbox, dragging a Panel control from the Toolbox to the Design view of an HTML page. You will see a rectangular box that changes its size until you can accommodate the HTML snippet you want to enter.

The following is the definition of the Panel control in HTML Design view:

<?xml:namespace prefix = ASP/>
<asp:panel id=testpanel width= "398px" height= "171px" runat= "Server"
HTML GOES Here
</asp:panel>

 2. Enter our HTML code into the Panel control

Writing related HTML code in a Panel control (or dragging HTML code into a Panel control), here is an example:

<asp:panel id=testpanel width= "398px" height= "171px" runat= "Server"
An

An example drop down

<asp:dropdownlist id=adropdownlistbox runat= "Server" >
</asp:DropDownList>
</asp:panel>

 3. Create a LinkButton control

We need to make some explanations for this part. Why would we replace a hyperlink with a LinkButton control? Hyperlinks mean we can go anywhere on any page, including the current page, but that doesn't mean we're going to go back to the page we're modifying. In addition, there is no server-side method that can handle hyperlinks like onclick.

LinkButton has the same appearance and style as hyperlink, but it has two other benefits, namely:

• Return to the same Web page when clicked.
• Easy to use onclick method.

The following is an example of a LinkButton control definition:

<asp:linkbutton Id=changeappearancebutton runat= "Server" >
Change appearance
</asp:LinkButton>

 4. Provide the OnClick function

If you double-click the LinkButton control, the IDE automatically leads us to the server-side OnClick method of the control, where we can write code to hide the Panel control.

  5. Hide/Show Panel control in button's OnClick method

Here is an example of the OnClick method:

private void Changeappearancebutton_click (object sender, System.EventArgs e)
{
This. Testpanel.visible = this. Testpanel.visible? False:true;
}

The above code is an excellent example of a supply-side programming pattern that knows how to maintain your state. When the user clicks on the link, the code is executed, but the developer does not change the rest of the HTML page, and the control itself knows how to refresh itself.

   Conclusion

Here's where I'm from. The very interesting features featured in the net pattern:

• Server-side programming mode.
· The state of the Web form is maintained automatically.
• Highly consistent front and back-end unified object programming patterns.
• The most useful IDE can prompt each method and possible parameters.
• Writing XML code in HTML view of a Web page is also a hint.
• The uniform web.config required for configuration.

Although the examples in this article are fairly straightforward, even though traditional methods can be very simple to implement, this server-side programming pattern illustrates one of the interesting features of net, that is, a consistent, unified server-side programming pattern that automatically maintains its state.



Related Article

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.