Adding HTML to the ASP.NET Page

After you have added an ASP.NET page also known as Web Forms page, the next thing you will have to do is add content into it by Adding HTML to the ASP.NET Page. The following ASP.NET tutorial is on how to add content into your ASP.NET page like simple static text by Adding HTML to the ASP.NET Page.

  1. Open the ASP.NET page you want to add the simple static text or add a new Web Forms Page.
  2. Go to the bottom left of the document window and select the Design Tab to go to the design View of the ASP.NET page.

Note:

    • In the Design view the ASP.NET page that you are working on in a WYSIWYG-like way. So at the moment, you do not have any text or controls on the page, so the page is blank.
  1. Next in the Design View just type “Hello World Welcome to Visual Studio 2010″ as show below.

  1. Now switch back to the Source view.

Note:

    • The above figure shows the HTML code for the text typed in the Design View.
Posted in ASP.NET Tutorial | Tagged , , , | Leave a comment

Creating an ASP.NET Web Forms Page

In the following ASP.NET tutorial you will learn Creating an ASP.NET Web Forms Page using Visual Studio 2010. When you develop a new web site using Visual Studio, it automatically adds and web forms page also known as an ASP.NET page named “Default.aspx”. This ASP.NET page can be used as you home page or even as any other page for your web site as it all depends on your web site.

The following ASP.NET tutorial will help you learn how to create your ow new ASP.NET page.

  1. First close the “Default.aspx” page by right-clicking the tab containing the file name and clicking on Close.

  1. Go to the Solution Explorer and then right-click the Web site and then click on “Add New Item”.

  1. The Add New Item dialog box opens and then select Web Form from the Visual Studio installed templates..
  2. Change the name to anything you prefer or leave it as Default2.aspx (the default name of an unnamed ASP.NET page).
  3. Next select the default programming you wish to use for your web site from either Visual Basic, C#, or J#.

Note:

Even though you specify the default prgamming language here, you can always choose another programming language when you create a new page or component for your web site.

  1. Next check the Place code in separate file check box. The following screen shot shows the Add New Item dialog box.

  1. After you are done, click on Add which creates a new page and opens it in the Source View or Design View.
Posted in ASP.NET Tutorial | Tagged , , , | Leave a comment

Visual Studio Environment

It is always good to get to know the Visual Studio Environment you are working on before you start to work on your website because if you are familiar with the environment you are working on, it is easy for you to start developing and maintain your web site.

The following is an ASP.NET tutorial on the Visual Studio Environment, and the following figure shows you the windows and tools that are available in Visual Studio 2010.

Note:

  • The above figure is the same for the Visual Web Developer.

The following is and explanation on the figure above next to their respective numbers, describing the most commonly used windows and tools.

  1. Toolbars – contains the commands for formatting text, finding text, etc. Some toolbars are available only when you are working in Design view.
  2. Toolbox – contains the controls and HTML elements which you can drag onto your page. Toolbox elements are grouped by common function.
  3. Document window – is the area which displays the documents you are working on in tabbed windows. You can switch between documents by clicking tabs.
  4. Server Explorer/Database Explorer – is the area which displays database connections. If Server Explorer is not visible in Visual Studio or in Visual Web Developer – go to the View menu – -> Other Windows – -> Server Explorer.
  5. Solution Explorer – is the area which displays the files and folders in your Web site.
  6. Properties window – gives you the ability to change settings for the page, HTML elements, controls, and other objects.
  7. View tabs – enables you to choose with different views of the same document.
    • Design view is a near-WYSIWYG editing surface.
    • Source view is the HTML editor for the page.

Note:

  • You will work with these views when using the Visual Studio or Visual Web Developer so you can alawys open your web pages in the Design View or Source view as you prefer by going to the Tools Menu – -> Options – -> HTML Designer node. Here you can select the HTML Designer node, and change the Start Pages In option.
Posted in ASP.NET Tutorial | Tagged , , , , | Leave a comment

Creating an ASP.NET file system Web site

In this ASP.NET tutorial you will learn Creating an ASP.NET file system Web site using ASP.NET in Visual Studio 2010 using the .NET framework 4.0. The definition of a file system web site is a site which stores your website’s contents like the pages, images and other resources in  a folder in your local computer.

Other types of web site creating techniques include local IIS web site which will store your website’s contents like the pages, images and other resources in a subfolder of the local IIS root which is by default “C:\inetpub”. The other type of website is an FTP site, where all the website’s contents like the pages, images and other resources are stored on a remote server which you have access to over the Internet using File Transfer Protocol also known as FTP. A remote site stores files on a remote server that you can access across a local network.

In this ASP.NET tutorial you will create a file system Web site that does not require Microsoft Internet Information Services (IIS) and you need is to create and run your page in the local file system as mentioned below.

  1. Open the Visual Studio 2010.
  2. Go to the File menu and select on “New Web Site”.

  1. Select the “ASP.NET Web Site” in the Visual Studio installed templates.

Note:

When you create a new Web site, you always specify a template, which is used to create the web application which contains different files and folders of the website. For this ASP.NET tutoria the website created is based on the ASP.NET Web Site template as it need the creation of some folders and a few default files.

The following screen shot shows how the New Web Site dialog box appears.

  1. Next, in the Web Location box, select File System.
  2. Then enter the name of the folder where you want to keep the pages, files and folders of your Web site.

For example, type the folder name C:\BasicWebSite.

  1. Select your preferred language, from wither Visual Basic or Visual C# from the Language list.

Note:

When you create your web site, the programming language you choose here will be the default language used throughout the application, but you also have the ability to use multiple languages in the same web application by creating pages and components of your web site in different programming languages.

  1. After you are done, click on OK.

Note:

When you use Visual Web Developer or Visual Studio 2010 to create a web site, it automatically creates the folder and a new page named Default.aspx. When this new page is created, by default Visual Web Developer or Visual Studio 2010 displays the page in Source view, where you can see the page’s HTML elements.

The following screen shot shows the Source view of a default Web page.

Posted in ASP.NET Tutorial | Tagged , , , | 3 Comments

Visual Studio IDE Enhancements

The following ASP.NET tutorial describes some of the new Visual Studio IDE Enhancements in the Visual Studio Integrated Development Environment (IDE).

Visual Studio IDE

  • Visual Enhancements

The IDE has been redesigned for better and more user friendly readability. Only the necessary lines of code is shown and any unnecessary pieces of code are removed.

  • Ability to Support Multiple Monitors

The new Document Windows like the Code Editor and the Design View Window can now be outside the IDE window.

For example:

  • The Code Editor can now be dragged out of the IDE and view it and the Design View window side by side.

Better Tools to Explore Code

  • Code Editor

The all new Code Editor makes code written easier to read. The Code Editor can now zoom in and out Text by pressing the CTRL and scrolling with the mouse wheel. Now when you click on a symbol or piece of code in Visual C# or VB, all the other instances of the symbol or piece of code is automatically highlighted.

Also Check out:

  • Navigate To

The other enhancement is on the Navigate To feature. Navigate To feature allows you to “search-as-you-type”. This type of search is supported for files, types, and members. Navigate To gives you the ability to use Camel casing and underscores to abbreviate your search text.

For example:

  • “AOH” can be used to search for “AddOrderHeader.”
  • Call Hierarchy

Call Hierarchy now gives you the ability to navigate from a member to the members that call it and to the members that it calls, when using C#and C++. The Call hierarchy feature comes in handy when you need to explore Object Oriented Code. This is useful for exploring object-oriented code.

Debugging

When using Visual Studio Debugger, a redesigned Threads window enables you to filter, call-stack search and expand, and group. Organization, searching and sharing of breakpoints with other developers is also available for you now.

Also Check out:

The new Parallel Stacks and Parallel Tasks windows allows you to visualize and debug parallel codewritten in C++, C#, or VB.

IDE to Project Capabilities relationship

The other enhancements is that the features in the IDE, like Add Reference and the Toolbox are now in relation to the version of the .NET Framework or Silverlight that your project targets. Therefore, this makes types, members, and controls from assemblies that target an earlier version of the .NET Framework not appear in IntelliSense and in turn produce background compilation errors.

For example:

If your project targets .NET Framework 2.0 and you use a language feature that .NET Framework 2.0 does not support, like anonymous types, the IDE will mark the code as an error.

Test-First Support

The new Integrated Development Environment can generate code for new types and members from their usage before they have been defined when using VB or C#. So now you can write tests first and then generate the code required to compile the tests.

IntelliSense also now gives you a suggestion mode that prevents IntelliSense from automatically completing a type or a member that has not yet been defined.

Application Lifecycle Management

Application Lifecycle Management client application is now available in all versions of Visual Studio but not in the Express versions. Application Lifecycle Management includes version control, work item tracking, build automation, a team portal, reporting and business intelligence, Agile Planning Workbooks, and test case management which are everything that you need to collaborate on your software development projects. Visual Studio 2010 has Application Lifecycle Management included in it with one Client Access License (CAL). You can also purchase additional Client Access Licenses as you require.

Text Templates and Code Generation

Text templates can now be created and used in any version of Visual Studio without any other components. The introduction of the Preprocessed Text Templates in Visual Studio 2010 has made generating text files from your application very simple.

The integration with the build system has improved support for code generation. Therefore now the source code generated is always up to date after any change to the source model

New Start Page

The Start Page in Visual Studio 2010 now features a new look and feel with some better functionality added to it. A variety of selected and categorized learning resources has been put into a tabbed content link area and are MSDN resources, community resources, and a customizable news feed.

Recent Projects list now lets you add projects to the list or remove them with a single mouse click.You can also install custom Start Pages from Extension Manager.

New Extension Manager

By clicking on the Extension Manager on the Tools menu you can now installing any new Extension for Visual Studio on the IDE. By using the Extension Manager you can install community published extensions from the Visual Studio Gallery Web Site without even opening a browser. Using the Extension Manager you can also uninstall, disable, or re-enable installed extensions.

New Project Dialog Box

New Project dialog box in Visual Studio 2010 also includes the same search and install capabilities as the Extension Manager, except that it searches only for project templates and item templates.

New Help Viewer

Help Viewer has also been enhanced for Visual Studio 2010. You can now:

  • View documentation online by using your preferred Web browser
  • View offline by using your preferred Web browser
  • Download the latest documentation on demand
  • Navigate the documentation by using a simplified table of contents
  • Search for specific content by using an improved full-text search algorithm
  • Use a more streamlined F1 system to locate content specific to the task that you are working on
Posted in ASP.NET 4 Theory | Tagged , , , | Leave a comment