Choose between server and client controls

ASP.NET Web Controls offer a robust set of controls to build Web-based applications. Learn how to use Web Controls to add search functionality to a Web form.

The disconnected nature of Web browsers
presents many obstacles when developing Web-based applications. For
instance, loading data into the browser involves a round-trip to
the server to retrieve it. There are various approaches to loading
data, with each platform providing its own approach. The inclusion
of Web Controls with ASP.NET provides another alternative.

Web Controls

ASP.NET Web Controls offer a robust set of
controls to build Web-based applications. With Web Controls,
Microsoft reworked HTML according to their design. These controls
are analogous to HTML controls.

Here’s a sample Web Control with the HTML tag
presented first:

This is the equivalent Web Control:

<asp:TextBox id=”FirstName”
runat=”server”></asp:TextBox>

All Web Controls require the following to
function properly:

They’re placed within a <form runat=”server”> tag.
They require id and runat=”server” attributes.
They all begin with the asp: prefix.

While Web Controls are Microsoft’s version of
HTML elements, there are more Web Controls than corresponding HTML
elements. They can be divided into these categories: basic
(textbox, listbox, etc.), validation, data, and user (custom).

Now let’s take a look at using Web Controls to
add search functionality to a Web form. The following code snippet
uses Web Controls to add search functionality (the user interface)
to a form. Only the search portion of the form is included; but, in
reality, a DataGrid would be present as well and the search would
interact with it.

<%@ Page language=”c#” Trace=”False”
Codebehind=”WebControlEvents.aspx.cs”
AutoEventWireup=”false” Inherits=”BulderExamples.WebControlEvents”
%>
<!DOCTYPE HTML PUBLIC “-//W3C//DTD HTML 4.0 Transitional//EN”
>
<html><head>
<title>Builder.com Web Control Example</title>
</head>
<form id=”frmBuilderWebControlExample” method=”post”
runat=”server”>
<table id=”tblReportSearchControl” cellSpacing=”0″
cellPadding=”0″ border=”0″>
<tr><td style=”WIDTH: 179px; HEIGHT: 119px”>
<asp:radiobuttonlist id=”rblRequest” runat=”server”
Width=”300px”
RepeatColumns=”2″ AutoPostBack=”True”
OnSelectedIndexChanged=”rblRequest_SelectedIndexChanged”>
<asp:ListItem Value=”0″ Selected=”True”>Started
On</asp:ListItem>
<asp:ListItem Value=”1″>Started
Between</asp:ListItem>
<asp:ListItem Value=”2″>Completed
On</asp:ListItem>
<asp:ListItem Value=”3″>Completed
Between</asp:ListItem>
</asp:radiobuttonlist>
</td><td style=”WIDTH: 170px; HEIGHT: 119px”
align=”center”>
<asp:label id=”lblStartDate” Font-Bold=”True”
runat=”server”>Start
Date</asp:label><asp:textbox id=”txtStartDate”
runat=”server”></asp:textbox>
</td><td style=”HEIGHT: 119px” align=”center”>
<asp:label id=”lblAnd” runat=”server” Visible=”False”> and
</asp:label>
</td><td style=”HEIGHT: 119px” align=”center”>
<asp:label id=”lblEndDate” Font-Bold=”True” runat=”server”
Visible=”False”>End
Date</asp:label><asp:textbox id=”txtEndDate”
runat=”server”
Visible=”False”></asp:textbox>
</td></tr>
<tr><td align=”center” colSpan=”4″>
<asp:button id=”btnSearch” Font-Bold=”True”
runat=”server”
Text=”Search”></asp:button>
</td></tr>
</table></form></body></html>

This code:

Presents a radio button control that allows the user to choose how
to search. They may search by Start and Complete dates, or an
interval may be used.
The radio button selection shows/hides TextField and Label controls
based upon the value selected. For example, both the Start and End
date controls are displayed when an interval is chosen, and only
the Start date is displayed for the option using only one
value.
The Visible property of the TextBox and Label controls is used to
show/hide them.

The codebehind file for this page would contain
the following code:

public void rblRequest_SelectedIndexChanged(object
sender, EventArgs e) {
switch (rblRequest.SelectedIndex) {
case 0 :
lblAnd.Visible = false;
txtEndDate.Visible = false;
txtStartDate.Visible = true;
lblEndDate.Visible = false;
lblStartDate.Text = “Date”;
break;
case 1 :
lblAnd.Visible = true;
txtEndDate.Visible = true;
txtStartDate.Visible = true;
lblEndDate.Visible = true;
lblEndDate.Text = “End Date”;
lblStartDate.Visible = true;
lblStartDate.Text = “Start Date”;
break;
case 2 :
lblAnd.Visible = false;
txtEndDate.Visible = false;
txtStartDate.Visible = true;
lblEndDate.Visible = false;
lblStartDate.Visible = true;
lblStartDate.Text = “Date”;
break;
case 3 :
lblAnd.Visible = true;
txtEndDate.Visible = true;
txtStartDate.Visible = true;
lblEndDate.Visible = true;
lblEndDate.Text = “End Date”;
lblStartDate.Visible = true;
lblStartDate.Text = “Start Date”;
break;
default :
lblAnd.Visible = false;
txtEndDate.Visible = false;
txtStartDate.Visible = true;
lblEndDate.Visible = false;
lblStartDate.Visible = true;
lblStartDate.Text = “Start Date”;
break;
} }
private void btnSearch_Click(object sender, EventArgs e) {
// Conduct search
}
public string getStartDate() {
return txtStartDate.Text;
}
public string getEndDate() {
return txtEndDate.Text;
}
public string getSelection() {
return this.rblRequest.SelectedValue.ToString();
}

You should notice that each Web Control–and
the Web form itself–includes the runat=”Server” attribute. This
tells the server to process the controls and their respective
events on the server. The AutoPostBack attribute of the
RadioButtonList control is set to true, so the server processes
each event fired by the control–the request is posted back to the
server (the form is submitted). The OnSelectedIndexChange
attributed signals what method to use to process the event.

VB.NET may easily be used instead of C#. Here is the VB.NET version
of the code:

Public Sub rblRequest_SelectedIndexChanged(ByVal
sender As Object, ByVal e As
EventArgs)
Select Case (rblRequest.SelectedIndex)
Case 0
lblAnd.Visible = False
txtEndDate.Visible = False
txtStartDate.Visible = True
lblEndDate.Visible = False
lblStartDate.Text = “Date”
Case 1
lblAnd.Visible = True
txtEndDate.Visible = True
txtStartDate.Visible = True
lblEndDate.Visible = True
lblEndDate.Text = “End Date”
lblStartDate.Visible = True
lblStartDate.Text = “Start Date”
Case 2
lblAnd.Visible = False
txtEndDate.Visible = False
txtStartDate.Visible = True
lblEndDate.Visible = False
lblStartDate.Visible = True
lblStartDate.Text = “Date”
Case 3
lblAnd.Visible = True
txtEndDate.Visible = True
txtStartDate.Visible = True
lblEndDate.Visible = True
lblEndDate.Text = “End Date”
lblStartDate.Visible = True
lblStartDate.Text = “Start Date”
Case Else
lblAnd.Visible = False
txtEndDate.Visible = False
txtStartDate.Visible = True
lblEndDate.Visible = False
lblStartDate.Visible = True
lblStartDate.Text = “Start Date”
End Select
End Sub
Private Sub btnSearch_Click(ByVal sender As Object, ByVal e As
EventArgs)
‘ Conduct search
End Sub
Public Function getStartDate() As String
Return txtStartDate.Text
End Function
Public Function getEndDate() As String
Return txtEndDate.Text
End Function
Public Function getSelection() As String
Return rblRequest.SelectedValue.ToString()
End Function

This code may be easily combined with a
DataGrid control to provide the necessary search functionality. The
problem with this approach is the roundtrips to the server. The
server is called each time the radio button is changed, so
performance becomes an issue. This is especially true if the form
contains other items like a DataGrid control that is reloaded each
time the form is submitted (you may avoid this by utilizing the
IsPostBack method). The opposite approach utilizes client-side code
via JavaScript and HTML elements.

The HTML and JavaScript approach

Utilizing HTML elements and JavaScript reduces
the server load. JavaScript allows the clicking of a radio button
to be processed without a call to the server. It may be combined
with DHTML to easily show/hide HTML elements. The best way to
demonstrate its usefulness is with an example. The following code
includes these elements:

A JavaScript function to show or hide specific DHTML elements. In
particular, it manipulates a label and text box corresponding to
the search end date. This function is named showHide.
A JavaScript function (called setSearchFields) to set up the fields
upon loading of the form.
The Web form contains HTML elements instead of ASP.NET Web
Controls.
The HTML radio button elements are assigned the showHide function
to their onClick event.
ASP.NET functions are used to populate the HTML controls when the
form is loaded. This allows the form to retain its values when/if
the page is posted back to the server. These functions utilize the
form array of values in the Request object.
The only ASP.NET Web Control utilized is the search button.

Here’s the code:

<%@ Page language=”c#” Trace=”False”
Codebehind=”BuilderControlsTest.aspx.cs”
AutoEventWireup=”false” Inherits=”BuilderExamples.Report”
%>
<!DOCTYPE HTML PUBLIC “-//W3C//DTD HTML 4.0 Transitional//EN”
>
<html><head>
<title>Builder.com Web Control Example</title>
</head>
<script language=”javascript”>
function showHide(h) {
if (document.all) { // Internet Explorer
if (h==’s’) {
eval(“document.all.lblAnd.style.visibility=’visible’;”);
eval(“document.all.endDate.style.visibility=’visible’;”);
}
if (h==’h’) {
eval(“document.all.lblAnd.style.visibility=’hidden’;”);
eval(“document.all.endDate.style.visibility=’hidden’;”);
} } else { // Netscape
if (h==’s’) {
eval(“document.layers[‘lblAnd’].visibility=’show’;”);
eval(“document.layers[‘endDate’].visibility=’show’;”);
}
if (h==’h’) {
eval(“document.layers[‘lblAnd’].visibility=’hide’;”);
eval(“document.layers[‘endDate’].visibility=’hide’;”);
} } }
function setSearchFields() {
var doc = document.forms[0];
if (doc.r1[0].checked == true) {
showHide(‘h’);
} else if (doc.r1[1].checked == true) {
showHide (‘h’);
} else if (doc.r1[2].checked == true) {
showHide (‘s’);
} else if (doc.r1[3].checked == true) {
showHide (‘s’);
} else {
showHide (‘h’);
} }
</script></head>
<body ms_positioning=”FlowLayout”>
<form id=”frmBuilderHTMLJavaScriptExample” method=”post”
runat=”server”>
<table id=”tblReportSearch” cellSpacing=”0″ cellPadding=”0″
border=”0″>
<tr><td style=”WIDTH: 160px; HEIGHT: 60px”>
<input onclick=”showHide(‘h’)” <%= getRadioStatus(0) %>
type=”radio” value=”0″
name=”r1″>Started On
<input onclick=”showHide(‘h’)” <%= getRadioStatus(1) %>
type=”radio” value=”1″
name=”r1″>Completed On
<input onclick=”showHide(‘s’)” <%= getRadioStatus(2) %>
type=”radio” value=”2″
name=”r1″>Started Between
<input onclick=”showHide(‘s’)” <%= getRadioStatus(3) %>
type=”radio” value=”3″
name=”r1″>Completed Between
</td>
<td style=”WIDTH: 109px; HEIGHT: 60px” align=”center”>
<div id=”lblStartDate”>Start Date</div>
<input id=”txtStartDate” type=”text” name=”txtStartDate”
value=”<%=
getStartDate() %>” size=”8″>
</td><td style=”WIDTH: 5px; HEIGHT: 60px”
align=”center”>
<span id=”lblAnd”>and </span>
</td><td style=”WIDTH: 139px; HEIGHT: 60px”
align=”center”>
<span id=”endDate”>
<div id=”lblEndDate”>End Date</div>
<input id=”txtEndDate” type=”text” align=”center”
name=”txtEndDate” value=”<%=
getEndDate() %>” size=”8″>
</span>
</td></tr>
<tr><td colSpan=”4″ align=”center”>
<asp:button id=”btnSearch” runat=”server”
Font-Bold=”True”
Text=”Search”></asp:button>
</td></tr></table>

The codebehind file for this page would contain
the following code:

private void btnSearch_Click(object sender,
EventArgs e) {
// Conduct search
}
public string getStartDate() {
if (Request.Form[“txtStartDate”] == null) {
return ” “;
} else if (Request.Form[“txtStartDate”].Trim() == “”) {
return ” “;
} else {
return Request.Form[“txtStartDate”];
} }
public string getEndDate() {
if (Request.Form[“txtEndDate”] == null) {
return ” “;
} else if (Request.Form[“txtEndDate”].Trim() == “”) {
return ” “;
} else {
return Request.Form[“txtEndDate”];
} }
public string getSelection() {
return Request.Form[“r1”];
}
public string getRadioStatus(int index) {
string rValue=””;
switch (index){
case 0 :
if (getSelection() == “0”) {
rValue = “CHECKED”;
} else {
if ((getSelection() != “1”) & (getSelection() != “2”) &
(getSelection() !=
“3”)) {
rValue = “CHECKED”;
} }
break;
case 1 :
if (getSelection() == “1”) {
rValue = “CHECKED”;
}
break;
case 2 :
if (getSelection() == “2”) {
rValue = “CHECKED”;
}
break;
case 3 :
if (getSelection() == “3”) {
rValue = “CHECKED”;
}
break;
}
return rValue;
}
</script>

As with the first example, the ASP.NET code
portion may utilize VB.NET instead of C#:

Private Sub btnSearch_Click(ByVal sender As Object,
ByVal e As EventArgs)
‘ Conduct search
End Sub
Public Function getStartDate() As String
Dim rValue As String
If (Request.Form(“txtStartDate”) Is Nothing) Then
getStartDate = ” “
ElseIf (Request.Form(“txtStartDate”).Trim() = “”) Then
getStartDate = ” “
Else
getStartDate = Request.Form(“txtStartDate”)
End If
End Function
Public Function getEndDate() As String
If (Request.Form(“txtEndDate”) Is Nothing) Then
getEndDate = ” “
ElseIf (Request.Form(“txtEndDate”).Trim() = “”) Then
getEndDate = ” “
Else
getEndDate = Request.Form(“txtEndDate”)
End If
End Function
Public Function getSelection() As String
getSelection = Request.Form(“r1”)
End Function
Public Function getRadioStatus(ByVal index As Integer) As
String
Dim rValue As String
Select Case (index)
Case 0
If (getSelection() = “0”) Then
rValue = “CHECKED”
Else
If ((getSelection() <> “1”) And (getSelection() <>
“2”) And (getSelection() <>
“3”)) Then
rValue = “CHECKED”
End If
End If
Case 1
If (getSelection() = “1”) Then
rValue = “CHECKED”
End If
Case 2
If (getSelection() = “2”) Then
rValue = “CHECKED”
End If
Case 3
If (getSelection() = “3”) Then
rValue = “CHECKED”
End If
End Select
Return rValue
End Function

Now it’s your choice

The approach utilized in your application
depends upon the situation. An intranet application may not require
the performance boost realized by client-side processing. An
Internet application will be a different story due to the fact that
users may be accessing the site via dialup, and the server load
will vary depending on the size of the user community.

TechRepublic’s free .NET newsletter, delivered each Wednesday, contains useful tips and coding examples on topics such as Web services, ASP.NET, ADO.NET, and Visual Studio .NET. Automatically sign up today!

With so many agile project management software tools available, it can be overwhelming to find the best fit for you. We've compiled a list of 10 tools you can use to take advantage of agile within your organization.

PURPOSE This policy describes the organization’s employee privacy guidelines and outlines employee privacy expectations. From the policy: POLICY DETAILS The organization’s IT equipment, services and systems are intended for business use only. However, the organization acknowledges that staff, consultants and volunteers occasionally require opportunities to make or receive personal phone calls, access personal email, utilize ...

Choose between server and client controls

Choose between server and client controls

Editor's Picks

TechRepublic Premium editorial calendar: IT policies, checklists, toolkits and research for download

The Best Human Resources Payroll Software of 2023

Windows 11 update brings Bing Chat into the taskbar

Tech jobs: No rush back to the office for software developers as salaries reach $180,000

The 10 best agile project management software for 2023

1Password is looking to a password-free future. Here’s why

Employee privacy policy

Security response policy

End user data backup policy

Electronic communication policy

Account Information

Choose between server and client controls

Project Management Insider Newsletter

Account Information

Share with Your Friends

Account Information

Contact aspatton

Editor's Picks

Project Management Insider Newsletter