Module 4: Introduction to ASP.NET 3.5 (Material)

Visual Studio 2008 Community Training By Mohamed Saleh mohamedsaleh@live.com www.jordev.net www.geeksconnected.com/mohamed

MODULE 3: INTRODUCTION TO ASP.NET 3.5 MODULE 4: INTRODUCTION TO ASP.NET 3.5 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 2

MODULE 3: INTRODUCTION TO ASP.NET 3.5 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. 3

MODULE 3: INTRODUCTION TO ASP.NET 3.5 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. 4

MODULE 3: INTRODUCTION TO ASP.NET 3.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. 5

MODULE 3: INTRODUCTION TO ASP.NET 3.5 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. 6

MODULE 3: INTRODUCTION TO ASP.NET 3.5 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: 7

MODULE 3: INTRODUCTION TO ASP.NET 3.5 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. 8

MODULE 3: INTRODUCTION TO ASP.NET 3.5 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. 9

MODULE 3: INTRODUCTION TO ASP.NET 3.5 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. 10

MODULE 3: INTRODUCTION TO ASP.NET 3.5 Lab 2: Using JavaScript Intellisense After completing this lab, you will be able to:  Writing the new JavaScript comments.  Using the methods custom hints.  Using intellisense with objects members. Using JavaScript Intellisense Features 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. 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"> 11

MODULE 3: INTRODUCTION TO ASP.NET 3.5 <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. 12

MODULE 3: INTRODUCTION TO ASP.NET 3.5 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. 13

MODULE 3: INTRODUCTION TO ASP.NET 3.5 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. 14

MODULE 3: INTRODUCTION TO ASP.NET 3.5 Lab 3: Debugging JavaScript After completing this lab, you will be able to:  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. 15

MODULE 3: INTRODUCTION TO ASP.NET 3.5 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. 16

MODULE 3: INTRODUCTION TO ASP.NET 3.5 10. Continue the execution of the application by pressing F5 and you will get the results with the changed values during the debugging time. 17

MODULE 3: INTRODUCTION TO ASP.NET 3.5 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. 18

MODULE 3: INTRODUCTION TO ASP.NET 3.5 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. 19

MODULE 3: INTRODUCTION TO ASP.NET 3.5 Lab 4: Using ListView and DataPager After completing this lab, you will be able to:  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 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. 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"> 20

MODULE 3: INTRODUCTION TO ASP.NET 3.5 <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> <td id="Td2" runat="server"> <%-- Data-bound content. --%> <asp:Label ID="AuthorLabel" runat="server" Text='<%#Eval("Author") %>' /> </td> <td id="Td3" runat="server"> <%-- Data-bound content. --%> <asp:Label ID="CategoryLabel" runat="server" 21

MODULE 3: INTRODUCTION TO ASP.NET 3.5 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", 22

MODULE 3: INTRODUCTION TO ASP.NET 3.5 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: 23

MODULE 3: INTRODUCTION TO ASP.NET 3.5 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. 24

MODULE 3: INTRODUCTION TO ASP.NET 3.5 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. 25

Module 4: Introduction to ASP.NET 3.5 (Material)

More Related Content

What's hot

Viewers also liked

Similar to Module 4: Introduction to ASP.NET 3.5 (Material)

Recently uploaded

Module 4: Introduction to ASP.NET 3.5 (Material)