Sometimes we need to make our users for their convenient not to remember the relationship between Id number with related to its designations. For E.g. in a company there is “Projectmanager”, “developer”, “Sales” etc … persons & they have their individual primary Id with those Ids are also may be related with their designations(or Employee Type.)

Introduction

Generally these scenarios are lots of use in data base where foreign Key is used to Express relation between one table with other table. Ok, I find this beautiful article which comes in my mail , so why not to share this. You can also get this http://www.pdsa.com , there is also other solutions of Silvelight u can get. I implement this in my own way in this small application in a Simple Coding .

There is lots of things can be improvement but whatever I can I do it .

The First Picture :

pic-1

This is the Data grid which is fill with some information. Now , when the User want to pick from a Selection of Items as an Example , EmployeeTypeId for Employee Data then he/she need not remember the corresponding data i.e. that Id Person may be “Projectmanager”,”Salesmanager” or etc. It will automatically call in the Combobox. Lets look the Image .

pic-2

Ok, Now lets built this application .

Open Silverlight Project whatever wish give the name of the application in VS2010.

Now , make 4 folder & their names are Model, View , ViewModel , Providers. Add new Classes (in C#)in this folders . Lets see the pic – 3 will clear this .

PL ignore the Styles folder . Its nothing but implement the Styles for the Controls of the Silverlight.

Now, its for Coding . First in the Employee.cs class which is located in Model Folder. Just need to write the properties for this Class. Here is the Code .

publicclassEmployee

{

public Employee()

{

// This is a default Constructor

}

public Employee(int id, string name, int empTypeId)

{

EmployeeId = id;

Name = name;

EmployeeTypeId = empTypeId;

}

publicint EmployeeId { get; set; }

publicstring Name { get; set; }

publicint EmployeeTypeId { get; set; }

}

pic - 3

5. Now same in the EmployeeType.cs Class this is also in the Model folder. Here u can see the EmployeeTypeId & EmpType these two properties . Here note to be point is that the EmployeeTypeId working as a foriegnkey in Employee.cs Class. Look the Code .

publicclassEmployeeType

{

public EmployeeType()

{

}

public EmployeeType(int id, string empType)

{

EmployeeTypeId = id;

EmpType = empType;

}

publicint EmployeeTypeId { get; set; }

publicstring EmpType { get; set; }

}

6. Now our 2 clasess are ready just need to bind in the Datagrid in MainApplication page, which is in View. But wait before that we need to do others things . First in the Xaml page (Which is ur MainAppilication.Xaml) just drag and drop Datagrid from ToolBox . I take it inside row & column of main layout Grid. Upto now this is ok. But it don’t have any data because we did not pass any data information in the Model classes, just we create properties. Now its time to provide information. So we created provider Folder. Just make a Class name it details.

7. In the details.cs class first we need use this using System.Collection.ObjectModel; namespace . Here we are creating 2 Methods that will contains the data. Using observation collection makes its simplify for collection of data. look at the code;

First method for providing data to Employee in the name of GetEmployeeData().

8. Upto now this is lots . Now just show this data in datagrid. But before that need to make ViewModel class name it as a DataBind.cs. This is as simply as I can . Just make 2 Public properties & add value in its. Look how .

publicObservableCollection<Employee> BindEmployee { get; set; }

public DataBind()

{

BindEmployee = Details.GetEmployeeData();

BindEmployeeType = Details.GetEmployeeType();

}

9. Just need to move in the Xaml page . Where I give the name of the datagrid is datagrid1. In the Code-Behind file first make an instance of the Class DataBind.(Which is in ViewModel folder)

In the Constructor of the Code-Behind page of the MainApplication Xaml page . i.e. MyAppicationPage.xaml.cs page write the one line code which will fetch data from Provider class & bind it in the DataGrid. No need to write Binding options in xaml / design page or anthing . We did it in the Constructor because we want to show the data in datagrid when the page is first loaded . U do it as ur requirements.

publicpartialclassMyAppicationPage : UserControl

{

DataBind d = newDataBind();

public MyAppicationPage()

{

InitializeComponent();

this.dataGrid1.ItemsSource = d.BindEmployee;

}

}

10. Now , add this event in ur xaml datagrid . SelectionChanged="dataGrid1_SelectionChanged" .Drag & Drop 2 Textboxes one Combobox in UI page . make the desing as same in Pic -2 . Take also 3 TextBlock from the ToolBox and name them as u want . I give First TextBoxe name is Name="IDTextBox".Second TextBox name is Name="NameTextBox"Thrid is the Combobox wahic I give the name of Name="EmployeeTypeCombobox"

11. Lets solve the first 2 TextBoxes then come in Combobox . In the SelectionChanged Event (In the Page Code-Behind) need to write this code .

But when will u run the Application & click one particular data in Datagrid in Browser . U will not able to see any changes in the TextBoxes . No data will bind in these TextBoxes becauses we did not write any Binding options or code for that in the textboxes . So , I did databinding in xaml page ,u can also do it dynamic binding . usually do prefer in Xaml . See one for First TextBox .

<TextBoxGrid.Column="1"

Grid.Row="2"Height="23"

HorizontalAlignment="Left"

Margin="3,19,0,0"

Name="IDTextBox"

Text="{Binding EmployeeId}" <---------------- NotetheBinding

VerticalAlignment="Top"Width="218"/>

Simialrly for the Second TextBox Which is for EmployeeName look at this :

12. Now run ur application & see that when u select one item in datagrid its corresponding data are coming to the TextBoxes .But the Combobox doesn’t have any changes . Lets also do it . Its Some Complex so it step by step

First need bind items in the Combobox . So, first look at the code in xaml.

HorizontalAlignment="Left"Margin="5,11,0,0"

VerticalAlignment="Top"

DisplayMemberPath="EmpType"

Width="218"/>

Now , this is not enough to get the items in the Combobox. Again, Go to the Code-Behind pages , We need to bind it items in the Combobox when the page is first loaded . So, that when user select item from the datagrid it should display it in the Combobox as per requirement information . So , in the Constructor of this page write this code:

Now See that , when u click in the datagrid items ur Combobox also going chages as related with the EmployeeId anr its foriegnkey EmployeeTypeId . Is it not interesting ?

Up to Now this is one Example of how to using foriengKey in Silverlight Application without database . This is Simple & light-weight small application.

Want to jump other . Nice see this Example , we have 2 Combobox one is SelectCountry & other is Select State . I take for simplicity 3 Country & their name is “India” , ”Pakistan”, ”Bangladesh”. And take some names of these countries States like “WestBengal, Assam, etc …” for India, “Karachi, Islamabad” for Pakistan, and same some for Bangladesh.

Ok, when user Select one Country from the ComboBox its corresponding States will come in the Below ComboBox Dropdownlist. I also imlplement same logic as foreign key in the Previous .

Ok lets do it

1. First Drag & drop 2 Combobox or do it from here copy & paste it in ur xaml page . But be sure the Grid.row & column as per ur UI design. So check it .

6. U think that only last task is left in the codebehind page just bind the Combbobox with ViewModel Property . if u will do that now u get the names of the State but the main purpose of our this task will not fulfilled.u will see the all names of the States from “Tripura”,”Assam”…..to “Chattagram.” But we don’t need that we need the Country wise states if u select India then u will see the only Indian States. If u Select Pakistan then u will see that Country’s corresponding states. SO here is the main use of our foreign Key.

7. So for that we need to write Some one Step more Code. But not very Complex. Just Follow.In the ViewModel DataBind.cs we will write one Method That will compare the StateId with CountryId & then filter the States like that.

Conclusion

So , its upto now its all . Hope ,u enjoy this.

I am beginner in Silverlight . Since last 7 Months I’m doing working(learning) Silverlight. I love it . I do lots of mistake also . But in this article I tried my best to make it properly Useful. After all any suggestion, Any mistake , or any technical feedback are most welcome . This will improve my Skill & myself. U all experienced people can also develop it with lots of modifications. Pl let me know so that I can get some knowledge from u. The main logically idea I find out for this article from the Pdsa site Which I mentioned in the Top of the Article.