Tuesday, 7 February 2012

What is asp.net 3.5?


        Microsoft released ASP.NET 3.5 on November 19, 2007. Along with it, was released Visual Studio 2008. This evolution from ASP.NET 2.0 to ASP.NET 3.5 is quiet gradual. ASP.NET 3.5 uses the same engine as that of ASP.NET 2.0, with some extra features like ASP.NET 3.5 has been released with some significant improvements and support for AJAX enabled websites. Along with a few new controls, there is also support for LINQ. In this article, we will explore these new features of ASP.NET 3.5.  In this article, we will explore the new features added to ASP.NET 3.5. This article assumes that you have been working on ASP.NET 2.0.

What is ASP.NET?

ASP.NET is a programming framework built on the common language run time that can be used on a server to build powerful Web applications.

Sunday, 5 February 2012

Types of Styles and Style Sheets | ASP.Net Tutorial | ASP.Net Tutorial PDF

    There are three ways in which you can associate styles with the elements of a particular web page:
using an external style sheet
 If you place your style rules in an external style sheet, you can link this file to any web page on which you want those styles to be used, which makes updating a web site’s overall appearance a cakewalk.
To reference an external style sheet from a web form, place the following markup inside the head element:
<link rel="stylesheet" type="text/css" href="file.css" />
In the above example, file.css would be a text file containing CSS rules, much like the example shown below, which sets the background and foreground color of all <a> elements:
a {
    background-color: #ff9;
     color: #00f;
}
using an embedded style sheet
You can place style rules for a page between <style type="text/css"> tags inside that page’s head element, like so:
<style type="text/css">
a {
   background-color: #ff9;
    color: #00f;
}
</style>
   The problem with using embedded styles is that we can’t reuse those styles in another page without typing them in again—an approach that makes global changes to the site very difficult to manage.
using inline style rules
Inline styles allow us to set the styles for a single element using the styleattribute.
For instance, we’d apply the style declarations from our previous example to a specific <a> tag like this:
<a href="/" style="background-color: #ff9; color: #00f;">
     Home
</a>
When it’s used in embedded or external style sheets, a style rule has a selector, followed by a declaration block that contains one or more style declarations. Consider this example:
a {
    background-color: #ff9;
    color: #00f;
}
    Here we have a style rule with a selector, a, followed by a declaration block that contains two style declarations: one for the background-color property, and one for the color property. A declaration block is delimited by curly braces: {…}. A style declaration consists of a property, a colon (:) and a value. Multiple declarations are delimited by semicolons (;), but it’s a good practice to put a semicolon at the end of all your declarations.
     The selector in a style rule determines the elements to which that rule will apply. In ASP.NET, we typically use two types of selectors:
element type selectors
    An element type selector targets every single instance of the specified element. For example, if we wanted to change the colour of all second-level headings in a document, we’d use an element type selector to target all <h2>s:
h2 {
color: #369;
}
class selectors
   Arguably the most popular way to use styles within your pages is to give each element a class attribute, then target elements that have a certain class value. For example, the following markup shows a paragraph whose class attribute is set to pageinfo:
<p class="pageinfo">
Copyright 2006
</p>
    Now, given that any element with the class pageinfo should be displayed in fine print, we can create a style rule that will reduce the size of the text in this paragraph, and any other element with the attribute class="pageinfo", using a class selector. The class selector consists of a dot (.) and the class name:
.pageinfo {
font-family: Arial;
font-size: x-small;
}
    Whether you’re building external style sheets, embedded style sheets, or inline style rules, style declarations use the same syntax.
      Now that you have a basic understanding of some of the fundamental concepts behind
CSS, let’s look at the different types of styles that can be used within our ASP.NET applications.

Style Properties
     You can specify many different types of properties within style sheets. Here’s a list of the most common property types:

font
This category of properties gives you the ability to format text-level elements,
including their font faces, sizes, decorations, weights, colors, and so on.
background
 This category allows you to customize backgrounds for objects and text. These values give you control over the background, including whether you’d like to use a color or an image for the background, and whether or not you want to repeat a background image.
block
This category allows you to modify the spacing between paragraphs, between lines of text, between words, and between letters.
box 
The box category allows us to customize tables. If you need to modify borders, padding, spacing, and colors on a table, row, or cell, use the elements within this category.
border
This category lets you draw borders of different colors, styles, and thicknesses around page elements.
list
This category allows you to customize the way ordered and unordered lists are displayed.
positioning
Modifying positioning allows you to move and position tags and controls freely.
   These categories outline the aspects of a page design that can typically be modified using CSS. As we progress through the book, the many types of style properties will become evident.

The CssClass Property
    Once you’ve defined a class in a style sheet (be it external or internal), you’ll want to begin to associate that class with elements in your web forms. You can associate classes with ASP.NET web server controls using the CssClass property. In most cases, the value you give the CssClass property will be used as the value of the resulting element’s class attribute.
      Let’s see an example. First, use the Style Sheet template to create within your working folder (LearningASP\VB or LearningASP\CS) a file named Styles.css. You’ll notice that Visual Web Developer adds an empty style rule to the newly created style sheet file with the selector body. We don’t need that rule for this example, so just insert this code after it:
                                             Styles.css
body {
}
.title {
font-family: Arial, Helvetica, sans-serif;
font-size: 19px;
}
.dropdownmenu {
font-family: Arial;
background-color: #0099FF;
}
.textbox {
font-family: Arial;
background-color: #0099FF;
border: 1px solid
}
.button {
font-family: Arial;
background-color: #0099FF;
border: 1px solid
}

  Then, create a new web form named UsingStyles.aspx, containing this code:

Visual Basic                              LearningASP\VB\UsingStyles.aspx
<%@ Page Language="VB" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.blosums.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<script runat="server">
</script>
<html xmlns="http://www.blosums.org/1999/xhtml">
<head runat="server">
<title>
Testing CSS
</title>
<link rel="Stylesheet" type="text/css" href="Styles.css" />
</head>
<body>
<form id="form1" runat="server">
<div>
<p class="title">
Please select a product:</p>
<p>
<asp:DropDownList ID="productsList" CssClass="dropdownmenu" runat="server">
<asp:ListItem Text="Shirt" Selected="true" />
<asp:ListItem Text="Hat" />
<asp:ListItem Text="Pants" />
<asp:ListItem Text="Socks" />
</asp:DropDownList>
</p>
<p>
<asp:TextBox ID="quantityTextBox" CssClass="textbox"
runat="server" />
</p>
<p>
<asp:Button ID="addToCartButton" CssClass="button"
Text="Add To Cart" runat="server" />
</p>
</div>
</form>
</body>
</html>
     Loading this page should produce the output shown in belowFigure. (We know it doesn’t look great—we’re programmers, not designers—and it shows! But as far as you understand the principles of using CSS with ASP.NET, you’ve successfully met the goal of this exercise.)
                  Figure : CSS at work with ASP.NET


Using Cascading Style Sheets (CSS) | ASP.Net Tutorial | ASP.Net Tutorial PDF


    It’s clear that controls make it easy for us to reuse pieces of functionality in multiple locations. For example, I can’t imagine an easier way to add calendars to many web forms than to use the Calendar web server control.

    However, controls don’t solve the problem of defining and managing the visual elements of your web site. Modern web sites need constant updating to keep them fresh, and it’s not much fun editing hundreds of pages by hand just to change a border color, for example, and then having to check everything to ensure that your changes are consistent. The process is even more painful if your client wants a more serious update, like a rearrangement of the components on the pages.

    The good news is that this maintenance work can be made a lot easier if you plan ahead, correctly follow a few basic rules, and efficiently use the tools that HTML and ASP.NET offer you.

     An essential tool for building reusable visual styles is Cascading Style Sheets (CSS). HTML was initially designed to deliver simple text content, and didn’t address the specifics of how particular items appeared in the browser. HTML left it to the individual browsers to work out these intricacies, and tailor the output to the limitations and strengths of users’ machines. While we can change font styles, sizes, colors, and so on using HTML tags, this practice can lead to verbose code and pages that are very hard to restyle at a later date.

     CSS gives web developers the power to create one set of styles in a single location, and to apply those styles to all of the pages in our web site. All of the pages to which the style sheet is applied will display the same fonts, colors, and sizes, giving the site a consistent feel. Regardless of whether our site contains three pages or 300, when we alter the styles in the style sheet, our changes are immediately applied to all the pages that use that style sheet.

Master Pages | ASP.Net Tutorial | ASP.Net Tutorial PDF


   Master pages an important feature that was introduced in ASP.NET 2.0. Master pages are similar to web user controls in that they, too, are composed of HTML and other controls; they can be extended with the addition of events, methods, or properties; and they can’t be loaded directly by users—instead, they’re used as building blocks to design the structure of your web forms.
   
      A master page is a page template that can be applied to give many web forms a consistent appearance. For example, a master page can set out a standard structure containing the header, footer, and other elements that you expect to display in multiple web forms within a web application.
 
     Master page files have the .master extension, and, just like web forms and web user controls, they support code-behind files. All master pages inherit from the class System.Web.UI.MasterPage.

      Designing a site structure using master pages and web user controls gives you the power to modify and extend the site easily. If your site uses these features in a well-planned way, it can be very easy to modify certain details of the layout or functionality of your site, because updating a master page or a web user control takes immediate effect on all the web forms that use the file.

     As we’ve already mentioned, a master page is built using HTML and controls, including
the special ContentPlaceHolder control. As its name suggests, the ContentPlaceHolderis a placeholder that can be filled with content that’s relevant to the needs of each web form that uses the master page. In creating a master page, we include all of the basic structure of future pages in the master page itself, including
the <html>, <head>, and <body> tags, and let the web forms specify the content that appears in the placeholders.

       Let’s see how this works with a simple example. Suppose we have a site with many pages, all of which contain a standard header, footer, and navigation menu, laid out as per the wireframe shown in below Figure .
                  Figure : A simple web site layout
   
         If all the pages in the site have the same header, footer, and navigation menu, it makes sense to include these components in a master page, and to build several web forms that customize only the content areas on each page. We’ll begin to create such a site in Chapter 5, but let’s work through a quick example here.

   To keep this example simple, we won’t include a menu here: we’ll include just the header, the footer, and the content placeholder. Add a new file to your project using the Master Page template in Visual Web Developer. Name the file FrontPages.master, as shown in Figure 4.13, and select the appropriate language. You’ll notice that some <asp:ContentPlaceHolder> tags have been created for you already, one in the <head>, and one in the page body. You can remove them and modify the page like this:

Visual Basic                             LearningASP\VB\FrontPages.master
<%@ Master Language="VB" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<script runat="server">
</script>
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title>Untitled Page</title>
</head>
<body>
<form id="form1" runat="server">
<div>
<h1>Welcome to SuperSite Inc!</h1>
<asp:ContentPlaceHolder ID="FrontPageContent"
runat="server" />
<p>Copyright 2006</p>
</div>
</form>
</body>
</html>
Again, the C# version is identical except for the Masterdeclaration at the top of the page:

C#                              LearningASP\CS\FrontPages.master(excerpt)
<%@ Master Language="C#" %>


                 Figure : Creating a Master Page
  
    The master page looks almost like a web form, except for one important detail: it has an empty ContentPlaceHolder control. If you want to build a web form based on this master page, you just need to reference the master page using the Page directive in the web form, and add a Content control that includes the content you want to insert.

   Let’s try it. Create a web form in Visual Web Developer called FrontPage.aspx, and check the Select master page option. This option will allow you to choose a master page for the form; Visual Web Developer will then use that master page to generate the code for you. Edit it to match this code snippet:

Visual Basic                   LearningASP\VB\FrontPage.aspx(excerpt)
<%@ Page Language="VB" MasterPageFile="~/FrontPages.master"
Title="
Front Page
" %>
<script runat="server">
</script>
<asp:Content ID="Content1" ContentPlaceHolderID="FrontPageContent"
Runat="Server">
<p>
Welcome to our web site! We hope you'll enjoy your visit.
</p>
</asp:Content>

    The VB and C# versions of this code are the same except for the Language attribute on the Page declaration, but because Visual Web Developer generates all the code for you automatically, you don’t need to worry about it—instead, you can focus on the content.
    You’re all set now! Executing FrontPage.aspx will generate the output shown in Figure.
Figure: Using a master page to set the header and footer
  
    Although the example is simplistic, it’s easy to see the possibilities: you can create many web forms based on this template very easily. In our case, the master page contains a single ContentPlaceHolder, but it could have more. Also, we can define within the master page default content for display inside the ContentPlaceHolder on pages whose web forms don’t provide a Content element for that placeholder.

    We’ll explore Visual Web Developer’s capabilities in more depth in the following chapters, but for now you can play around with it yourself, using Design mode to visually edit web forms that are based on master pages. Looking at Figure below, you can see that the content of the master page is read-only, and that you can edit only the content areas of the page.
Figure : Design mode shows the editable areas of a form that uses a master page
 

Creating a Web User Control | ASP.Net Tutorial | ASP.Net Tutorial PDF


     Let’s get a feel for web user controls by stepping through a simple example. Let’s say that in your web site, you have many forms consisting of pairs of Label and TextBox controls, like the one shown in Figure 4.10.
     All the labels must have a fixed width of 100 pixels, and the text boxes must accept a maximum of 20 characters.
         Rather than adding many labels and text boxes to the form, and then having to set all their properties, let’s make life easier by building a web user control that includes a Labelof the specified width, and a TextBoxthat accepts 20 characters; you’ll then be able to reuse the web user control wherever it’s needed in your project.
      Create a new file in you working project using the Web User Control template, as shown in Figure ii
Figure i. A simple form
 
Figure ii. Creating a new Web User Control
  
   Name the file SmartBox.ascx. Then, add the control’s constituent controls—a Label control and a TextBox control—as shown below (for both VB and C# versions):
Visual Basic                           LearningASP\VB\SmartBox.ascx(excerpt)
<%@ Control Language="VB" ClassName="SmartBox" %>
<script runat="server">

</script>
<p>
<asp:Label ID="myLabel" runat="server" Text="" Width="100" />
<asp:TextBox ID="myTextBox" runat="server" Text="" Width="200"
MaxLength="20" />
</p>

   In Topic 3 we discussed properties briefly, but we didn’t explain how you could create your own properties within your own classes. So far, you’ve worked with many properties of the built-in controls. For example, you’ve seen a lot of code that sets the Text property of the Label control.

    As a web user control is a class, it can also have methods, properties, and so on. Our SmartBox control extends the base System.Web.UI.UserControl class by adding two properties:

  • LabelTextis a write-only property that allows the forms using the control to set the control’s label text.
  • Textis a read-only property that returns the text the user typed into the text box.

     Let’s add a server-side scriptelement that will give our control two properties—one called Text, for the text in the TextBox, and one called LabelText, for the text in the Label:

Visual Basic                     LearningASP\VB\SmartBox.ascx(excerpt)
<%@ Control Language="VB" ClassName="SmartBox" %>
<script runat="server">
Public WriteOnly Property LabelText() As String
Set(ByVal value As String)
myLabel.Text = value
End Set
End Property
Public ReadOnly Property Text() As String
Get
Text = myTextBox.Text
End Get
End Property
</script>
<p>
<asp:Label ID="myLabel" runat="server" Text="" Width="100" />
<asp:TextBox ID="myTextBox" runat="server" Text="" Width="200"
MaxLength="20" />
</p>

C#                         LearningASP\CS\SmartBox.ascx(excerpt)
<%@ Control Language="C#" ClassName="SmartBox" %>
<script runat="server">
public string LabelText
{
set
{
myLabel.Text = value;
}
}
public string Text
{
get
{
return myTextBox.Text;
}
}
</script>
<p>
<asp:Label ID="myLabel" runat="server" Text="" Width="100" />
<asp:TextBox ID="myTextBox" runat="server" Text="" Width="200"
MaxLength="20" />
</p>

     Just like web forms, web user controls can work with code-behind files, but, in an effort to keep our examples simple, we aren’t using them here. We’ll meet more complex web user controls in the chapters that follow.
When you use the SmartBox control in a form, you can set its label and have the text entered by the user, like this:
Visual Basic
mySmartBox.LabelText = "Address:"
userAddress = mySmartBox.Text

C#
mySmartBox.LabelText = "Address:";
userAddress = mySmartBox.Text;

    Let’s see how we implemented this functionality. In .NET, properties can be read-only, write-only, or read-write. In many cases, you’ll want to have properties that can be both readable and writeable, but in this case, we want to be able to set the text of the inner Label, and to read the text from the TextBox.
     To define a write-only property in VB, you need to use the WriteOnly modifier. Write-only properties need only define a special block of code that starts with the keyword Set. This block of code, called an accessor, is just like a subroutine that takes as a parameter the value that needs to be set. The block of code uses this value to perform the desired action—in the case of the LabelText property, the action sets the Text property of our Label control, as shown below:

Visual Basic                 LearningASP\VB\SmartBox.ascx(excerpt)
Public WriteOnly Property LabelText() As String
Set(ByVal value As String)
myLabel.Text = value
End Set
End Property
Assuming that a form uses a SmartBox object called mySmartBox, we could set the Text property of the Label like this:

Visual Basic
mySmartBox.LabelText = "Address:"

    When this code is executed, the Set accessor of the LabelTextproperty is executed with its value parameter set to Address:. The Set accessor uses this value to set the Text property of the Label.
    The other accessor you can use when defining properties is Get, which allows us to read values instead of writing them. Obviously, you aren’t allowed to add a Get accessor to a WriteOnly property, but one is required for a ReadOnly property, such as Text:

Visual Basic                  LearningASP\VB\SmartBox.ascx(excerpt)
Public ReadOnly Property Text() As String
Get
Text = myTextBox.Text
End Get
End Property

   The Textproperty is ReadOnly, but it doesn’t need to be. If you wanted to allow the forms using the control to set some default text to the TextBox, you’d need to add a Set accessor, and remove the ReadOnly modifier.
    When you’re defining a property in C#, you don’t need to set any special modifiers, such as ReadOnly or WriteOnly, for read-only or write-only properties. A property that has only a get accessor will, by default, be considered read-only:

C#                           LearningASP\CS\SmartBox.ascx(excerpt)
public string Text
{
get
{
return myTextBox.Text;
}
}
Likewise, a property that has only a set accessor will be considered to be write-only:

C#                       LearningASP\CS\SmartBox.ascx(excerpt)
public string LabelText
{
set
{
myLabel.Text = value;
}
}

Using the Web User Control
    Once the user control has been created, it can be referenced from any ASP.NET page using the Register directive, as follows:
<%@ Register TagPrefix="prefix" TagName="name" Src="source.ascx" %>
The Register directive requires three attributes:

TagPrefix
the prefix for the user control, which allows you to group related controls together, and avoid naming conflicts

TagName
the control’s tag name, which will be used when the control is added to the ASP.NET page

Src
the path to the .ascx file that describes the user control
After we register the control, we create instances of it using the <TagPrefix:TagName> format. Let’s try an example that uses the SmartBox control. Create a Web Form named ControlTest.aspx in your project folder, and give it this content:

Visual Basic                       LearningASP\VB\ControlTest.aspx
<%@ Page Language="VB" %>
<%@ Register TagPrefix="sp" TagName="SmartBox"
Src="SmartBox.ascx" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.blosums.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<script runat="server">
</script>
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title>Creating ASP.NET Web Server Controls</title>
</head>
<body>
<form id="form1" runat="server">
<div>
<sp:SmartBox ID="nameSb" runat="server"
LabelText="Name:" />
<sp:SmartBox ID="addressSb" runat="server"
LabelText="Address:" />
<sp:SmartBox ID="countrySb" runat="server"
LabelText="Country:" />
<sp:SmartBox ID="phoneSb" runat="server"
LabelText="Phone:" />
</div>
</form>
</body>
</html>

      Creating this page by hand will really help you to understand the process of building a web form. In time, you’ll learn how to use Visual Web Developer to do part of the work for you. For example, you can drag a user control from Solution Explorer and drop it onto a web form; Visual Web Developer will register the control and add an instance of the control for you. Loading this page will produce the output we saw in Figure i .

       Now, this is a very simple example indeed, but we can easily extend it for other purposes. You can see in the above code snippet that we set the LabelTextproperty directly using the control’s attributes; however, we could have accessed the properties from our code instead. Here’s an example of in which we set the LabelText properties of each of the controls using VB and C#:

Visual Basic
<script runat="server">
    Protected Sub Page_Load()
         nameSb.LabelText = "Name:"
         addressSb.LabelText = "Address:"
         countrySb.LabelText = "Country:"
         phoneSb.LabelText = "Phone:"
   End Sub
</script>

C#
<script runat="server">
protected void Page_Load()
{
nameSb.LabelText = "Name:";
addressSb.LabelText = "Address:";
countrySb.LabelText = "Country:";
phoneSb.LabelText = "Phone:";
}
</script>

Saturday, 4 February 2012

Web User Controls | ASP.Net Tutorial | ASP.Net Tutorial PDF


     As you build real-world projects, you’ll frequently encounter pieces of the user interface
that appear in multiple places—headers or footers, navigation links, and login boxes are just a few examples. Packaging their forms and behaviors into your own controls will allow you to reuse these components just as you can reuse ASP.NET’s built-in controls.
   
      Building your own web server controls involves writing advanced VB or C# code, and is not within the scope of this book, but it’s good to know that it’s possible. Creating customized web server controls makes sense when you need to build more complex controls that provide a high level of control and performance, or you want to create controls that can be integrated easily into many projects.

       Those of us without advanced coding skills can develop our own controls by creating web user controls. These are also powerful and reusable within a given project; they can expose properties, events, and methods, just like other controls; and they’re easy to implement.

   A web user control is represented by a class that inherits from System.Web.UI.UserControl, and contains the basic functionality that you need to extend to create your own controls. The main drawback to using web user controls is that they’re tightly integrated into the projects in which they’re implemented. As such, it’s more difficult to distribute them, or include them in other projects, than it is to distribute or reuse web server controls.

    Web user controls are implemented very much like normal web forms—they’re comprised of other controls, HTML markup, and server-side code. The file extension of a web user control is .ascx.