Database operations using Silverlight 2.0 WCF and LINQ to SQL - Developing a Silverlight 2.0 page to demonstrate CRUD functionality

(Page 3 of 5 )

Now we have to develop a Silverlight 2.0 page which can consume our previously developed WCF Service. The page would look like the following:

The following are the steps necessary to develop the above Silverlight 2.0 page:

• Add a new “Silverlight” project (“DemoSL”) to the solution. This in turn will add a “DemoSL.Web” project (Silverlight hoster application) to the solution. Detailed steps are provided in previous articles.

• Add a new “Silverlight user control” (“Page4.xaml”) to the “DemoSL” project and modify “Application_Startup” in “App.xaml” as follows:

Private Sub Application_Startup(ByVal o As Object, ByVal e As StartupEventArgs) Handles Me.Startup

Me.RootVisual = New Page4()

End Sub

• Modify “Page4.xaml” as follows:

<UserControl x:Class="DemoSL.Page4"

xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"

xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"

Width="400" Height="300" xmlns:d="http://schemas.microsoft.com/expression/blend/2008" xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" mc:Ignorable="d">

 <Grid x:Name="LayoutRoot" Background="White">

 <Grid.RowDefinitions>

 <RowDefinition Height="0.54*"/>

 <RowDefinition Height="0.46*"/>

 </Grid.RowDefinitions>

 <Grid HorizontalAlignment="Stretch" Margin="0,0,0,2" VerticalAlignment="Stretch" Grid.RowSpan="1" d:IsLocked="True">

 <Grid.ColumnDefinitions>

 <ColumnDefinition Width="0.4*"/>

 <ColumnDefinition Width="0.4*"/>

 <ColumnDefinition Width="0.2*"/>

 </Grid.ColumnDefinitions>

 <Grid.RowDefinitions>

 <RowDefinition Height="0.25*"/>

 <RowDefinition Height="0.25*"/>

 <RowDefinition Height="0.25*"/>

 <RowDefinition Height="0.25*"/>

 </Grid.RowDefinitions>

 <TextBlock Margin="8,8,8,8" x:Name="lblEmpno" Text="Empno:" TextWrapping="Wrap" Grid.RowSpan="2"/>

 <TextBlock Margin="8,8,8,8" Text="Ename:" TextWrapping="Wrap" Height="23.796" x:Name="lblEname" VerticalAlignment="Stretch" Grid.Row="1" />

 <TextBlock Margin="8,8,8,8" Text="Sal:" TextWrapping="Wrap" Height="23.796" x:Name="lblSal" VerticalAlignment="Stretch" Grid.Row="2" />

 <TextBlock Margin="8,8,8,8" Text="Deptno:" TextWrapping="Wrap" Height="23.796" x:Name="lblDeptno" VerticalAlignment="Stretch" Grid.Row="3" />

 <TextBox Margin="8,8,8,8" Grid.Column="1" Text="{Binding Empno, Mode=TwoWay }" TextWrapping="Wrap" x:Name="txtEmpno" Grid.RowSpan="1"/>

 <TextBox Margin="8,8,8,8" Text="{Binding Ename, Mode=TwoWay }" TextWrapping="Wrap" Height="23.796" VerticalAlignment="Stretch" Grid.Column="1" Grid.Row="1" x:Name="txtEname"/>

 <TextBox Margin="8,8,8,8" Text="{Binding Sal, Mode=TwoWay }" TextWrapping="Wrap" Height="23.796" VerticalAlignment="Stretch" Grid.Column="1" Grid.Row="2" x:Name="txtSal"/>

 <TextBox Margin="8,8,8,8" Text="{Binding Deptno, Mode=TwoWay }" TextWrapping="Wrap" Height="23.796" VerticalAlignment="Stretch" Grid.Column="1" Grid.Row="3" x:Name="txtDeptno"/>

 <Button HorizontalAlignment="Stretch" Margin="8,8,8,8" VerticalAlignment="Stretch" Grid.Column="2" Content="Search" x:Name="btnSearch" Grid.RowSpan="1"/>

 </Grid>

 <Grid Margin="0,8,4,54" Height="76" Width="396" Grid.Row="1" d:IsLocked="True">

 <Grid.RowDefinitions>

 <RowDefinition Height="0.50*"/>

 <RowDefinition Height="0.50*"/>

 </Grid.RowDefinitions>

 <Grid.ColumnDefinitions>

 <ColumnDefinition Width="0.25*"/>

 <ColumnDefinition Width="0.25*"/>

 <ColumnDefinition Width="0.25*"/>

 <ColumnDefinition Width="0.25*"/>

 </Grid.ColumnDefinitions>

 <Button HorizontalAlignment="Stretch" Margin="17,6,17,8" VerticalAlignment="Stretch" Content="Clear" x:Name="btnClear"/>

 <Button HorizontalAlignment="Stretch" Margin="17,6,17,8" VerticalAlignment="Stretch" Content="Add" x:Name="btnAdd" Grid.Column="1"/>

 <Button HorizontalAlignment="Stretch" Margin="17,6,17,8" VerticalAlignment="Stretch" Content="Update" x:Name="btnUpdate" Grid.Column="2"/>

 <Button HorizontalAlignment="Stretch" Margin="17,6,17,8" VerticalAlignment="Stretch" Content="Delete" x:Name="btnDelete" Grid.Column="3"/>

 <TextBlock Margin="18,8,17,8" Grid.ColumnSpan="4" Grid.Row="1" Text="" TextWrapping="Wrap" x:Name="lblMsg" Foreground="#FF030557"/>

 </Grid>

 </Grid>

</UserControl>

Next: Developing a Silverlight 2.0 page to demonstrate CRUD functionality: code behind >>
 

More Windows Scripting Articles
More By Jagadish Chaterjee

Comments On: Database operations using Silverlight 2.0 WCF and LINQ to SQL

· Hai,This is my next in series focusing on development using Silverlight 2.0, WCF...    · Excellent Article. But is it the best solution or there are any other solutions as...   >>> Post your comment now!