A TreeView control provides a way to display information in a hierarchical structure using nodes.
Root Node (Parent Node)
The top level nodes in a TreeView is called the Root nodes.
Child nodes
The root nodes (also known as parent nodes) can have nodes that can be viewed when they are expanded. These nodes are called child nodes. The user can expand a root node by clicking the plus sign (+) button.
Alternatively, you can have a single table to maintain this data of parent and child nodes.
Now let us start a new project and populate the TreeView.
Create a new project and name it LoadTreeView.
Set the form's Name Property to FrmTreeView and its Text Property to Populate TreeView.
Add a tree view control to the form and set its dock property to Left
To configure the connection settings of the Data Source add an application configuration File
From Project -> "Add" -> "New Item..."
Paste the code below into the App.config File: xmlversion="1.0"encoding="utf-8" ?><configuration> <connectionStrings> <addname ="ConnString"connectionString ="Data Source=yourServerName; User Id =yourUserName; Password =yourPwd;"providerName ="System.Data.SqlClient"/> </connectionStrings></configuration>
To access the connection string from code add a reference to System.Configuration and add the namespace using System.Configuration.
In the form's Load Event paste the following code:
When you double-click a node on the Treeview control a message is displayed with the fullpath to the node. Here I have clicked the Acc. Standards node.
ClientID of a control is one of the feature in ASP.NET which always hunts me in the past. It is very hard to predict what client id the page is going to render when it is put in the client side. ASP.NET has an unique naming system, which generates the client ids and sends to the browser based on certain logic. With the introduction of ASP.NET 4.0, the work become very easier. Handling with the client ids are now very easy.
In this article I am going to discuss how you can take benefit of the feature to manipulate the client id generated in the client side.
The Problem
Before I start discussing about the Solution, let us discuss what exactly the problem is when writing an ASP.NET application.
There is a wide difference between the id of the html and the id on a server control. ASP.NET page renders itself to produce HTML output. Every server control has an ID which uniquely identifies the control in the class. Now this control can render quite different html ids based on certain scenarios.
Lets I have a simple page :
Here I have a TextBox control which is set runat="server" that means the control is not an html control and the server will render it. While it renders, it creates a
I have defined one javascript which looks like : function validateName() { var element = document.getElementById("txtName"); if (element.value.length > 0) return true; return false; }
This will work Fine. But say after a certain while I add one MasterPage for this Html. Here comes the problem.
If you place the any control inside the contentplaceholder (with name MainContent) of a masterpage, its id will be generated as ctl00$MainContent$txtName.
The id can be divided into 3 sections which are separated using $ signs.
1. ctl00 : This is a random id generated for every masterpage you nest. Its ctl00, ctl01 ...
2. MainContent : It represents the id of the MasterPage. Here I have specified the id of the MasterPage as MainContent.
3. txtName : This is the actual Id of the control in the serverside.
Thus you can see, depending on the MasterPage id, the id of all the control will change. So after placing it inside the masterpage, my javascript will not work and will always return false, as element will be null.
In case of this problem, either I can write
var element = document.getElementById("ctl00$MainContent$txtName");Or more precisely I might go for :
var element = document.getElementById("<%=this.txtName.ClientID %>"); Both the scenario will work, but both of them has certain limitations.
Limitation of 1st Approach
•Laborious job to modify all the clientid reference if I have to change the name of the MasterPage and /or Nest the masterpage inside another masterpage to change layout.
•Need to change the javascript files that are referenced from the page, and hence the javascript will be totally dependent on the current page.
Limitation of 2nd Approach•
In spite of limitations of the first approach, it is also not full proof to use the second approach, even though it is better to use the second.
•Javascript should be placed with the page. It cant replace the server tags to the external js file.
•Page size will increase, as each page will have lots of javascript blocks which just interface between client side scripts.
•Mix of Server side and client side blocks which should always be avoided in ASP.NET (unlike Classic ASP)
New Approach to Solve the Issue
ASP.NET 4.0 comes with a new feature that allows you to specify the mode of the client id for each control. So you will get full control of what id to be rendered in the client side and hence it becomes easier to handle the problems that I have discussed previously.
Every Control of ASP.NET 4.0 comes with a new property called ClientIDMode. It determines how the ClientID will be rendered. Let us discuss about the different modes of ClientID rendering and see how you can use it :
ClientIDMode.Static
In this mode, the control will render the ID of the client side as it is defined in the server side. It comes handy when you dont want to change the id of the client side html controls. In this case, as ASP.NET doesn't takes care of the uniqueness of the control id rendered in the client side, it will be the responsibility of the programmer to uniquely identify each control it defines.
In the above example, I can use
In this case the client html will be as :
So I can now easily refer to the control in javascript only using txtName even from external javascript files. Ahh... The problem solved.
ClientIDMode.AutoId
AutoId is the default ClientIDMode when it is not defined anywhere in the page. It comes handy when you have configured all the ControlIDMode of the page or of the whole application as Static or any other value, and you want only a specific control to have Inherit value.
If I place the ClientIDMode="AutoId" in the above code, the html will look like
You can see the ID of the control is modified to refer the ContentPlaceHolder name with an AutoId just before the Id. AutoId mode is best when you don't want to handle the uniqueness of the control id yourself and want to rely totally on ASP.NET.
ClientIDMode.Inherit
Inherit is slightly different than the AutoId. AutoId places one Unique Sequence page id of the controls using ctl00, ctl01 .. In case of Inherit mode, it only places the inherited control id for each controls.
As I am within the masterpage, it will give you "MainContent_txtName". So the only difference between inherit mode and AutoId is that AutoId places the unique PageId while Inherits doesnt.
ClientIDMode.Predictable
The modes that I have discussed earlier works when we are going to use static controls on the page. Predictable mode comes handy when we are going to use DataBound controls which renders more than one control with same id. So using Predictable we can predict the id that the control will generate when it rendered in the client side.
Let us take the example of a ListView to demonstrate how you can easily use this. For simplicity I am using XmlDataSource to define the Data.
Say this is my DataSource and I define a ListView using this DataSource.
' runat="server">
Now as I defined the ClientIDMode as predictable, the span which is rendered in the client side will look like :
AbhijitSheoPuneetKunal
Therefore you can see the ids will be generated. It has 4 parts(each separated using underscores). The first part represents ContentPage Name, Next shows ListViewId, and then Control Id and then a unique number for each record.
Now say I don't want the uniqueness to be implied automatically by ASP.NET. I would like to render the suffix with the same id that is present for each student. There is another property for each databound controls that I can make use of which is called ClientIDRowSuffix which enables you to use a proper suffix for each control.
' runat="server">
Thus the html will seem like :
AbhijitSheoPuneetKunal
So the suffix will be the same as the record id of each student.
Similarly, you can use as many suffix as you want. Each of them should be separated using comma. So if I write ClientIDRowSuffix="id,name" it will be like :
Abhijit Sheo Puneet Kunal
Thus you can see, now the id which is rendered in the client will possess the name of each students.
Note
You can also configure the ClientIDMode to a page. This will modify the default ClientIDMode of the page in which it is configured. Similarly you can also set the ClientIDMode in Web.config to apply this to every control in the current web site.
Conclusion
It is a common problem for every ASP.NET developer to handle with ClientIds. With the introduction of ASP.NET 4.0, the problem is cured, and you can get a better approach to handle the client end control ids easily. I hope this would help you.
Couple of days ago, I started working on writing Silverlight Tutorial for Beginners on request of Mr. Sheo Narayan (Web Master) from DotNetFunda.com. I was busy for last few days to publish it online. I was really excited for it. Today, I am announcing my first Chapter of the Silverlight Tutorial for the public view. It will be a continuous process to complete the full tutorial. Please keep an eye for the next publication.
Please don't forget to provide your comments or suggestions.
In this chapter of the tutorial, you will learn about the very basic information on Silverlight i.e. what is Silverlight, what is the System Requirements for installing Silverlight and the pre-requisite to create a Silverlight application. After reading this chapter you will come to know about XAML, XAP file, Application XAML and how to host a Silverlight application.
Silverlight is a powerful cross-browser & cross-platform technology for building the next generation web experience & rich internet applications for the web. You can run Silverlight in most of all the popular browsers like Internet Explorer, Firefox, Chrome, Safari etc. Silverlight can run in various devices and operating systems like Windows, Apple Mac OS-X and Windows Phone 7. Using Silverlight you can create rich, visually stunning web applications like flash. Also you can create smooth animations using Storyboards; you can stream media over the net etc.
Silverlight web browser plug-in comes as free to install (approximately 4-5 MB in size). You can download the required plug-in from Microsoft Silverlight Site.
What are the System Requirements for installing Silverlight?
Minimum System Requirements for installing Silverlight plug-in is as follows:
PC Type
Processor
RAM
Operating System
Windows PC
500 MHz or higher, x86 or x64 bit processor
128 MB
Windows XP SP2+
Mac Power PC
PowerPC G4 800 MHz or higher
128 MB
Mac 10.4.8 or higher
Mac Intel-based
Intel Core Duo 1.83 GHz or higher
128 MB
Mac 10.4.8 or higher
Silverlight also supports Linux PCs. The plug-in name for Linux operating system is Moonlight and you can get the information about it in Mono Project's Moonlight site (http://www.mono-project.com/Moonlight).
Minimum System Requirements for installing Silverlight SDK for development is as follows: If you are a developer and want to start working on it, you must need the following environment to install the Silverlight tools.
Operating System
- Microsoft Windows XP Service Pack 2 or higher
Developer Tools
- Visual Studio 2008 SP1 (for Silverlight 3)
- Visual Studio 2010 (for Silverlight 3 & Silverlight 4)
Designers Tools
- Microsoft Expression Blend 3 (for Silverlight 3)
- Microsoft Expression Blend 4 (for Silverlight 3 & Silverlight 4)
Silverlight SDK
- Silverlight 3 Tools for Visual Studio 2008 SP1
- Silverlight 4 Tools for Visual Studio 2010
How can I know whether Silverlight is installed in my PC?
If you are not sure whether Silverlight is already installed in your PC, just go to the Microsoft Silverlight Installation Page (http://www.microsoft.com/getsilverlight/get-started/install/) and that will tell you whether the plug-in is already installed or you need to install.
What are the Prerequisite to create a new Silverlight Application?
Before starting with the Silverlight application development be sure you have all the necessary softwares installed in your PC. If you don’t have then follow the steps mentioned in Microsoft Silverlight Site (http://silverlight.net/getstarted/) to download & install the following items in your development environment:
Visual Studio 2008 SP1 for Silverlight 3 application development or Visual Studio 2010 for Silverlight 3 & Silverlight 4 application development
Silverlight 3 Tools for Visual Studio 2008 SP1 or Silverlight 4 Tools for Visual Studio 2010
Expression Blend 3 for Silverlight 3 or Expression Blend 4 Preview for Silverlight 4 (optional)
WCF RIA Services for Silverlight (optional)
Silverlight 3 Toolkit or Silverlight 4 Toolkit based on your earlier version of Silverlight (optional)
Remember that, Silverlight 3 comes preinstalled with Visual Studio 2010 and hence if you are using Visual Studio 2010, you don’t need to install the Silverlight 3 Tools for it. Using Visual Studio 2010 you can develop both Silverlight 3 and Silverlight 4 applications but Visual Studio 2008 SP1 only supports Silverlight 3.
If you have proper development environment ready for Silverlight application you can proceed to the next chapter for creating our first simple Silverlight project. I am using Visual Studio 2010 RC and Silverlight 4 RC while writing these applications. Hence, the attached samples will not open in Visual Studio 2008.
What is XAML?
XAML stands for eXtended Application Markup Language. It is nothing but an XML file which is used to declaratively create the User Interface of the Silverlight or WPF applications. This XAML file generally rendered by the Silverlight plugin and displayed inside the browser window. When you compile your projects which includes XAML pages, those first converts into BAML (Binary Application Markup Language) and then rendered in the web browser window. Let use see a simple example of XAML here:
The above XAML is a typical example where I am creating a text using the TextBlock control by specifying different properties as attributes to the control for name, font-family, weight, text etc.
What is App.xaml file?
App.xaml file is the loader of your Silverlight Application. You can declare your shared/global resources, styles, templates, different brushes inside this file which will be accessible by your application.
A typical App.xaml file looks like:
It has a code behind file too named as “App.xaml.cs”. This file is used to handle global application level events which you can use as per your need. Visual Studio creates these two files at the time of project creation. The three events inside the App.xaml.cs are:
Application_Startup
Application_Exit
Application_UnhandledException.
These three events are registered in the constructor of your App.xaml.cs file. Here is the code snippet of the same:
Let us do a brief discussion on each part of the code file.
Overview of App Constructor:Inside the constructor of the App class you will find that all the three event has been registered. Also, there is a call to InitializeComponent() method. If you look around the whole class you will not find the method implementation. Strange!!! Where is the method?
The method has been implemented inside the partial class of the App class. If you go to the definition or just press F12 on top of the method, Visual Studio will open up the actual file named “App.g.i.cs” which contains the partial implementation of the same class. There you will find the method implementation.
What this method does: This method is responsible to load the XAML using the LoadComponent() method into the memory which can be used by your application.
What can we do inside the App.g.i.cs file: App.g.i.cs file is auto generated by the compiler and hence if you modify something there will be overwritten by the compiler itself on next build.
Why this file is not available inside my solution: As this is an compiler generated file, it has been placed inside the temporary directory named “obj”. If you go to the solution directory you will see the “obj” folder. Open it and browse through it’s subfolder (either debug or release) and you will see the file placed there. If you are unable to find it there, just do a rebuild of your solution and immediately it will be created there.
Overview of Application_Startup Event: Application_Startup event is the root of your application. In this event you can create the instance of your initial page and set it as the RootVisual. Also, if you want to create some global objects or want to write some app initialization code, then this Application_Startup event will be the best part for you to implement it.
Overview of Application_Exit Event: Similarly, you can write code to cleanup objects or do something when closing the application inside the Application_Exit event. Overview of Application_UnhandledException Event: If any exception comes while running and you didn’t handle that in the actual place, you can write some code in Application_UnhandledException to log the error details into database or show some message to the user. This will allow the application to continue running after an exception has been thrown. By default, if the app is running outside of the debugger then report the exception using the Browser DOM & the error will be visible in the status bar of Internet Explorer.
What is MainPage.xaml file?
When you create the Silverlight project, Visual Studio IDE will automatically add a default “MainPage.xaml” file which is actually a startpage for your Silverlight application. You can modify this page as per your need or can create a new one. So, what’s there inside the file? Lets look at it:
Lets walk-through each lines of the code. It contains a UserControl as root of the file which may contain all other controls inside it. The following line tells the compiler to use the specified class to use:
The next couple of lines beginning with xmlns tells the compiler to import some namespaces which can be used by the Silverlight XAML page.
The following line speaks about the design time Height & Width of the Silverlight page:
If you want to specify actual Height & Width of your Silverlight application, you can manually append the following line inside that:
Next comes the Grid control which is used as a layout panel and that can include more other controls. Though the default XAML file uses the Grid as the layout panel, you can change it to any other panel as per your need. I will discuss about the various panel later in this tutorial.
“MainPage.xaml” has also it’s code behind file like App.xaml & you can use this to write code to develop your functionalities. By default, it comes empty with a call to Initialize() method inside the Constructor of the MainPage class. The implementation of this method is also available in a different partial class of MainPage inside “MainPage.g.i.cs” like “App” class. Whenever you add some controls inside the XAML page, it will be loaded here.
What is XAP file?
XAP (pronounced as ZAP) is the compressed output of the Silverlight Application which includes application manifest file, compiled output assembly and other resources used by your silverlight application. This uses the normal ZIP compression method to reduce the total download size. When you build your Silverlight application, it actually generates this .XAP file & puts in the output folder which the .aspx page refers as source to load the application.
Once you build your project, it will create the XAP file (in our case: SilverlightApps.HelloSilverlight.xap) and put it into the ClientBin directory of the web project. When the page loads it will pickup from the same location as the source you specified inside the aspx/html page.
How can I host a Silverlight Application?
When you create a Silverlight project, it asks you to create a Web Application project. This project is responsible for hosting your XAP file. Generally Silverlight application doesn’t require any server to host it to run, but if you are planning to host it in web you must need a web server for that. Once you publish your Web Application to host in IIS, you may need to add three MIME types in your IIS Server. This is require to host it in earlier versions of IIS. Latest version of IIS comes with that configuration by default. Followings are the list of MIME Types those you need to add in your IIS Properties:
Silverlight Application (XAP) generally loads inside the ASPX or HTML pages pointing to the path to load the XAP. The aspx/html page uses tag to load the Silverlight application.
Here is the code present inside the aspx/html pages for loading the Silverlight XAP:
Let us go line by line to learn the basics of it.
In the first line
Next couple of lines uses tag.
The first param “source” has the value to the location of the .xap file.
Second param “onError” tells the plug-in to call the javascript method mentioned in the value, if any application error occurs.
The third param “background” specifies the color of the Silverlight application background.
The next param “minRuntimeVersion” specifies the minimum required plug-in version to load your Silverlight application.
If “autoUpgrade” is set as true in the next param, it will automatically upgrade the runtime.
The next lines are very interesting. Whatever you design there, will not be visible in the browser in normal scenarios. If the user doesn’t have Silverlight runtime installed in his PC or the Silverlight plug-in is disabled this section will visible to the user. This part is well known as “Silverlight Installation Experience panel”. By default, it shows a Silverlight image to download the runtime from Microsoft site. When the user clicks on it, this starts the installation. I will discuss about the Silverlight Experience later in depth.
- See more at: http://www.kunal-chowdhury.com/2010/04/silverlight-tutorials-chapter-1.html#sthash.vPMnACa5.dpuf
