Introducing ASP.net with Visual Studio Environment Information Theory and Practice LAB INFS 260/L Lecturer: Kishore Nambeesan
What is Asp.net ASP.NET is a development framework for building web pages and web sites with HTML, CSS, JavaScript and server scripting introduced by Microsoft.
Implementing ASP.net ASP.NET supports three different development models: Web Pages, MVC (Model View Controller), and Web Forms: Web Pages Single Pages Model MVC Model View Controller Web Forms Event Driven Model Simplest ASP.NET model. Similar to PHP and classic ASP. Built-in templates and helpers for database, video, graphics, social media and more. MVC separates web applications into 3 different components: Models for data Views for display Controllers for input The traditional ASP.NET event driven development model: Web pages with added server controls, server events, and server code.
ASP.net File Types
More about Web Form <%@ Page Language="VB" AutoEventWireup="False" CodeFile="Default.aspx.vb" Inherits="_Default" %> <!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"> <div> <asp:Label ID="Label1" runat="server" Text="Type something here:" /> <asp:TextBox ID="TextBox1" runat="server" /> <br /> <asp:Button ID="Button1" runat="server" Text="Button" /> </div> </form> </body> </html>
Examining Closely…. ASP.NET web form isn’t 100 percent HTML. Instead, it’s an HTML document with an extra ingredient—ASP.NET web controls. Every ASP.NET web form includes the standard HTML tags, like <html>, <head>, and <body>, which delineate the basic sections of your web page. You can insert additional HTML tags, like paragraphs of text (use the <p> tag), headings (use <h1>, <h2>, <h3>), tables (use <table>), and so on. Along with standard HTML, you can add ASP.NET-only elements to your web pages. For example, <asp:Button> represents a clickable button that triggers a task on the web server. When you add an ASP.NET web control, you create an object that you can interact with in your web page code, which is tremendously useful.
Web Form Explained… ASP.NET web form isn’t 100 percent HTML. Instead, it’s an HTML document with an extra ingredient—ASP.NET web controls. Every ASP.NET web form includes the standard HTML tags, like <html>, <head>, and <body>, which delineate the basic sections of your web page. You can insert additional HTML tags, like paragraphs of text (use the <p> tag), headings (use <h1>, <h2>, <h3>), tables (use <table>), and so on. Along with standard HTML, you can add ASP.NET-only elements to your web pages. For example, <asp:Button> represents a clickable button that triggers a task on the web server. When you add an ASP.NET web control, you create an object that you can interact with in your web page code, which is tremendously useful.
Web Form Explained… The Page Directive The Default.aspx page, like all ASP.NET web forms, consists of three sections. The first section is the page directive: <%@ Page Language="VB" AutoEventWireup="False" CodeFile="Default.aspx.vb" Inherits="_Default" %> The page directive gives ASP.NET basic information about how to compile the page. It indicates the language you’re using for your code and the way you connect your event handlers. If you’re using the code-behind approach (which is recommended), the page directive also indicates where the code file is located and the name of your custom page class. You won’t need to modify the page directive by hand, because Visual Studio maintains it for you.
Web Form Explained… The Doctype HTML Code In an ordinary, non-ASP.NET web page, the doctype occupies the very first line. In an ASP.NETweb form, the doctype gets second place, and appears just underneath the page directive. The doctype indicates the type of markup (for example, HTML or XHTML) that you’re using to create your web page. Technically, the doctype is optional, but Visual Studio adds it automatically. This is important, because depending on the type of markup you’re using there may be certain tricks that aren’t allowed. For example, strict XHTML doesn’t let you use HTML formatting features that are considered obsolete and have been replaced by CSS. HTML Code
Sample Web Form Code: default.aspx <%@ Page Language="vb" AutoEventWireup="false" CodeBehind="Default.aspx.vb" Inherits="WebApplication1._Default" %> <!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"> <div> </div> <asp:Button ID="Button1" runat="server" Text="Click me" /> </form> </body> </html>
Code for Default.aspx.vb Partial Public Class _Default Inherits System.Web.UI.Page Protected Sub Button1_Click(ByVal sender As Object, ByVal e As EventArgs) Handles Button1.Click MsgBox("Thank you!") Button1.Style("background-color") = "#0000ff" Button1.Style("color") = "#ffffff" Button1.Style("width") = "200px" Button1.Style("cursor") = "pointer" Button1.Style("font-family") = "verdana" Button1.Style("font-weight") = "bold" Button1.Style("font-size") = "14pt" Button1.Text = "You clicked me!“ End Sub End Class