module 4: introduction to asp.net 3.5 (material)

Visual Studio 2008 Community Training

By

Mohamed Saleh

[email protected]

www.jordev.net

www.geeksconnected.com/mohamed

mailto:[email protected]

http://www.jordev.net/

http://www.geeksconnected.com/mohamed

MODULE 3: INTRODUCTION TO ASP.NET 3.5

2


Table of Contents

Official Community Material License 3

Module Overview 4

Introducing ASP.NET 3.5 5

Split View Editing 6

Lab 1: Using Split-View Editing 7

JavaScript Intellisense Support 10

Lab 2: Using JavaScript Intellisense 11

Enhanced JavaScript Debugging 14

Lab 3: Debugging JavaScript 15

ListView Web Server Control 18

DataPager Web Server Control 19

Lab 4: Using ListView and DataPager 20

Summary 24

References 25


3

Official Community Material License

While every precaution has been taken in the preparation of this document, Jordev assumes no responsibility for

errors, omissions, or for damages resulting from the use of the information herein.

This disclaimer statement, presented on this page, is an integral part of this document. Should this page of the

document, in its electronic or printed formats, be lost, deleted, destroyed or otherwise discarded, this disclaimer

statement applies despite the consequences.

© 2008 Jordev.NET. All rights reserved.

The names of actual companies and products mentioned herein may be the trademarks of their respective owners.


4

Module Overview

This module introduces you to the new features of ASP.NET 3.5 including the Visual

Studio 2008 enhancements for JavaScript intellisense and debugging in addition to

the new enhancements in splitting the web design view , the new web server controls

ListView and DataPager, and the new support for LINQ in asp.net 3.5 through the

LinqDataSource web server control.

There are some tools become part of Visual Studio 2008 such as the ASP.NET

migration tool (Add-On previously) which helps the developers to merge all the

asp.net assemblies into single assembly which makes the deployment easier than

before.

Objectives:

After completing this module, you will be able to:

Using the Split-View Editing Feature.

Understand the enhanced JavaScript Intellisense support.

Using the new JavaScript Debugging Features.

Explain the usage of ListView.

Paging ListView Data using DataPager.


5

Introducing ASP.NET 3.5

Overview:

ASP.NET 3.5 built in the same engine of ASP.NET 2.0 with some new features over it, the

new updates in this version is quiet minor in comparison with .NET Framework 3.5

enhancements.

Visual Studio 2008 IDE have some enhancements for the web developers now which make

their life easier than before like the design view splitting and the JavaScript debugging and

intellisense better support.

Here below a list of some new features in ASP.NET 3.5 and Visual Studio 2008:

Horizontal and Vertical Split View of the HTML pages.

Intellisense built-in support for JavaScript in the web design.

Improved debugging in JavaScript.

The new LinqDataSource web server control.

The new ListView web server control.

The new DataPager web server control that supports the ListView

Better integration with IIS 7.0 new features.

Adding the ASP.NET merge tool with Visual Studio 2008 tools.


6

Split View Editing

Previously in Visual Studio 2005, the HTML designer was supporting only the source-view

and design-view once at time, which causes a lot of pain for the web developers. In this

release of Visual Studio we have the support for viewing the source and design at the same

time which helps the developers to work in design and having a quick access to the markups

of the design.

Visual Studio provides the following options for the web developers:

1. Horizontal Split View

2. Vertical Split View

3. Start the pages in Split View by default.


7

Lab 1: Using Split-View Editing

After completing this lab, you will be able to:

Use Split-View editing mode.

Choosing between Horizontal and Vertical Split View.

Setting the Split-View as the default view of pages.

Using Split View

1. On the File menu in Visual Studio 2008, point to New and then click Project.

2. In the New Project dialog box, select a language, and then select Web in the Project

Types box.

3. In the Templates box, select ASP.NET Web Applications

4. In the top-right corner of the New Project dialog box, click in the Target Framework

combo box and select the .NET Framework version 3.5.

5. In the Location box, type the path to where to create the application, and then click

OK.

6. Insert TextBox and Button into the Design View.

7. Now Choose Split View as the screenshot below:


8

Enabling Vertical Split-View:

1. On the Tools menu in Visual Studio 2008, click Options.

2. In the Left Box Choose HTML Designer, select the General section.

3. In the right area of the dialog, check Split views vertically options, and then click Ok

button.


9

4. The split will be applied vertically to the page.

Setting the Split-View as default view:

1. On the Tools menu in Visual Studio 2008, click Options.

2. In the Left Box Choose HTML Designer, select the General section.

3. From the Start Pages in Group Box, select Split View Option, and click Ok button.


10

JavaScript Intellisense Support

Overview:

One of the most important features that support the JavaScript writing in Visual Studio 2008

is the JavaScript Intellisense, which makes the JavaScript development easier than before.

The Visual Studio 2005 supports JavaScript intellisense with some limitations that have been

considered in this release of Visual Studio.

JavaScript Intellisense Enhancements:

The following list contains the most important enhancements in the JavaScript Intellisense:

Keywords support in Completion List.

Active Completion List.

Supporting Member Variables.

Functions Tips support.

External JavaScript files intellisense support.

Type Inferencing Support.

Supporting intellisense on “this” keyword.


11

Lab 2: Using JavaScript Intellisense


Writing the new JavaScript comments.

Using the methods custom hints.

Using intellisense with objects members.

Using JavaScript Intellisense Features



Types box.





OK.

6. In the source editor write the following code:

using System;

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs"

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">


12

<head runat="server">

<title>Module 04 Lab 3</title>

</head>

<body>

<script type="text/javascript">

var student = {

name: "Samer",

Id : 1002,

spec: ""

};

student.spec = "IT";

</script>

<script type="text/javascript" src="student.js">

var studentinfo = ReturnStudentInformation();

document.writeln(studentinfo);

</script>

<form id="form1" runat="server">

<div>

</div>

</form>

</body>

</html>

7. Add new JavaScript file with the name student.js.

8. In the code editor write the following code:

function ReturnStudentInformation()

{

///<summary>This method returns the student information</summary>

///<returns>string</returns>

var sinfo = "Name :" + student.name +

" ID :" + student.Id +

" Specilization:" + student.spec;

return sinfo;

}

9. Save the file.

10. Click Start on the Debug menu or press F5 to run the code.

Browsing JavaScript Intellisense Features 1. At the beginning when you start typing “var” keyword, the auto-completion list shows

the available keywords automatically.


13

2. In this line of code, the auto completion list shows the member variables of “student”.

3. In this figure, the intellisense adds the hints tip of the custom function, because of the

written comments in C#/VB comments style.


14

Enhanced JavaScript Debugging

JavaScript Debugging Enhancements:

One of the most important enhancements for JavaScript is the improvement in debugging

which helps the web developers to debug JavaScript very easily and in a very effective way.

Here below a list of the new enhancements in the JavaScript Debugging:

Setting breakpoints at the design-time.

Debugging Server-Side code and Client-Side code at the same time.

Object Execution and Inspection support.

JavaScript Debug Visualizer support.

Immediate window support.

Browsing runtime objects events and properties.


15

Lab 3: Debugging JavaScript


Setting BreakPoints in JavaScript.

Using the watch window with JavaScript objects.

Browsing DOM and JavaScript objects using Local window.

Using Immediate window with JavaScript.

Debugging JavaScript in Visual Studio 2008

1. Open the previous lab “Module04Lab02”.

2. In the Source editor, set a breakpoint in the following statement:

3. Press F5 to run the code.


16

4. Expand the “student” object in the Watch windows, and you will be able to browse the

student properties values.

5.

6. Change the Value of “name” property to “Bill”, and then press enter.

7. Open the Locals window and browse the nodes into the document object.

8. Open the Immediate window by pressing Ctrl+D+I and then write the following statement

and press enter:

9. Now move to the Watch window and you will notice that the value of id is changed to 555.


17

10. Continue the execution of the application by pressing F5 and you will get the results with

the changed values during the debugging time.


18

ListView Web Server Control

ListView Control is one of the new Data Web Servers Control, which displays a set of values

form a data source by binding them from a specified data source.

The ListView Control can display the data in user-defined styles using templates, and it’s

allowed the insert, update, delete, edit, and sorting operations over the data.

The following contains the most used templates with this control:

LayoutTemplate: acting like the master template which defines the layout of the

control, and it contains a placeholder for the items which can be table rows, spans, or

divs.

ItemTemplate: defines the layout and content of individual item.

EmptyItemTemplate: defines the content of empty item.

SelectedItemTemplate: defines the layout and content of the selected item to

differentiate the selected item from other items.

EditItemTemplate: defines the layout and content to render when editing item.

InsertItemTemplate: defines the layout and content to render when inserting item.

ItemSeparatorTemplate: defines the layout and content render between each single

item.


19

DataPager Web Server Control

DataPager Control is a paging functionality provider for the ListView Control, which make

this functionality available by implementing the interface IPageableItemContainer.

The DataPager can be associated with the ListView by inserting it under the LayoutTemplate.

The following contains a brief description about the available fields in the DataPage Control:

NumericPageField: This field displays the number of pages to the user, and allows

him to navigate through pages number.

NextPreviousPagerField: This field displays the “First…Next…Last” options to the

user which allows him to navigate from one page to one at a time, or move between

the first and last page.

TemplatePagerField: This field allows the developer to create a custom paging UI.


20

Lab 4: Using ListView and DataPager


Use the ListView web data control.

Defining templates for each field in the ListView.

Enabling Paging through the DataPager Control.

Binding the ListView with Custom List of Objects.

Using the new ASP.NET 3.5 Controls



Types box.





OK.

6. In the source editor write the following:

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Default.aspx.cs"

Inherits="Module04Lab04._Default" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"

"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">


21

<html xmlns="http://www.w3.org/1999/xhtml" >

<head runat="server">

<title>Module 04 - Lab 04</title>

<style type="text/css">

.style1

{

font-weight: bold;

text-align: center;

}

.style2

{

font-size: x-large;

}

#form1

{

text-align: center;

}

</style>

</head>

<body>

<form id="form1" runat="server">

<div class="style1">

<span class="style2">Using ASP.NET 3.5 New Web Server Controls<br />

<br />

<br />

</span>

</div>

<asp:ListView ID="ListView1" runat="server" style="text-align: left" >

<LayoutTemplate>

<table runat="server" id="table1" runat="server" >

<tr runtat="server" id ="Tr1" style="background-color: #CCCCCC;">

<th id ="BookName" runat="server" align="left">Book Name</th>

<th id ="BookAuthor" runat="server" align="left">Author Name</th>

<th id ="BookCategory" runat="server" align="left">Category</th>

</tr>

<tr runat="server" id="itemPlaceholder" ></tr>

</table>

<asp:DataPager runat="server" ID="BooksDataPager" PageSize="5">

<Fields>

<asp:NumericPagerField ButtonCount="3" />

</Fields>

</asp:DataPager>

</LayoutTemplate>

<ItemTemplate>

<tr runat="server">

<td id="Td1" runat="server">

<%-- Data-bound content. --%>

<asp:Label ID="NameLabel" runat="server"

Text='<%#Eval("Name") %>' />

</td>



<asp:Label ID="AuthorLabel" runat="server"

Text='<%#Eval("Author") %>' />

</td>



<asp:Label ID="CategoryLabel" runat="server"


22

Text='<%#Eval("Category") %>' />

</td>

</tr>

</ItemTemplate>

</asp:ListView>

</form>

</body>

</html>

7. In the Code Behind File, writing the following code:

using System;

using System.Collections;

using System.Collections.Generic;

using System.Configuration;

using System.Data;

using System.Linq;

using System.Web;

using System.Web.Security;

using System.Web.UI;

using System.Web.UI.HtmlControls;

using System.Web.UI.WebControls;

using System.Web.UI.WebControls.WebParts;

using System.Xml.Linq;

namespace Module04Lab04

{

public class Book

{

public long ID { get; set; }

public string Name { get; set; }

public string Author { get; set; }

public string Publisher { get; set; }

public int Year { get; set; }

public string Category { get; set; }

public Book()

{

}

}

public partial class _Default : System.Web.UI.Page

{

List<Book> BooksList = new List<Book>

{

new Book {ID = 1, Author = "Muhanad", Category = "SharePoint",

Name = "Inside MOSS Customization", Publisher = "GC",

Year = 2008},

new Book {ID = 2, Author = "Mohamed", Category = ".NET",

Name = "Advanced .NET", Publisher = "GC",

Year = 2008},

new Book {ID = 3, Author = "Amjad", Category = "Integration",

Name = "Advanced BizTalk", Publisher = "GC",

Year = 2008},

new Book {ID = 4, Author = "Hikmet", Category = "Windows",

Name = "Windows 2008 Server", Publisher = "GC",

Year = 2008},

new Book {ID = 5, Author = "Ayman", Category = "Inegration",

Name = "BIZTalk Administration", Publisher = "DN",

Year = 2006},

new Book {ID = 6, Author = "Ayman", Category = "SharePoint",


23

Name = "Programming CAML", Publisher = "DN",

Year = 2005},

new Book {ID = 7, Author = "Bob", Category = ".NET",

Name = "CLR Inside Outside", Publisher = "ORA",

Year = 2005},

new Book {ID = 8, Author = "Ibrahim", Category = "Inegration",

Name = "BIZTalk PipeLines", Publisher = "DHC",

Year = 2005},

new Book {ID = 9, Author = "Adam", Category = ".NET",

Name = "MSIL For Dummies", Publisher = "DHC",

Year = 2006},

new Book {ID = 10, Author = "Salim", Category = ".NET",

Name = "CLR Deep Dive", Publisher = "DN",

Year = 2006},

new Book {ID = 11, Author = "Hikmet", Category = "Windows",

Name = "Exchange Migration", Publisher = "MS",

Year = 2007},

new Book {ID = 12, Author = "Muhanad", Category = "SharePoint",

Name = "WSS Solutions", Publisher = "MS",

Year = 2007},

};

protected void Page_Load(object sender, EventArgs e)

{

ListView1.DataSource = BooksList;

ListView1.DataBind();

}

}

}

8. Click Start on the Debug menu or press F5 to run the code.

9. You will see the following results:


24

Summary

In this module, you learned how to use the new web development enhancements in Visual

Studio 2008 IDE, such as Split-View Editing, using the Methods hints in JavaScript, writing

comments for JavaScript, using the JavaScript Improved Intellisense.

In addition, you learned how to use the new web server data controls, the ListView Control

and the DataPager Control. And you utilize the DataPager control functionalities with

ListView

Here is a summary of what you’ve introduced in this module:

The Split-View Editing Feature.

The enhanced JavaScript Intellisense support.

The new JavaScript Debugging Features.

The usage of ListView Control.

The usage DataPager with ListView Control.


25

References

1. Microsoft Site (http://www.microsoft.com)

2. Microsoft Developer Network (http://msdn.microsoft.com)

3. Scott Guthrie’s Blog (http://weblogs.asp.net/scottgu/)

4. Scott Hanselman’s Blog(http://www.hanselman.com/)

5. Jscript MSDN Blog (http://blogs.msdn.com/jscript)

6. Microsoft Developers Evangelists VS 2008 Training Kit.

http://www.microsoft.com/

http://msdn.microsoft.com/

http://weblogs.asp.net/scottgu/

http://www.hanselman.com/

http://blogs.msdn.com/jscript

module 4: introduction to asp.net 3.5 (material)

Technology

split view editing

web design view

vertical split view

vertical splitview

horizontal split view

new features of aspnet

aspnet web applications

splitview editing feature