Study with the several resources on Docsity
Earn points by helping other students or get them with a premium plan
Prepare for your exams
Study with the several resources on Docsity
Earn points to download
Earn points by helping other students or get them with a premium plan
ASP.NET - Introduction to Web Pages, SPA, MVC, Web Forms, Working with Server Controls, Creating Consistent Looking Website and ASP.NET - Navigation and User Controls
Typology: Study notes
1 / 37
This page cannot be seen from the preview
Don't miss anything!
Abueva, Marlou
Estidola, Vanessa Mae
Jasangas, Lloyd
Malabarbas, Glady Mae
Orias, Maria Kazandra
Ramos, Kenneth
Sierra, Timothy James
Uson, Renz Carlo
February 1, 2016
SBIT-PT4C
Topic Reporter Duration
1. Introduction to ASP.NET
a. Introduction
b. ASP.NET Web Pages
c. ASP.NET SPA
Glady Mae Malabarbas 10 Mins
d. ASP.NET MVC
e. ASP.NET Web Forms
Vanessa Mae Estidola 10 Mins
2. Working with Server Controls
a. ASP.NET Server Controls Concepts
b. Types of Controls
Maria Kazandra Orias 15 Mins
c. ASP.NET State Engine
3. Creating Consistent Looking Website a. Consistent Layout with Master Pages
Timothy James Sierra 20 Mins
b. Using Centralized Base Page c. Themes
Kenneth Ramos 20 Mins
d. Skins
1. Navigation
a. Understanding Absolute and Relative URLs
Lloyd Jasangas 15 Mins
b. Using the Navigation Controls c. Programmatic Redirection
Marlou Abueva 20 Mins
2. User Controls
a. Creating and Adding User Controls
b. Adding Logic to User Controls
Renz Carlo Uson 20 Mins
ASP.NET Single Page Application is a web app that fits on a single web page providing a fluid UX by loading all necessary code with a single page load. In Single Page Applications (SPAs), the entire page is loaded in the browser after the initial request, but subsequent interactions take place through Ajax requests. This means that the browser has to update only the portion of the page that has changed; there is no need to reload the entire page. The SPA approach reduces the time taken by the application to respond to user interactions, resulting in a more fluid experience.
The architecture of a SPA involves certain challenges that are not present in traditional web applications. However, emerging technologies like ASP.NET Web API, JavaScript frameworks like AngularJS and new styling features provided by CSS3 make it really easy to design and build SPAs.
d. ASP.NET MVC
The Model-View-Controller (MVC) architectural pattern separates an application into three main components: the model, the view, and the controller. The ASP.NET MVC framework provides an alternative to the ASP.NET Web Forms pattern for creating Web applications. The ASP.NET MVC framework is a lightweight, highly testable presentation framework that (as with Web Forms-based applications) is integrated with existing ASP.NET features, such as master pages and membership-based authentication. The MVC framework is defined in the System.Web.Mvc assembly.
MVC design pattern
MVC is a standard design pattern that many developers are familiar with. Some types of Web applications will benefit from the MVC framework. Others will continue to use the traditional ASP.NET application pattern that is based on Web Forms and postbacks. Other types of Web applications will combine the two approaches; neither approach excludes the other.
The MVC framework includes the following components:
Models. Model objects are the parts of the application that implement the logic for the application's data domain. Often, model objects retrieve and store model state in a database. For example, a Product object might retrieve information from a database, operate on it, and then write updated information back to a Products table in a SQL Server database. In small applications, the model is often a conceptual separation instead of a physical one. For example, if the application only reads a dataset and sends it to the view, the application does not have a physical model layer and associated classes. In that case, the dataset takes on the role of a model object.
Views. Views are the components that display the application's user interface (UI). Typically, this UI is created from the model data. An example would be an edit view of a
Products table that displays text boxes, drop-down lists, and check boxes based on the current state of a Product object. Controllers. Controllers are the components that handle user interaction, work with the model, and ultimately select a view to render that displays UI. In an MVC application, the view only displays information; the controller handles and responds to user input and interaction. For example, the controller handles query-string values, and passes these values to the model, which in turn might use these values to query the database.
The MVC pattern helps you create applications that separate the different aspects of the application (input logic, business logic, and UI logic), while providing a loose coupling between these elements. The pattern specifies where each kind of logic should be located in the application. The UI logic belongs in the view. Input logic belongs in the controller. Business logic belongs in the model. This separation helps you manage complexity when you build an application, because it enables you to focus on one aspect of the implementation at a time. For example, you can focus on the view without depending on the business logic.
The loose coupling between the three main components of an MVC application also promotes parallel development. For example, one developer can work on the view, a second developer can work on the controller logic, and a third developer can focus on the business logic in the model.
e. ASP.NET WEB FORMS
ASP.NET Web Forms is a part of the ASP.NET web application framework and is included with Visual Studio. It is one of the four programming models you can use to create ASP.NET web applications, the others are ASP.NET MVC, ASP.NET Web Pages, and ASP.NET Single Page Applications.
Web Forms are pages that your users request using their browser. These pages can be written using a combination of HTML, client-script, server controls, and server code. When users request a page, it is compiled and executed on the server by the framework, and then the framework generates the HTML markup that the browser can render. An ASP.NET Web Forms page presents information to the user in any browser or client device.
Using Visual Studio, you can create ASP.NET Web Forms. The Visual Studio Integrated Development Environment (IDE) lets you drag and drop server controls to lay out your Web Forms page. You can then easily set properties, methods, and events for controls on the page or for the page iteself. These properties, methods, and events are used to define the web page's behavior, look and feel, and so on. To write server code to handle the logic for the page, you can use a .NET language like Visual Basic or C#.
ASP.NET Web pages, known officially as Web Forms, are the main building blocks for application development in ASP.NET. There are two basic methodologies for Web Forms, a web
Data Controls
Data controls were introduced in ASP.NET 2.0, and offer an easy way to access various data sources like databases, XML files, and objects. Instead of writing lots of code to access the data source as you had to do in earlier versions of ASP.NET, you simply point your data control to an appropriate data source, and the ASP.NET runtime takes care of most of the difficult issues for you.
Validation Controls
Validation controls enable you to rapidly create Web Forms with validation rules that prohibit users from entering invalid data. For example, you can force users to enter values for required fields and check whether the entered data matches a specific format like a valid date or a number between 1 and 10. They even allow you to write custom code to create validation routines that are not covered by the standard controls. The beauty
of the validation controls is that they can execute both on the client and the server, enabling you to create responsive and secure web applications.
Navigation Controls
The controls you find under the Navigation category of the Toolbox are used to let users find their way through your site. The TreeView control presents a hierarchical display of data and can be used to show the structure of your site, giving easy access to all the pages in the site. The Menu control does a similar thing and provides options for horizontal and vertical fold-out menus.
The SiteMapPath control creates a “breadcrumb trail” in your web pages that enables your users to easily find their way up in the hierarchy of pages in your site.
Login Controls
Just like the Data and Navigation controls, the Login controls were introduced in ASP.NET 2.0 and are still strongly present in ASP.NET 4. With very little effort, login controls enable you to create secure web sites where users need to sign up and log in before they can access specific parts of the web site (or even the entire web site). In addition, they provide the tools for users to change their password, or request a new password if they forget the old one, and enable you to display different data depending on the logged-in status and role of the user.
Ajax Extensions
More than a year after the official release of ASP.NET 2.0 in November 2005, Microsoft released the ASP.NET 2.0 AJAX Extensions 1.0 as an add-on for ASP.NET 2.0. These extensions enable you to create flicker-free web applications that are able to retrieve data from the server from client-side JavaScript without a full postback. Ever since Ajax became a hot technology in 2005, Microsoft has been working hard to get to the top of the Ajax implementers.
WebParts
ASP.NET WebParts are a set of controls that enables an end user of a web page to change the appearance and behavior of a web site. With a few simple actions, users can change the entire appearance of a web site by rearranging content, hiding or showing parts of the web page, and adding other content fragments to the page. The ASP.NET WebParts are outside the scope of this book because they deserve an entire book.
Dynamic Data
The controls in this category are used in Dynamic Data Web Sites.
Dynamic Data sites enable you to quickly build a user interface to manage data in a database.
c. ASP.NET STATE ENGINE
__
When a page with such a TextBox in it is posted back, the browser also sends the value of the control back to the server. The ASP.NET run time can then simply look at that value to prepopulate the text box again, instead of getting the value from View State. Obviously, this is more efficient than storing the value in View State too. If that were the case, the value would get sent to the server twice: once in the text box and once in View State. Especially with large values, this could quickly increase the page’s size, and thus its load time. For some features — such as tracking changes made at the client — these controls still need to store their values in View State as well, and do so on a need-to-have basis.
In addition to View State, controls support the concept of Control State. Controls use that mechanism to keep track of data they absolutely need to operate correctly. You cannot disable Control State but, since only limited amounts of data are stored in Control State, this is not a problem.
a. CONSISTENT LAYOUT WITH MASTER PAGES
With most websites, only part of the page changes when you go from one page to another. The parts that don’t change usually include common regions like the header, a menu, and the footer. To create web pages with a consistent layout, you need a way to define these relatively static regions in a single template file. Versions of ASP.NET prior to 2.0 did not have a template solution, so you were forced to duplicate your page layout on every single page in the website, or resort to weird programming tricks. Fortunately, this is no longer the case due to master pages. The biggest benefit of master pages is that they enable you to define the look and feel of all the pages in your site in a single location. This means that if you want to change the layout of your site — for instance, if you want to move the menu from the left to the right — you need to modify only the master page, and the pages based on this master pick up the changes automatically.
When master pages were introduced in ASP.NET 2.0, they were quickly embraced by the developer community as the template solution for ASP.NET pages because they are very easy to use. Even better, VS has great design-time support, because it enables you to create and view your pages at design time during development, rather than only in the browser at run time.
To some extent, a master page looks like a normal ASPX page. It contains static HTML such as the **, , and ** elements, and it can also contain other HTML and ASP.NET Server Controls. Inside the master page, you set up the markup that you want to repeat on every page, like the general structure of the page and the menu.
However, a master page is not a true ASPX page and cannot be requested in the browser directly; it only serves as the template on which real web pages — called content pages — are based.
Instead of the @Page directive, a master page uses an @Master directive that identifies the file as a master page:
VB.NET
<%@ Master Language="VB" %>
C#
<%@ Master Language="C#" %>
Just like a normal ASPX page, a master page can have a Code Behind file, identified by its CodeFile and Inherits attributes:
VB.NET
<%@ Master Language="VB" CodeFile="Frontend.master.vb" Inherits="MasterPages _ Frontend" %>
C#
<%@ Master Language="C#" AutoEventWireup="true" CodeFile="Frontend.master.cs" Inherits="MasterPages _ Frontend" %>
Creating master pages
You can add master pages to the site using the Add New Item dialog box. You can place them in any custom folder in the site, including the root folder, but from an organizational point of view, it’s often easier to store them in a separate folder. Just like normal ASPX pages, they support the inline code model as well as the Code Behind model. The master pages used in the Planet Wrox project use the Code Behind model exclusively. In the following exercise, you learn how to create a simple master page and add some HTML to it to define the general structure of the pages in your website.
Creating Content pages
A master page is useless without a content page that uses it. Generally, you’ll have only a few master pages, whereas you can have many content pages in your site. To base a content page on a master page, check the Select Master Page option at the bottom right of the Add New Item dialog box when you add a new Web Form to your site. Alternatively, you can set the MasterPageFile attribute on the page directly in the Markup View of the page. You saw this @ Page directive earlier in this chapter when master and content pages were introduced.
using System; using System.Web; public class BasePage : System.Web.UI.Page { private void Page_PreRender(object sender, EventArgs e) { if (this.Title == "Untitled Page" || string.IsNullOrEmpty(this.Title)) { throw new Exception("Page title cannot be "Untitled Page"or an empty string."); } }
public BasePage() { this.PreRender += new EventHandler(Page_PreRender); } }
C#
public partial class Login : BasePage { ... }
<%@ Page Language="VB" MasterPageFile="~/MasterPages/MasterPage.master" AutoEventWireup="false" CodeFile="Login.aspx.vb" Inherits="Login" title="Log in to Planet Wrox" %>
Remember, though, that all other pages in your site now throw an error when you try to access them. The fix is easy; just give them all a valid Title. If you don't like this behavior, simply comment out the line that starts with Throw New Exception in the BasePage class. Don't forget to give your pages a meaningful title, as you won't receive an alert anymore.
How It Works
By default, all pages in your web site inherit from the Page class defined in the System.Web.UI namespace. This gives them the behavior required to make them act as web pages that can be requested by the browser and processed by the server. Since the inheritance model in .NET allows you to create a chain of classes that inherit from each other, you can easily insert your own base page class between a web page and the standard Page class. You do this by changing the Inherits statement (the colon [:] in C#) to your new BasePage:
C#
public partial class Login : BasePage
Page title cannot be "Untitled Page".
This little bit of code in the BasePage prevents you from going live with your web site with web pages that still have the default and meaningless page title. Because every page in the site should now inherit from this new base page, you should create a page template that already has the correct code in its Code Behind, making it easy to add the correct page to the site right from the start.
c. THEMES
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 pages in a Web application, across an entire Web application, or across all Web applications on a server.
Cascading Style Sheets
A theme can also include 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.
Theme Graphics and Other Resources
Themes can also include graphics and other resources, such as script files or sound files. For example, part of your page theme might include a skin for a TreeView control. As part of the theme, you can include the graphics used to represent the expand button and the collapse button.
Typically, the resource files for the theme are in the same folder as the skin files for that theme, but they can be elsewhere in the Web application, in a subfolder of the theme folder for example. To refer to a resource file in a subfolder of the theme folder, use a path like the one shown in this Image control skin:
__
You can also store your resource files outside the theme folder. If you use the tilde (~) syntax to refer to the resource files, the Web application will automatically find the images. For example, if you place the resources for a theme in a subfolder of your application, you can use paths of the form ~/SubFolder/filename.ext to refer to resource files, as in the following example.
__
Scoping Themes
You can define themes for a single Web application, or as global themes that can be used by all applications on a Web server. After a theme is defined, it can be placed on individual pages using the Theme or StyleSheetTheme attribute of the @ Page directive, or it can be applied to all
pages in an application by setting the element in the application configuration file. If the element is defined in the Machine.config file, the theme will apply to all pages in Web applications on the server.
Page Themes
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
Global Themes
A global theme is a theme that you can apply to all the Web sites on a server. Global themes allow you to define an overall look for your domain when you maintain multiple Web sites on the same server.
Global themes are like page themes in that they include property settings, style sheet settings, and graphics. However, global themes are stored in a folder named Themes that is global to the Web server. Any Web site on the server, and any page in any Web site, can reference a global theme.
Properties You Can Define Using Themes
As a rule, you can use themes to define properties that concern a page or control's appearance or static content. You can set only those properties that have a ThemeableAttribute attribute set to true in the control class.
Properties that explicitly specify control behavior rather than appearance do not accept theme values. For example, you cannot set a Button control's CommandName property by using a theme. Similarly, you cannot use a theme to set a GridView control's AllowPaging property or DataSource property.
Note that you cannot use expression builders, which generate code expressions for assignment in a page at compile time, in themes or skins.
d. SKINS
After adding the theme folder, add the SkinFile.skin file by right-clicking on the ASP.Net theme folder. The Solution Explorer will then look as follows:
Note:
1.a. UNDERSTANDING ABSOLUTE AND RELATIVE URLS
An absolute URL contains more information than a relative URL does. Relative URLs are more convenient because they are shorter and often more portable. However, you can use them only to reference links on the same server as the page that contains them.
Linking with absolute URLs An absolute URL typically takes the following form:
protocol://domain/path
The protocol is usually http://, but can also be https://, ftp://, gopher://, or file://. The domain is the name of the website. For example, the domain name of Indiana University's
central web server is www.indiana.edu. The path includes directory and file information. You must use absolute URLs when referring to links on different servers.
Linking with relative URLs
Relative URLs can take a number of different forms. When referring to a file that occurs in the same directory as the referring page, a URL can be as simple as the name of the file. For example, if you want to create a link in your home page to the file foobar.html, which is in the same directory as your home page, you would use:
The Wonderful World of Foobar!
If the file you want to link to is in a subdirectory of the referring page's directory, you need to enter only the directory information and the name of the file. So if foobar.html were in the foobar subdirectory of your wwwdirectory, you could refer to it from your home page by using:
The Wonderful World of Foobar!
If the file you want to link to is in a higher directory than the referring page, use .., which means to go up a directory. For example, to link from foobar.html to home.html, which is in the directory above, you would use:
Go back to my home page
1.b. USING NAVIGATION CONTROLS
ASP.NET 4.5.1 offers three useful navigation tools: SiteMapPath , TreeView , and Menu.
SiteMapPath
-It shows the user the path to the current page. This helps if users want to go up one or more levels in the site hierarchy. It also helps them to understand where they are.
