Server Controls: Architecture. Framework That Represent Visual Elements On A Web Form

Server Controls
• ASP.NET server controls are a

fundamental part of the ASP.NET
architecture.
• Server controls are classes in the .NET
Framework that represent visual elements
on a web form.
Types of server control
• HTML server controls:
• Web controls:
• Rich controls:
• Validation controls:
• Data controls:
• Navigation controls:
• Login controls:
• ASP.NET mobile controls:
• Web parts controls:
Custom Control
• @Control Directive defines properties to be
inherited by the custom/user controls.
• The values are assigned to the properties of the
user control as the page is parsed and compiled.
Creating custom control
• Apart from creating web server controls
and html controls one can create custom
controls. These are called user controls.
• User must be included in a Web Forms
page to work.
• User controls can be created by declaring
it in the code form or using html editor.
• A file with extension .ascx is created.
Creating custom control
• Apart from creating web server controls and html
controls one can create custom controls. These
are called user controls.
• User must be included in a Web Forms page to
work.
• User controls can be created by declaring it in
the code form or using html editor.
• A file with extension .ascx is created.
• To create user control from visual studio  add
new item called web user control.
Code generated
<%@ Control Language="C#"
AutoEventWireup="true"
CodeFile="WebUserControl.ascx.cs"
Inherits="WebUserControl" %>
Drag and drop controls from the toolbox as it was done for
the web forms page.
@Register Directives Overview
• To include the user control in the web page
@Register tag is to be used.
• This tag is used to specify namespaces and
class names for a custom server control in page.
Including a user control in web
forms page
• @Register directive with attributes:
• tagprefix : prefix with the user control
which is to be included in opening tag of the
user control element.
• tagname: a name with the user control. which
is to be included in opening tag of the user
control element.
• Src: defines the virtual path to the user
control file
Drag the .ascx file from the solution explorer into
the web forms page.
Code generated
<%@ Page Language="C#" AutoEventWireup="true"
CodeFile="Default5.aspx.cs" Inherits="Default5" %>
<%@ Register Src="WebUserControl.ascx"
TagName="WebUserControl" TagPrefix="uc1" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0
Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-
transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
<head runat="server"><title>Untitled
Page</title></head>
<body>
<form id="form1" runat="server">
<uc1:WebUserControl ID="WebUserControl1"
runat="server" />
</form>
</body>
</html>
Creating user controls with
properties
• To create properties for the user controls get
and set property must be defined in the source
file.
• The web forms pages can then use this property
name as an attribute to populate the value.
<%@ Control Language="C#" AutoEventWireup="true"
CodeFile="WebUserControl.ascx.cs"
Inherits="WebUserControl" classname="MyWebControl"%>
<script runat="server"> Optional for now but

we soon require this
private string uname;
public string DefaultLogin {
get {
return uname;
}
set {
if (value == null) {
throw new Exception("cannot be null.");
}
else{ uname = value; }
}
}
protected void Page_Load(object sender,
EventArgs e) {
TextBox1.Text = this.DefaultLogin; }
</script>
LOGIN<br/>
<table border="0" cellpadding="0" cellspacing="0"
style="width: 337px; height: 96px" frame="border">
<tr> <td><asp:Label ID="Label1" runat="server"
Text="Login" Width="99px"></asp:Label></td>
<td>
<asp:TextBox ID="TextBox1" runat="server“ >
</asp:TextBox></td></tr><tr> Same
<td><asp:Label ID="Label2" runat="server" controls
Text="Password" Width="104px"></asp:Label></td>
<td><asp:TextBox ID="TextBox2"
runat="server"></asp:TextBox></td></tr>
<tr><td></td>
<td><asp:Button ID="Button1" runat="server"
Text="submit" OnClick="Button1_Click"
/></td></tr></table>
Adding property in the web forms
page
<%@ Register Src="WebUserControl.ascx"
TagName="WebUserControl" TagPrefix="uc1"
%>
…
<body>
<form id="form1" runat="server">
<div>
<uc1:WebUserControl
id="WebUserControl1" runat="server"
DefaultLogin="admin">
</uc1:WebUserControl>
</div>
</form>
</body>
</html>
@Reference Directive
• This directive indicates that the page must be
compiled and linked with another user control or
page source file.
• One usage of this tag would be to display the
user control on the fly when an event occurs.
• This will require creation of the user control
reference and displaying it only when an event
happens.
• Example in the next slide demonstrates
associating a place holder with the user control
on clicking of a button.
Steps
1. Create a web form page.
2. Add a button and place holder tag inside the form tag
as shown below.
<form runat="server">
<asp:Button ID="Button1"
runat="server" OnClick="Button1_Click"
Text="show" /><br />
<asp:placeholder id="PlaceHolder"
runat="server"/>
</form>
3. Next add
<%@ Reference
Control="WebUserControl.ascx" %>
right below the page directive.
• Make the page directive to link up only to the scripts
associated with this page.
<%@ Page Language="C#" %>
• Double click on the button from the design view and
add the following code.
MyWebControl myControl =
(MyWebControl)Page.LoadControl("WebUserC
ontrol.ascx");
myControl.DefaultLogin = "user";
PlaceHolder.Controls.Add(myControl);
Remember the classname attribute of the @ Control tag

We added classname="MyWebControl” .
Full Script code
<%@ Page Language="C#" %>
<%@ Reference Control="WebUserControl.ascx" %>
<script language="C#" runat="server">
protected void Button1_Click(object sender, EventArgs e) {

MyWebControl myControl =
(MyWebControl)Page.LoadControl("WebUserControl.ascx");
myControl.DefaultLogin = "user";
PlaceHolder.Controls.Add(myControl);
}
</script>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0

Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-
transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" ><head></head>
<body>
<form runat="server">
<asp:Button ID="Button1" runat="server"
OnClick="Button1_Click" Text="show" /><br />
<asp:placeholder id="PlaceHolder" runat="server"/>
</form>
</body></html>

Server Controls: Architecture. Framework That Represent Visual Elements On A Web Form

Hochgeladen von

Dokumentinformationen

Originalbeschreibung:

Originaltitel

Copyright

Verfügbare Formate

Dieses Dokument teilen

Dokument teilen oder einbetten

Freigabeoptionen

Stufen Sie dieses Dokument als nützlich ein?

Sind diese Inhalte unangemessen?

Copyright:

Verfügbare Formate

Server Controls: Architecture. Framework That Represent Visual Elements On A Web Form

Hochgeladen von

Copyright:

Verfügbare Formate

Server Controls

• ASP.NET server controls are a

<script runat="server"> Optional for now but

Remember the classname attribute of the @ Control tag

protected void Button1_Click(object sender, EventArgs e) {

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0

Das könnte Ihnen auch gefallen