Basics of ASP.NET: HTML and Web Server Controls

Download Report

Transcript Basics of ASP.NET: HTML and Web Server Controls 

Session 4:
HTML and Web Server
Controls
Outline

Creating Web Forms

Using Server Controls


HTML Server Controls

Web Server Controls
Writing ASP Code

Inline Code

Code behind pages

Event Procedures

Using Page Events
What Is a Web Form?

.aspx extension

Page attributes

@ Page directive

Body attributes

Form attributes
<%@ Page Language="vb" %>
<html>
<body>
<form id="Form1" method="post" runat="server">
</form>
</body>
</html>
What is a Server Control?
<asp:Button id="Button1" runat="server"
Text="Submit"/>

Runat="server"

Events happen on the server

View state saved

Have built-in functionality

Common object model


All have Id and Text attributes
Create browser-specific HTML
Types of Server Controls

HTML server controls

Web server controls

Intrinsic controls

Validation controls

Rich controls

List-bound controls

Internet Explorer Web controls
HTML Server Controls

Based on HTML elements

Exist within the
System.Web.UI.HtmlControls
namespace
<input type="text" id="txtName"
runat="server" />
Web Server Controls

Exist within the
System.Web.UI.WebControls
namespace
Control syntax
<asp:TextBox id="TextBox1"
runat="server">Text_to_Display
</asp:TextBox>
HTML that is generated by the control
<input name="TextBox1" type="text"
value="Text_to_Display"
Id="TextBox1"/>
Selecting the Appropriate Control
Use HTML Server Controls if:
Use Web Server Controls if:
You prefer an HTML-like object
model
You prefer a Visual Basic-like
programming model
You are working with existing
HTML pages and want to quickly
add ASP.NET Web page
functionality
You are writing a page that
might be used by a variety of
browsers
The control will interact with
client and server script
You need specific functionality
such as a calendar or ad rotator
Bandwidth is limited
Bandwidth is not a problem
Writing ASP.NET Code: Inline Code

Code and content in the same file

Different sections in the file for code and HTML
<SCRIPT Language="vb" runat="server">
Sub btn_Click(s As Object, e As EventArgs) Handles btn.Click
...
End Sub
</SCRIPT>
<HTML>
<asp:Button id="btn" runat="server"/>
</HTML>
Writing ASP.NET Code: Code-Behind Pages

Separation of code from content

Developers and UI designers can work independently
Single file
Separate files
code
<tags>
Form1.aspx
<tags>
code
Form1.aspx
Form1.aspx.vb
or Form1.aspx.cs
Understanding How Code-Behind Pages Work

Create separate files for user interface and interface
logic

Use @ Page directive to link the two files

Pre-compile or JIT-compile
Page1.aspx
<% @ Page Language="c#"
Inherits="Project.WebForm1"
Codebehind="Page1.aspx.cs"
Src = "Page1.aspx.cs" %>
Page1.aspx.cs
public class WebForm1
{
private void cmd1_Click()
{
…
}
}