Unit 5 Web Technology and Development

Introduction to Navigation Control in ASP.NET

Navigation control in ASP.NET manages the data passing between ASPX pages.

Web applications are having multiple pages interconnected with each other. So

proper navigation system must be there which can help the end user to successfully

work through an application. There are standard methods are available in

ASP.NET 1.x that offers well defined navigation system for the web application.

Only the method which is present for building navigation within web application is

to fill the pages with hyperlinks. The drawbacks of hyperlink are when you move

pages around or change pages names.

When the site grows and new pages are added and at that time it is very difficult

for the developer to manage all links in the application. ASP.NET 2.0 and above

eliminate problems of links with a built in site navigation features. It provides

consistent way for the user to navigate the website. It enables defining all the links

at central location file as xml file and display those links in list or navigation

menus in each required page using navigation controls.

Different Navigation Controls in ASP.NET

There are three navigation control in ASP.NET:

 SiteMapPath
  Menu Control

 TreeView

1. SiteMapPath Control
Site maps are XML files which are mainly used to describe the logical structure of

the web application. It defines the layout of all pages in web application and how

they relate to each other. Whenever you want you can add or remove pages to your

site map there by managing navigation of website efficiently. Site map files are

defined with .sitemap extension. <sitemap> element is the root node of the sitemap

file.

It has three attributes:

 Title: It provides textual description of the link.

 URL: It provides the location of the valid physical file.

 Description: It is used for tooltip of the link.

SiteMapPath control displays the navigation path of the current page. The path acts

as click able links to previous page. The sitemap path control uses the web. This

control creates the navigation mechanism which is linear path defining where the

user is currently located in navigation arrangement. It helps end user to know his

location in relation to the rest of the site.

Properties of SiteMapPath Control:

 PathSeparator: This property is to get or set the out separator text.

 NodeStyle: This property is used to set the style of all nodes that will be

displayed.

 RootNodeStyle: This property is used to set the style on the absolute root

node.

 PathDirection: This property is used to set the direction of the links

generated in the output.

 CurrentNodeStyle: This property is used to set the style on node that

represent the current page.

 ShowToolTips: This property is used to set the tooltip for the control.

Default value is true.

 PathSeparatorStyle: This property ja used to set the style of path separator.

2. Menu Control
Menu is an another navigation control in ASP.NET which is used to display menu

in web page. This control is used in combination with SiteMapDataSource control

for navigating the web Site. It displays two types of menu static menu and dynamic

menu. Static menu is always displayed in menu Control, by default only menu

items at the root levels are displayed. Dynamic menu is displayed only when the
use moves the mouse pointer over the parent menu that contains a dynamic sub

menu.

Properties of Menu Control:

 DataSourceID: This property is used to specify the data source to be used

using sitemap file as data source.

 CssClass: This property is used to specify the CSS class attribute for the

control.

 ImgeUrl: This property is used to specify the image that appear next to the

menu item.

 Orientation: This property is used to specify the alignment of menu control.

It can be horizontal or vertical.

 Tooltip: This property is used to specify the tooltip of the menu item when

you mouse over.

 Text: This property is used to specify the text to display in the menu.

 NavigateUrl: This property is used to specify the target location to send the

user when menu item is clicked.

 Target: This property is used to specify the target page location. It can be in

new window or same window.

  Value: This property is used to specify the unique id to use in server side

events.

3. TreeView Control
TreeView is an another navigation control used in ASP.NET to display the data in

hierarchical list manner. When TreeView is displayed for the first time, it displays

all of its nodes. User can control it by setting the property called ExpandDepth.

Properties of TreeView Control:

 DataSourceID: This property is used to specify the data source to be used

using sitemap file s data source.

 ShowLines: This property is used to specify the lines to connect the

individual item in the tree.

 CssClass: This property is used to specify the CSS class attribute for the

control.

 ExpandDepth: This property is used to specify the level at which items in

the tree are expanded.

The Login Control

The Login control displays a user interface for user authentication.

The Login control contains text boxes for the user name and password and a check
box that allows users to indicate whether they want the server to store their identity
using ASP.NET membership and automatically be authenticated the next time they
visit the site.

The Login control has properties for customized display, for customized messages,
and for links to other pages where users can change their password or recover a
forgotten password. The Login control can be used as a standalone control on a
main or home page, or you can use it on a dedicated login page.

If you use the Login control with ASP.NET membership, you do not need to write
code to perform authentication. However, if you want to create your own
authentication logic, you can handle the Login control's Authenticate event and add
custom authentication code.

Globalization and localization in ASP.NET

What is Globalization?

Globalization is a process by which develoeprs make a product supported in

multiple languages. This mostly involves improving the backend of web
applications, which ultimately contributes to the SEO of the website. This includes
meta-data, file names, labels and even the website URLs.

What is Localization?

Localization is the process to transalate the content to fulfil the demands of a

particular culture / language. This does not limit to just transalting the texts, but
also numbers, date and time formats, currency , symbols and so on..

Terms

Globalization (G11N): The process of making an app support different languages

and regions. The abbreviation comes from the first and last letters and the number
of letters between them.
Localization (L10N): The process of customizing a globalized app for specific
languages and regions.

Internationalization (I18N): Both globalization and localization.

Culture: A language and, optionally, a region.

Neutral culture: A culture that has a specified language, but not a region (for
example "en", "es").

Specific culture: A culture that has a specified language and region (for example,
"en-US", "en-GB", "es-CL").

Parent culture: The neutral culture that contains a specific culture (for example,
"en" is the parent culture of "en-US" and "en-GB").

Locale: A locale is the same as a culture.

Language and country/region codes

Tasks to localize an app

Globalizing and localizing an app involves the following tasks:

Make an ASP.NET Core app's content localizable.

Provide localized resources for the cultures the app supports

Implement a strategy to select the culture for each request

Designing a sample e-mail web application in ASP.NET involves several key

components. Here's a step-by-step guide to help you get started:

1. Master Page

A Master Page provides a consistent layout for the web application. It contains the
common elements like header, footer, and navigation menu.

Steps:
  Create a new Master Page (Site.master).
 Define the layout with placeholders for content.
 Link content pages to the Master Page.

html
<%@ Master Language="C#" AutoEventWireup="true"
CodeFile="Site.master.cs" Inherits="Site" %>
<!DOCTYPE html>
<html>
<head runat="server">
<title></title>
</head>
<body>
<form id="form1" runat="server">
<div>
<asp:ContentPlaceHolder ID="MainContent" runat="server" />
</div>
</form>
</body>
</html>

2. Standard Controls

Use standard ASP.NET controls for creating the user interface.

Example:

 TextBox for email input.

 Button for sending emails.

html
<asp:TextBox ID="txtEmail" runat="server" />
<asp:Button ID="btnSend" runat="server" Text="Send Email"
OnClick="btnSend_Click" />

3. JavaScript and AJAX

Enhance the user experience with JavaScript and AJAX for asynchronous
operations.

Example:
  Use UpdatePanel for partial page updates.

html
<asp:ScriptManager ID="ScriptManager1" runat="server" />
<asp:UpdatePanel ID="UpdatePanel1" runat="server">
<ContentTemplate>
<asp:TextBox ID="txtEmail" runat="server" />
<asp:Button ID="btnSend" runat="server" Text="Send Email"
OnClick="btnSend_Click" />
</ContentTemplate>
</asp:UpdatePanel>

4. Cookies and Sessions

Manage user sessions and store data using cookies.

Example:

 Store user email in a session.

csharp
Session["UserEmail"] = txtEmail.Text;

5. Uploading Files

Allow users to upload attachments with their emails.

Example:

 Use FileUpload control.

html
<asp:FileUpload ID="fileUpload" runat="server" />
<asp:Button ID="btnUpload" runat="server" Text="Upload"
OnClick="btnUpload_Click" />

6. Data Bound Controls

Display data using controls like GridView and Repeater.

Example:
  Use GridView to display sent emails.

html
<asp:GridView ID="GridView1" runat="server" AutoGenerateColumns="True" />

Sample Code for Sending Email

Here's a basic example of how to send an email using ASP.NET:

csharp
protected void btnSend_Click(object sender, EventArgs e)
{
string to = txtEmail.Text;
string from = "[email protected]";
string subject = "Test Email";
string body = "This is a test email.";

MailMessage mail = new MailMessage(from, to, subject, body);

SmtpClient client = new SmtpClient("smtp.example.com");

try
{
client.Send(mail);
lblStatus.Text = "Email sent successfully!";
}
catch (Exception ex)
{
lblStatus.Text = "Error sending email: " + ex.Message;
}
}

Method 2 for Designing a sample email web application in ASP.NET using the
features you mentioned—such as Master Page, Standard Controls, JavaScript,
AJAX, Cookies, Sessions, file uploading, and Data-Bound Controls like GridView
and Repeater—requires building a well-structured project. Below is an outline to
guide you through the key components and code snippets for building such an
application.

1. Create the ASP.NET Web Application

Start by creating an ASP.NET Web Forms application in Visual Studio. To do this:

 Open Visual Studio.

 Go to File > New > Project.
 Choose ASP.NET Web Application and select the Web Forms template.

2. Create a Master Page

The Master Page is used to create a consistent layout for the application. You can
create a master page that contains the header, footer, and navigation that will be
reused across multiple pages.

Master Page Example (Site.master):

asp
Copy code
<%@ Master Language="C#" AutoEventWireup="true"
CodeFile="Site.master.cs" Inherits="SiteMaster" %>

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title>Email Web Application</title>
<script src="Scripts/jquery-3.6.0.min.js"></script> <!-- jQuery for AJAX -->
<link href="Styles/Site.css" rel="stylesheet" type="text/css" />
</head>
<body>
<form id="form1" runat="server">
<div>
<header>
<h1>Email Web Application</h1>
<nav>
<ul>
<li><a href="Inbox.aspx">Inbox</a></li>
<li><a href="Compose.aspx">Compose</a></li>
<li><a href="Logout.aspx">Logout</a></li>
</ul>
</nav>
</header>
 <div id="content">
<asp:ContentPlaceHolder ID="MainContent" runat="server" />
</div>
</div>
</form>
</body>
</html>

3. Design the Inbox Page (GridView for Email List)

In the Inbox page, you can use the GridView control to display emails. You can
also use AJAX for partial page updates and JavaScript for enhancing user
interactions.

Inbox.aspx (GridView to display emails):

asp
Copy code
<%@ Page Language="C#" MasterPageFile="~/Site.master"
AutoEventWireup="true" CodeBehind="Inbox.aspx.cs"
Inherits="EmailApp.Inbox" %>

<asp:Content ID="Content1" ContentPlaceHolderID="MainContent"

Runat="server">
<h2>Inbox</h2>
<asp:GridView ID="GridViewInbox" runat="server"
AutoGenerateColumns="False"
OnRowCommand="GridViewInbox_RowCommand"
CssClass="grid" Width="100%">
<Columns>
<asp:BoundField DataField="Sender" HeaderText="Sender"
SortExpression="Sender" />
<asp:BoundField DataField="Subject" HeaderText="Subject"
SortExpression="Subject" />
<asp:BoundField DataField="DateReceived" HeaderText="Date"
SortExpression="DateReceived" />
<asp:TemplateField>
<ItemTemplate>
<asp:Button ID="btnRead" runat="server" Text="Read"
CommandName="Read" CommandArgument='<%# Eval("EmailID") %>' />
 </ItemTemplate>
</asp:TemplateField>
</Columns>
</asp:GridView>
</asp:Content>

Inbox.aspx.cs (Backend for GridView Data Binding):

csharp
Copy code
public partial class Inbox : System.Web.UI.Page
{
protected void Page_Load(object sender, EventArgs e)
{
if (!IsPostBack)
{
// Simulate email data (you can replace it with a real database)
List<Email> emails = new List<Email>
{
new Email { EmailID = 1, Sender = "[email protected]", Subject =
"Meeting Update", DateReceived = DateTime.Now },
new Email { EmailID = 2, Sender = "[email protected]", Subject =
"Project Proposal", DateReceived = DateTime.Now.AddMinutes(-10) },
// More emails...
};

GridViewInbox.DataSource = emails;
GridViewInbox.DataBind();
}
}

protected void GridViewInbox_RowCommand(object sender,

GridViewCommandEventArgs e)
{
if (e.CommandName == "Read")
{
int emailID = Convert.ToInt32(e.CommandArgument);
// Handle reading the email, show details, etc.
Response.Redirect($"ReadEmail.aspx?id={emailID}");
}
 }
}

Email Class (Model for Data Binding):

csharp
Copy code
public class Email
{
public int EmailID { get; set; }
public string Sender { get; set; }
public string Subject { get; set; }
public DateTime DateReceived { get; set; }
}

4. File Upload Feature

You can use the FileUpload control to allow users to attach files to their emails.

Compose.aspx (File Upload Control):

asp
Copy code
<%@ Page Language="C#" MasterPageFile="~/Site.master"
AutoEventWireup="true" CodeBehind="Compose.aspx.cs"
Inherits="EmailApp.Compose" %>

<asp:Content ID="Content1" ContentPlaceHolderID="MainContent"

Runat="server">
<h2>Compose New Email</h2>
<asp:TextBox ID="txtRecipient" runat="server" placeholder="Recipient" />
<asp:TextBox ID="txtSubject" runat="server" placeholder="Subject" />
<asp:TextBox ID="txtBody" runat="server" TextMode="MultiLine"
placeholder="Email Body" />

<asp:FileUpload ID="FileUpload1" runat="server" />

<asp:Button ID="btnSend" runat="server" Text="Send"

OnClick="btnSend_Click" />
</asp:Content>
Compose.aspx.cs (Handling File Upload and Email Sending):

csharp
Copy code
protected void btnSend_Click(object sender, EventArgs e)
{
string recipient = txtRecipient.Text;
string subject = txtSubject.Text;
string body = txtBody.Text;
HttpPostedFile file = FileUpload1.PostedFile;

if (file != null && file.ContentLength > 0)

{
string fileName = Path.GetFileName(file.FileName);
string savePath = Server.MapPath("~/UploadedFiles/") + fileName;
file.SaveAs(savePath);
}

// Simulate sending email (you can integrate with a real email API like SMTP)
Response.Redirect("Inbox.aspx");
}

5. JavaScript and AJAX (Using jQuery for Dynamic Behavior)

AJAX can be used to perform asynchronous operations without reloading the page.
For example, use AJAX to send a request for retrieving emails or updating the
status of an email without reloading the whole page.

AJAX Call Example (Inbox.aspx):

javascript
Copy code
$(document).ready(function() {
$("#btnRefresh").click(function() {
$.ajax({
url: "GetEmails.aspx",
method: "GET",
success: function(response) {
$("#GridViewInbox").html(response);
}
 });
});
});

6. Session and Cookies for Authentication

For session management, you can use cookies and sessions to store user
information.

Login.aspx (Login Page with Session):

asp
Copy code
<%@ Page Language="C#" AutoEventWireup="true"
CodeBehind="Login.aspx.cs" Inherits="EmailApp.Login" %>

<asp:Content ID="Content1" ContentPlaceHolderID="MainContent"

Runat="server">
<h2>Login</h2>
<asp:TextBox ID="txtUsername" runat="server" placeholder="Username" />
<asp:TextBox ID="txtPassword" runat="server" TextMode="Password"
placeholder="Password" />

<asp:Button ID="btnLogin" runat="server" Text="Login"

OnClick="btnLogin_Click" />
</asp:Content>

Login.aspx.cs (Handling Session):

csharp
Copy code
protected void btnLogin_Click(object sender, EventArgs e)
{
string username = txtUsername.Text;
string password = txtPassword.Text;

if (username == "admin" && password == "password") // Basic Authentication

(can be replaced with real logic)
{
Session["Username"] = username; // Store session data
Response.Redirect("Inbox.aspx");
 }
else
{
// Show error message
}
}