(Please open the article to see the flash file or player.)

I continue to explain how to add a new page to your menu and make it a submenu. The way we add a submenu is to create a new sitemapnode inside the sitemapnode of the page that will be the top level navigation (watch the video to understand this)

Sitemapnodes are arranged in heirachy, so it’s easy for you to create a new sitemapnode within another sitemapnode to create menu and submenus. If you are having difficulty with a menu and submenu please watch this video and the previous video.

Watch this video and leave comments

(Please open the article to see the flash file or player.)

Go to the toolbox, drag the Menu control to the navigation area of the page. Click the small arrow sign on the menu control and choose a datasource, but because we dont have a data source we cannot do anything.

To add a datasource, a sitemap on this occasion, we right click on our project and select Add New Item. On the window that pops up, you select SiteMap. The sitemap will be the datasource for our menu control. Leave the default name and add it.

You add the url, title, and description to the sitemap for each page. Also remember that anytime you create a new page you need to add the page to the sitemap if you want it to be displayed on the menu.

Now we go back to the menu control and select a datasource, we select the sitemap option and click ok. You set your staticdisplaylevel to 2 to display your menu on the page.

Watch the video and leave comments.

(Please open the article to see the flash file or player.)

You can easily navigate your way around the controls on the page by using the guide that is provided below the page.

I modified the page CSS inside the header area. I also pointed out to you how to know which CSS class to modify. The tooltip will tell you which CSS class is being selected when you put your mouse on a control that has associated CSS class.

I also showed how to modify the CSS property of any control without having to write any CSS. The Style Window is very good, you can change the font fore color, background color, border, font family, etc there are lots of control properties that can be modified using this Style window.

I changed the header area text and modify the size of the font.

Then i added another contentplaceholder to show that anywhere you want to add custom content that is where you place a contentplaceholder. I will be adding a News section to the website in the future.

(Please open the article to see the flash file or player.)

When you add a table to your page, the alignment of the text within the cell is automatically set to middle. If you dont know how to fix this it can drive you mad. On the properties window you need to look for the Style option, select it and when the style option windows pops up, you want to look for where it says Block, and select the Vertical Align and set to Top. This way your content will be aligned to the top of the cell and not the middle.

Drag contentplaceholder to the area where you want the content for other pages to go, once you add this control you can then modify the content on each page as you want, while all of them have the same look and feel as the master page. Same look different content.

I added two more pages to inherit from the master page, and they all had different custom content. Please watch the video and leave nice comments

(Please open the article to see the flash file or player.)

To add a master page, add a new item, and select Master Page from the choices. Once the master page is added, go to the source code and you see a contentplaceholder within the master page. The function of this contentplaceholder is that when you create pages that inherits from the master page, the contentplace holder will provide a custom content for this pages. Any other area apart from the contentplaceholder you will not be able to modify it (watch video to understand).

In order to create a master page i deleted the contentplaceholder that was added by default, then i added a 3×3 table. This table will be used to create a layout for the master page. The layout was structured with header section, content section, footer section, and navigation section.

Follow what i did to create a clean layout if you are not proficient in CSS, but if you know CSS you will shine . I added a new page that inherited from the master page and showed you how to add the custom content provider, which is the contentplaceholder.

I also showed you how to modify the CSS of the master page from the properties windows. This will add the CSS properties inside the header area. If you are very good in CSS you can create your styles on a separate file and add the file to the application as an existing item or simply drag and drop it inside your page.

I then add another page to demonstrate that they all have same look and feel. Watch the videos and leave comments. Thanks.

(Please open the article to see the flash file or player.)

• Database controls are not covered because it is very difficult to explain them without having any data in a database. I went through them briefly but just like i said in the previous video i will cover these database server controls thoroughly throughout this video series
• Validation controls – brief introduction to what they do. Validation controls validates the input of the user to make sure they have obeyed the rules before their data is submitted to the database
• Required field validator – makes sure that you have filled out a required field on a form
• Range validator – checks to make sure your input is within the range of acceptance, for example checking to make sure that a user is old enough to visit your website or checking to make sure a user has entered a number between 8 and 12.
• Regular expression validator – complex and will be covered in the future
• Compare validator – compare value between two input on a form, for example, when you require the user to type the password twice, this need to be checked.
• Custom validator – you have more control over it.
• Validation summary – this will display all the errors that has occured on a page in an area that you have chosen.

Navigation Controls

• Sitemappath – this is what is called breadcrumb on a website, it displays the heirachy of the pages and how they are related so the user can move between the pages easily, and the user also know where they are in relation to other pages or the home page. I will delve deeper in the future on this control.
• Menu – is used to display the menu on a page.
• Treeview – this is used to create a heirachical menu, watch the video to understand.

Login Controls

• Used to create membership website
• Loginview – you have control over what user see when they login and when they log out on a section of your website, for example you may have a message that says “welcome, please login”, this will display when a user is not logged in, but as soon as they are logged in you changed the message to “Welcome Username”.
• Login – login control which the user will use to login
• Password recovery – used to recover lost password
• Loginname – display the username of the logged in user on an area of your website
• Createuserwizard – this is used to create a new user, form.
• Changepassword – used to change user’s current password.

etc.

I also explain the differences between the HTML control and the server controls.

Watch the videos to understand better and leave comments. Thanks

• Label – Its used to display text
• Textbox – used to receive input from users
• Button – button is used to send message to server for processing
• LinkButton – another form of button which looks like anchor text
• Image button – this will allow you to use your own image as button, which is a cool feature, instead of using the default button
• Hyperlink – Anchor text as you know
• Dropdownlist – enable you to choose from different options
• Listbox – you choose from different options but you can select multiple choices
• Checkbox – you can select multiple options from a given list by ticking what you want
• Checkboxlist – you can bind this to a database
• Radiobutton – just like a checkbox but you can only choose one option
• Radiobuttonlist – can be bound to a database or xml file
• Image – you can add image to your website using this control
• Imagemap – allow you to have an image with different responses when you click on different area of the image, for example if you have an image map for a human skeleton, when you click on the head area you get different response from when you click on the arms.
• Table – a table as you know it (not with four legs though )
• Calendar – you can add calendar
• AdRotator – can be used to display advertisement on your website.
• File upload – can be used to upload files to the database, or save file onto your computer.
• Multiview – have multiple views on one page.
• Panel – is a container that can be used to hold other controls.
• and so on.

Watch the video and leave comments.

(Please open the article to see the flash file or player.)

This is what you’ll learn by watching this video

• I showed the debugging output where all the debugging message are displayed
• I went through the solution explorer, the solution explorer is where your files are placed in the application while you are developing your application.
• Also I showed the database explorer which is where all your databases will be displayed including their corresponding tables, diagrams, stored procedures etc.
• How to restore any of the windows in case you close them by mistake. Just go to the View menu and select the window to restore.
• How to auto hide the toolbox, you have the choice to hide or show it, i usually hide it to have more area to work on.
• The properties window, this is what you will use most of the time.
• Docking in and out any of the windows.
• You have a guide that will help you decide on where you want place the window.
• The properties window shows the properties of the control that is currently being selected. Any control that you select, the properties windows will display all the properties that the control has.
• I quickly went through properties of button and label and how to modify them to show that the properties you modify on a button is different from the properties of a label.
• Toolbox, a brief introduction.
• how to add more toolbar that you may need.

Watch this video and comment.

(Please open the article to see the flash file or player.)

Below are the topics you’ll learn by watching this video tutorial;
1. How to create a new website
2. How to choose the development language, you have a choice to choose between C# (pronounced C Sharp) or Visual Basic. If you don’t know C# programming language i’ll be providing basic programming tutorials that will enable you to develop your asp.net web application. You do not require lots of programming skills to get up and running.
3. Where to save your website files, you have option to choose FTP , HTTP or file system and how to name your website.
4. The location where to save your website, you can choose anywhere on your computer to save your website and give it appropriate name.
5. How to determine which .NET framework you are currently using, i’ll be providing tutorial on how to change this in the future.
6. Understand the difference between the code view, split view and design view.
7. The purpose of the files created, which are default.aspx, app_data folder and web.config files.
8. How to run your application to view your hard labour in your default browser. There is a built-in web server in visual web developer, so you don’t need to mess around installing any web server or IIS.
9. How to enable debugging.

This is the first video tutorials on asp.net and i’ll be providing initial 20 video tutorials to get you up and running. The reason why this is important is that you will be able to develop a simple website before we delve deeper inside the .NET framework. I plan on making more than 500 videos covering every topics including ASP.NET Ajax, C# programming, LINQ, SQL Server and so on. Please feel free to leave me comments, either good or bad, and also point out any mistakes or criticism. If you are experiencing any problems during your web development I am here to help.