ASP.NET JUMP START SESSION - 3

Abu Md. Khademul Basher

Speaker TechForum,

Microsoft Technical Community

MY PUBLISHED ARTICLE IN CODE PROJECT

Implementation of MVC Patterns in ASP.NET Web forms Application.

MVC Patterns (Active and Passive Model) and its implementation using ASP.NET Web forms

Easy way to learn the Asp.Net Built in Membership and Role using custom controls with example

Single Page Application performing database CRUD operations using Backbone and ASP.NET Web API

Apply Here Map in Windows Phone HTML5 Apps

WINDOWS PHONE APPS

CONTENTS

Introduction of VS2012 IDE (Integrated Development Environment).

ASP.NET ControlsHTML Server ControlsWeb Server Controls

START PAGE

When you first run Visual Studio 2012, you will see the Start Page or you

can open the start page by navigation menu item : View-> Start Page

START PAGE……

Get Started Tab

This tab contains the link to MSDN for new features, how to start and some other links.

How- To Videos

Provide some short streaming videos debugging, code refactoring, testing and some other.

The Latest News Tab

This tab shows some latest news about windows platform. If you provide a RSS feed link and click on refresh button then it will provide some link about the latest updated news.

Sample RSS feed link is: http://sxp.microsoft.com/feeds/3.0/msdntn/VB_featured_resources

COLOR THEME

VS 2012 provide a color theme for visual experience. Visual Studio provide

three themes Blue Dark Light

To get this option browse to: Tools-> Options->Environment->General

DARK THEME

LIGHT THEME

NEW PROJECT (INSTALLED TEMPLATES)New project window shows the list of all the Installed and Online

templates

according to language and platform.

NEW PROJECT (ONLINE TEMPLATES)Online templates according to language and platform.

SOLUTION EXPLORERSolution explorer contains all the project and files and resources.

TOOLBOXToolbox contains all the HTML and ASP.NET Server tools.

TEXT EDITOR OPTIONSYou can setup some important option for your editor. You can set

Horizontal

and Vertical Scroll, Line Highlight, display line number etc.

To open this option go to: Tools-> Options->Text Editor->General , C#

INTELLISENSE TECHNOLOGYIntelliSense is one of the most important technologies in the coding

experience with Visual Studio. IntelliSense is represented by a pop-up window that appears in the code editor each time you begin typing a keyword or an identifier and shows options for auto-completing words.

To auto-complete your code typing, you have the following alternatives: Tab—Pressing this auto-completes your words and enables you

to write other code. Space—Pressing this auto-completes your words, adding a blank

space at the end of the added identifier and enabling you to write other code.

Enter—Pressing this auto-completes your words, adding a couple of parentheses at the end of the completed identifier and positioning the cursor on a new line. Use this technique when you need to invoke a method that does not require arguments.

Left parenthesis—Pressing this auto-completes your words, adding a left parenthesis at the end of the completed identifier and waiting for you to supply arguments.

Ctrl + Space—Pressing this brings up the full IntelliSense listing.

THE PROPERTIES WINDOWProperty window is used to setup the object properties in the design

view.

PROJECT PROPERTY SETUP You can set the properties of the project by Right Click on Project->

Properties

COMPILING PROJECTSCompiling a project is the process that produces a .NET assembly. To

compile your project into an assembly you can right click on Solution Explorer -> Build Solution.

Or from menu Build-> Build Solution or Press F6.

RUN THE PROJECTTo run the project you have to go to menu command Debug -> Start

Debugging or Press F5 from Tool bar click on Debut button.

BREAKPOINTSBreakpoints enable you to control the execution flow of your

application.

To place a breakpoint on a specific line of code, just place the cursor on the line of code you want to debug and then press F9 or click on the gray bar at left of the line.

QUICK LAUNCHQuick Launch - Ctrl+Q located in the top right corner in the Visual

Studio 2012 IDE . It is used to find out the command quickly.

PIN TABSYou can pin a file to the left of the editor by double click on the file

from solution explorer. If you make a file pin it will always open at the left of the editor.

PREVIEW TABWhen you click a file in the solution explorer then editor preview the

file at the right of it.

PAGE INSPECTORPage inspector is another new feature in Visual Studio 2012, it allows

you to examine the html/css of a web page similar to IE Developer Tool Bar or Firefox’s Firebug add-on.

SOME IMPORTANT TOOLSThe following image shows some important tools

Browser dropdown Debug tools Text Editor tools

DEPENDENCY GRAPHGo Architecture-> Generate Dependency Graph -> For Solution

Using this tools you can easily find out the dependency between projects. Event find out the dependency between functions.

MANAGE NUGET TOOLSGo Project-> Manage NuGet Packages

It will show all the installed packages, online available packages and any updated packages. And click on Install button one can install this packages for this project.

ASP.NET Controls

ASP.NET CONTROLS

There are two types of controls in asp.net1. HTML Server Controls2. Web Server Controls

HTML server controls basically the HTML elements with the property runat=”server”.

The syntax for creating a HTML server control is:

<input runat="server" id="txtName" type="text" />

And we can create in code behind using the syntax

HtmlInputButton btnSubmit = new HtmlInputButton();

Server controls are specially made for server site use and required the attribute runat=”server”.

The syntax for creating a Web server control is:

<asp:TextBox ID="txtName" runat="server"></asp:TextBox>

 And we can create in code behind using the syntax

TextBox txtName = new TextBox();

WEB SERVER CONTROLS

Details properties of a TextBox control<asp:TextBox

ID="txtName"    AutoPostBack="True"    CausesValidation="True"    CssClass="string"    Enabled="True"    Height="100px"    MaxLength="100"    OnInit="Init event handler"    OnLoad="Load event handler"    ReadOnly="True|False"    runat="server"    SkinID="string"    TabIndex="1"    Text="Khademul Basher"    TextMode="SingleLine"    ValidationGroup="string"    Visible="True"    Width="200px"

/>

VALIDATION SERVER CONTROLS

Control DescriptionRequiredFieldValidator Makes an input control a required

field

RangeValidator Checks that the user enters a value that falls between two values

RegularExpressionValidator

Ensures that the value of an input control matches a specified pattern

CompareValidator Compares the value of one input control to the value of another input control or to a fixed value

CustomValidator Allows you to write a method to handle the validation of the value entered

ValidationSummary Displays a report of all validation errors occurred in a Web page

DEMO

THANK YOU