SDI and MDI Application

🠶 A single-document interface, SDI, is an application primarily made of a form

equipped with a menu. An example is Notepad:
🠶 In some cases, an SDI can also have a toolbar and/or a status bar. Here is an example
from Microsoft Works Spreadsheet:
🠶 All these features are left to the programmer to add and configure.
🠶 Although Notepad is text-based, an SDI can be any type of application, text,
graphics, spreadsheet, anything. Therefore, to create an SDI, start from a normal
form, add a menu to it, and configure it to do what you want.
🠶 To create a document using an SDI, the user launches the application. The SDI then
presents a rectangular window with one frame and the inside is the document the
user will use. In most cases, the application itself creates the document. The user can
work on it and do whatever the application allows. To create another document of the
same type, the user must open another instance of the application.

44
 SDI and MDI Application
🠶 Example of single-document interface - SDI

45
 SDI and MDI Application
🠶 A multiple-document interface, MDI, is an application that primarily has a form
and a menu. Some, if not most MDIs also have one or more toolbars and/or a status
bar.
🠶 Like a normal application, to use an MDI, the user must launch it.
🠶 In some cases, when the application starts, it is empty; that is, no document is created
and the title bar displays a caption, usually the name of the application.
🠶 Usually, there are steps the user must follow to create a document. In some other
cases, when the application is launched, it automatically creates a document. A
document resides inside the parent frame of the application. That is, a child
document can use only the area reserved for it. The child document has its own
system icon, its own title bar, and its system buttons (Minimize, Maximize/Restore,
and Close).

46
 SDI and MDI Application
🠶 To use the whole area, the user can maximize the child document. When this is done,
the child merges its title bar with the parent's. The new caption of the title bar
becomes made of the text of the parent, followed by -, and followed by the caption
the child window was using. The system buttons of the child document display under
those of the parent frame:
🠶 Once a document has been created, the user can use it. The application must give the
user the ability to create other documents while still using the application. If many
documents have been created, all of them are confined in the frame of the
application:

47
 .Net Server Controls

Processing
Request
Http Request

Browser Web
Http Response Server

48
 .Net Server Controls
🠶 What is a Website ?
🠶 A website is a collection of related web pages, including multimedia content, typically identified with a
common domain name, and published on at least one web server.

🠶 What is webpage?
🠶 A webpage is a document commonly written in Hypertext Markup Language (HTML) that is accessible through
the Internet or other network using an Internet browser.

🠶 ASP Refers to Active Server Pages.

🠶 ASP.NET is a server-side web application framework designed for web development to work with dynamic web
pages.
🠶 It is developed by Microsoft to allow programmers to build dynamic web sites, web applications and web
services.
🠶 ASP.NET pages have the extension .aspx.

49
 .Net Server Controls
🠶 The life cycle of the ASP.NET page specifies how the page is instantiated and processed to generate the
specific output.

Page
request

Unload Start

Rendering Initialization

50 Load
 .Net Server Controls
🠶 How to Create Website?  Start Visual Studio and click File menu  New  Web Site.

51
 .Net Server Controls
Select
🠶 . Select Empty
Language Website

Adding a New Web Form to Website

Select
path Press
OK

52
 .Net Server Controls

Configuration
File

53
 .Net Server Controls
🠶 Adding a New Web Form to Website

54
 .Net Server Controls
🠶 Design Page of Website (.aspx)

Design
Code

Solution
Explorer

ToolBox Design

Property
Window

55
 .Net Server Controls
🠶 Viewing an Output

Right click on Web

Form & click View in
Browser

56
 .Net Server Controls
🠶The ASP.NET controls are designed similar to standard Windows
forms controls.

🠶This controls are used to design the interface of a web application.

🠶Example
🠶When you visit the website of Gmail, you type your user name and
password in text box, which is one control.
🠶ASP.NET provides a standard set of controls that can be used to
develop web applications.
57
 .Net Server Controls
🠶 These controls can be easily used by dragging and dropping them at any
desired location on a web form.

🠶 Based on tasks performed by them, these controls are grouped under various
categories.

🠶 For example controls for validating the data are placed under the validation
tab and controls used for logging on to websites are placed under the Login
tab.

🠶 The System.Web.UI.Control namespace is the base class for all web server
controls.
58
 .Net Server Controls
🠶 The standard web form controls are inherited from a common base class namely
System.Web.UI.WebControls class.

Standard Controls
Label Control
TextBox Control
Validation Controls
Button Control
RequiredFieldValidator List Controls
CheckBox Control
RangeValidator DropDownList
RadioButton Control
CompareValidator CheckBoxList
HyperLink Control
RegularExpressionValidator RadioButtonList
Image Control
CustomValidator ListBox
FileUpload Control
ValidationSummary
LinkButton Control
ImageButton Control
59 HiddenField Control
 Master Page
🠶 ASP.NET master pages allow you to create a consistent layout for the pages
in your application.

🠶 A single master page defines the look and feel and standard behavior that you
want for all of the pages (or a group of pages) in your application.

🠶 You can then create individual content pages that contain the content you
want to display.

🠶 When users request the content pages, they merge with the master page to
produce output that combines the layout of the master page with the content
from the content page.
60
 Master Page
🠶 Master pages actually consist of two pieces, the master page itself and one or more content
pages.

🠶 Master Pages
🠶 A master page is an ASP.NET file with the extension .master (for example, MySite.master) with a
predefined layout that can include static text, HTML elements, server controls and one or more
content place holders.
🠶 The master page is identified by a special @ Master directive that replaces the @ Page directive
that is used for ordinary .aspx pages.

🠶 Replaceable Content Placeholders

🠶 In addition to static text and controls that will appear on all pages, the master page also includes
one or more ContentPlaceHolder controls.
🠶 These placeholder controls define regions where replaceable content will appear.
61
 Master Page
🠶 Content Page

62
 Master Page
🠶 Simple Master Page

Simple Master Content Page

Final Page

🠶 Nested Master Page

Website

Master Master Content

Page 1 page 2 Page 2

Content Master Final Page 2

page 1 page 3

63 Final Page 1
 Master Page
🠶 Advantages of Master Page

🠶 It allows you to centralize the common functionality of your pages so that you can make
updates in one place only.
🠶 It makes easy to create one set of controls and code and apply the results to a set of pages. For
example, you can use controls on the master page to create a menu that applies to all
pages.
🠶 It will give you a fine-grained control over the layout of the final page by allowing you to
control how the placeholder controls are rendered.
🠶 It provides an object model that allows you to customize the master page from individual
content pages.

64
 Themes, Skins and CSS
🠶 A theme is a collection of property settings that allow you to define the look of pages and
controls, and then apply the look consistently across all the pages & entire Web application.

🠶 Themes and Control Skins

🠶 Themes are made up of a set of elements:

🠶 skins, cascading style sheets (CSS), images, and other resources. At a minimum, a theme will
contain skins.

🠶 Themes are defined in special directories in your Web site or on your Web server.

65
 Themes, Skins and CSS
🠶 A page theme is a theme folder with control skins, style sheets, graphics files and other
resources created as a subfolder of the \App_Themes folder in your Web site.

🠶 Each theme is a different subfolder of the \App_Themes folder.

🠶 The following example shows a typical page theme, defining two themes named BlueTheme
and PinkTheme.

MyWebSite
App_Themes
BlueTheme
Controls.skin
BlueTheme.css
PinkTheme
Controls.skin
PinkTheme.css
66
 Themes, Skins and CSS
🠶 How to Apply Theme in a Web Page?

🠶 You can define the name of the theme and wish to make use of in the Page directives of the
aspx page.
🠶 This can be done as below:

<%@ Page Theme="Theme1" Language="C#" AutoEventWireup="true"

CodeFile="Default.aspx.cs" Inherits="_Default"
EnableTheming="true"%>

67
 Themes, Skins and CSS
🠶 Skins
🠶 A skin file has the file name extension .skin and contains property settings for individual
controls such as Button, Label, TextBox, or Calendar controls.
🠶 Control skin settings are like the control markup itself, but contain only the properties you
want to set as part of the theme.

🠶 For example, the following is a control skin for a Button control:

🠶 <asp:button runat="server" BackColor="lightblue" ForeColor="black" />

🠶 You create .skin files in the Theme folder.

🠶 A .skin file can contain one or more control skins for one or more control types.
🠶 You can define skins in a separate file for each control or define all the skins for a theme in a
single file.
68
 Themes, Skins and CSS
🠶 There are two Types of Skins:
🠶 Default Skin
🠶 Named Skin

🠶 A default skin automatically applies to all controls of the same type when a theme is applied
to a page.
🠶 A control skin is a default skin if it does not have a SkinID attribute.
🠶 For example, if you create a default skin for a Calendar control, the control skin applies to all
Calendar controls on pages that use the theme.
🠶 (Default skins are matched exactly by control type, so that a Button control skin applies to all
Button controls, but not to LinkButton controls or to controls that derive from the Button
object.)

69
 Themes, Skins and CSS
🠶 A named skin is a control skin with a SkinID property set. Named skins do not automatically
apply to controls by type.

🠶 Instead, you explicitly apply a named skin to a control by setting the control's SkinID
property.

🠶 Creating named skins allows you to set different skins for different instances of the same
control in an application.

70
 Themes, Skins and CSS
🠶 Cascading Style Sheets (CSS)

🠶 A theme can also includes a cascading style sheet (.css file).

🠶 When you put a .css file in the theme folder, the style sheet is applied automatically as part of
the theme.

🠶 You define a style sheet using the file name extension .css in the theme folder.

71
 Configuration Overview
🠶 The behavior of an ASP.NET application is affected by different settings in the configuration
files:
🠶 machine.config
🠶 web.config
🠶 The machine.config file contains default and the machine-specific value for all supported
settings.
🠶 The machine settings are controlled by the system administrator and applications are
generally not given access to this file.
🠶 An application however, can override the default values by creating web.config files in its
roots folder. The web.config file is a subset of the machine.config file.
🠶 Visual Studio generates a default web.config file for each project. An application can execute
without a web.config file, however, we cannot debug an application without a web.config
file.

72
 Configuration Overview
🠶 web.config file is an XML-based configuration file used in ASP.NET-based applications to
manage various settings that are concerned with the configuration of our website.
🠶 Hierarchy of the Web.config file.
<configuration>
<configSections>
<sectionGroup></sectionGroup>
</configSections>

<system.web></system.web>

<connectionStrings></connectionStrings>
<appSettings></appSettings>
…..
</configuration>
73
 Configuration Overview
🠶 There are number of important settings that can be stored in the configuration file. Some of
the most frequently used configurations, stored conveniently inside web.config file are:
🠶 Database Connections
🠶 Caching Settings
🠶 Session States
🠶 Error Handling
🠶 Security
🠶 Benefits of XML-based Configuration files
🠶 ASP.NET Configuration system is extensible and application specific information can be stored
and retrieved easily. It is human readable.
🠶 We need not restart the web server when the settings are changed in configuration file.
ASP.NET automatically detects the changes and applies them to the running ASP.NET application.
🠶 We can use any standard text editor or XML parser to create and edit ASP.NET configuration files.

74
 Configuration Overview
🠶 Global.asax

🠶 The Global.asax is also known as the ASP.NET application file and is used to serve application-level
and session-level events.
🠶 It allows us to write code that response to global application events raised by ASP.NET or by
HttpModules.
🠶 These events fire at various points during the lifetime of a web application, including when the
application domain is first created.
🠶 The Global.asax file resides in the root directory of an ASP.NET-based application
🠶 At run time, Global.asax is parsed and compiled into a dynamically generated .NET Framework class
derived from the HttpApplication base class.
🠶 The Global.asax file is optional. If you do not define the file, the ASP.NET page framework assumes
that you have not defined any application or session event handlers

75
 Configuration Overview
🠶 Basic Application Events of Global.asax

Event Handling Method Description

event occurs when the application starts, which is the first time it receives a
request from any user. It doesn’t occur on subsequent requests. This event is
Application_Start()
commonly used to create or cache some initial information that will be reused
later.
event occurs when the application is shutting down, generally because the web
Application_End()
server has restarted. You can insert cleanup code here.
event occurs with each request the application receives, just before the page
Application_BeginRequest()
code is executed.
event occurs with each request the application receives, just after the page code
Application_EndRequest()
is executed.
Session_Start() event occurs whenever a new user request is received and a session is started.
event occurs when a session times out or is programmatically ended. This event
76 Session_End() By - Dr. Jay B. Teraiya
is only raised if you are using in-process session state storage.
 .Net State Management
🠶 Whenever we visit a website, our browser communicates with the respective server using the HTTP or
HTTPs protocol.
🠶 As HTTP is a stateless protocol. It just cleans up or we can say removes all the resources/references that
were serving a specific request in the past.
🠶 These resources can be:
🠶 Objects
🠶 Allocated Memory
🠶 Sessions ID's
🠶 Some URL info
🠶 and so on.
🠶 In traditional Web programming, this would typically mean that all information associated with the page
and the controls on the page would be lost with each round trip.
🠶 For example, if a user enters information into a text box, that information would be lost in the round trip
from the browser or client device to the server.

77
 .Net State Management
🠶 To overcome this inherent limitation of traditional Web programming, ASP.NET includes several
options that help you preserve data on both a per-page basis and an application-wide basis.

🠶 The state of a web application helps you to store the runtime changes that have been made to the web
application.

🠶 For example, a user selects and saves some products in the shopping cart of an online shopping
websites.

🠶 For that you have to store it to state, otherwise the changes are discarded.

78
 .Net State Management
🠶 State Management Techniques

State Management

Sever Side Client Side

Session Application Cookies Control State Query String

ViewState HiddenField
In-Proc State SQL Server
79 Server
 .Net State Management
🠶 Client-Side State Management

🠶 In Client-Side State Management, the state of the page is maintained at the client side.

🠶 The following are the various techniques to do Client-Side State Management.

🠶 View State
🠶 Cookies
🠶 Query String

🠶 In Client-Side State Management, data is stored at the client side and sent to the browser every time.
🠶 This increases bandwidth usage.
🠶 If the size of data is greater then the application will be less responsive. Performance issues would
occur.

80
 .Net State Management
🠶 Server-Side State Management

🠶 In the Server-Side State Management, the state of the page is maintained at the server side.

🠶 The following are the various techniques to do Server-Side State Management:

🠶 Application State
🠶 Session State
🠶 SQL Server database

🠶 Server-Side State Management provides better security.

🠶 The state is saved on the server and therefore isn't delivered to the client.
🠶 The server side reduces the traffic to and from the client because the data is not sent to the browser.

81
 Caching in ASP.Net
🠶 What is Caching?

🠶 Caching is a technique of storing frequently used data/information in memory, so that,

when the same data/information is needed next time, it could be directly retrieved from the
memory instead of being generated by the application.

🠶 Caching is extremely important for performance boosting in ASP.NET, as the pages and
controls are dynamically generated here. It is especially important for data related
transactions, as these are expensive in terms of response time.

🠶 Caching places frequently used data in quickly accessed media such as the random
access memory of the computer. The ASP.NET runtime includes a key-value map of CLR
objects called cache. This resides with the application and is available via the HttpContext
and System.Web.UI.Page.
82
 Caching in ASP.Net
🠶 ASP.NET provides the following different types of caching:

🠶 Output Caching : Output cache stores a copy of the finally rendered HTML pages or part
of pages sent to the client. When the next client requests for this page, instead of
regenerating the page, a cached copy of the page is sent, thus saving time.

🠶 Data Caching : Data caching means caching data from a data source. As long as the cache
is not expired, a request for the data will be fulfilled from the cache. When the cache is
expired, fresh data is obtained by the data source and the cache is refilled.

🠶 Object Caching : Object caching is caching the objects on a page, such as data-bound
controls. The cached data is stored in server memory.

83
 Caching in ASP.Net
🠶 The data will not be available in the following cases:

🠶 If its lifetime expires,

🠶 If the application releases its memory,
🠶 If caching does not take place for some reason.

🠶 You can access items in the cache using an indexer and may control the lifetime of objects in
the cache and set up links between the cached objects and their physical sources.

84
 Navigation Control in ASP.NET
🠶 Navigation controls are very important for websites. Navigation controls are basically used to
navigate the user through webpage. It is more helpful for making the navigation of pages
easier. There are three controls in ASP.NET ,Which are used for Navigation on the webpage.

🠶 TreeView control
🠶 Menu Control
🠶 SiteMapPath control

🠶 There are some Namespaces, which are used for above Navigation controls which are given
below:
🠶 Using.System.Web.UI.WebControls.TreeView ;
🠶 Using.System.Web.UI.WebControls.Menu ;
🠶 Using.System.Web.UI.WebControls.SiteMapPath ;

85
 Navigation Control in ASP.NET
🠶 The TreeView Control

🠶 The TreeView control is used for logically displaying the data in a hierarchical structure. We
can use this navigation control for displaying the files and folders on the webpage. We can
easily display the XML document, WebSite Map files and Database records in a tree
structure.
🠶 First open your visual studio  File  New  Website  Select ASP.NET Empty Website.
open solution explorer  Add New Web Form  Drag and Drop TreeView control from
Toolbox as sown below:

86
 Navigation Control in ASP.NET
🠶 The TreeView Control

🠶 Now go properties of TreeView control  Click Nodes  Add Root and child Node as
shown below:

87
 Navigation Control in ASP.NET
🠶 The Menu Control

🠶 The menu control is a Navigation control, which is used to display the site navigation
information .This can be used to display the site data structure vertically and horizontally.
🠶 It can be used a binding control as TreeView control. Means we can easily bind the XML and
SiteMap data in menu control.
🠶 First Add a New Web Form in solution Explorer  drag and drop menu control on the Form
 now select Views = static as shown below:

88
 Navigation Control in ASP.NET
🠶 The Menu Control

🠶 Now click Edit Menu Items... Add parent and child nodes as shown below:

89
 Navigation Control in ASP.NET
🠶 The SiteMapPath Control

🠶 The SiteMapPath control is also used to display the Navigation information on the site.It
display the current page's context within the entire structure of a website.

🠶 There are some steps to implement the SiteMapPath control on the web page.Which are given
below:

🠶 Step 1: First open your visual studio  File  New  Website  Select ASP.NET Empty
Website  Open solution Explorer  Add a Web Form (SiteMap.aspx)  Now again Add
Site Map File in solution Explorer  open web.sitmap file  write the following codes ,
which are given below:

90
 Navigation Control in ASP.NET
🠶 The SiteMapPath Control

🠶 <?xml version="1.0" encoding="utf-8" ?>

<siteMap xmlns="http://schemas.microsoft.com/AspNet/SiteMap-File-1.0" >
<siteMapNode url="SiteMap.aspx" title="Country" description="">
<siteMapNode url="page1.aspx" title="India" description="" />
<siteMapNode url="page2.aspx" title="China" description="" />
<siteMapNode url="page3.aspx" title="US" description="" />
</siteMapNode>
</siteMap>

91
 Navigation Control in ASP.NET
🠶 The SiteMapPath Control
🠶 Step 2: Now drag and drop SiteMapPath control on the web Form (SiteMap.aspx)  Now drag and
drop HyperLink control on the Form as shown below:

🠶 Step 3: Now Add three more Web Form (page1.aspx ,page2.aspx, page3.aspx) in Solution
Explorer  Go properties of HyperLink Button control  set NavigateUrl  Write Text
Information ,as shown below:

92
93