Exploring Asp.net, Silverlight,c#,SQL Server,PHP: Silverlight

Showing posts with label Silverlight. Show all posts

Wednesday, 2 November 2011

Calling javascript function from silverlight

Introduction

When working with Silverlight, we are working with managed code (C#, VB). Sometimes, we need to callback to HTML page from managed code.
In this article, we walkthrough how to call managed code from JavaScript and call JavaScript function from managed code.

Background

To call JavaScript function from Silverlight, HtmlPage class of System.Windows.Browser namespace is used to allow the user to access and manipulate browser DOM (Document Object Model).
ScriptableMemberAtrribute class indicates that method or property is accessible for JavaScript caller.
To permit user to access method of Silverlight from JavaScript, you have to set [ScriptableMember] attribute to that method.

Using the Code

Let's start step by step including source to demonstrate how to communication between JavaScript and Silverlight.

First we start with Calling JavaScript function from Silverlight

Step 1: First, create one class in a Silverlight project, which describes method to call from JavaScript.

Step 2: Switch to Web project and open HTML page.

Step 3: Create Method in HTML page called from Silverlight

//.js file

function alertText(text) {

alert(text);

}
function sendText() {

return "Hi from Javascript!";

}

Step 4: In User Control, create Button to call JavaScript function.

//page.xmal

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

<Grid.RowDefinitions>

<RowDefinition Height="50"></RowDefinition>

<RowDefinition Height="50"></RowDefinition>

</Grid.RowDefinitions>

<Grid.ColumnDefinitions>

<ColumnDefinition Width="200"></ColumnDefinition>

<ColumnDefinition Width="200"></ColumnDefinition>

</Grid.ColumnDefinitions>

<Button x:Name="btnFireJavascript" Grid.Column="0" Click="btnFireJavascript_Click" Width="100" Height="30" Content="Send Data!"></Button>

<Button x:Name="btnReceiveJavascript" Click="btnReceiveJavascript_Click" Grid.Column="1" Width="100" Height="30" Content="Receive Data!"></Button>

<TextBox x:Name="txtReturnData" Height="30" Width="150" Grid.Row="1" Grid.ColumnSpan="2"></TextBox>

</Grid>

//page.xaml.cs

private void btnFireJavascript_Click(object sender, RoutedEventArgs e)
{
HtmlPage.Window.Invoke("alertText", new string[] { "Hi!" });
}
private void btnReceiveJavascript_Click(object sender, RoutedEventArgs e)
{
string obj = HtmlPage.Window.Invoke("sendText", null) as string;
txtReturnData.Text = obj;
}

By clicking on button, we need to invoke JavaScript function by using System.Windows.Browser.HtmlPage.Window.Invoke method. This method will call JavaScript "sendText" method will return the entered text disyplay the "alertText" method with "From Silverlight" as alert messagebox.In the next step, write method in HTML page of Web project has XAP file as a Object parameter.
Step 5: Drag the reference of the js file to Web project

//silverlighttestpage.aspx drag reference

<script type="text/javascript" src="MyFunctions.js" ></script>

This is just a simple demo example, you can also use Silverlight property from JavaScript as well as JavaScript member from Silverlight.

Please put he comments.......

Wednesday, 13 April 2011

silverlight life cycle

Remember that Silverlight is running on the client, not on the server as normal ASP.NET pages.. there is no such as Page Life Cycle in Silverlight.. but there are some events that will be executed on the client side in a specific order.

1) First the App constructor in the App.xaml file.

2) The App's Applicaiton_Startup event which will be executed every time you open your Silverlight app

3) The Main page's constructor.. It will be the constructor of the page assigned to the RootVisual properly within the App's Application_Satrup event.

4) InitializeCompnent, only to make sure the components are singed to variables so you can use them. I hope this one will be removed in the future and be handled elsewhere.

5) If you have hooked up to the Loaded event within the Main Page Constructor, that event will then be executed, same with the rest event listen in the order they will be executed if you have hooked up to them.

6) Then the SizeChanged event

7) Then the LayoutUpdated event

8) Then GotFocus if you mark the Silverlight app.

If you navigate from your Silverlight app or close the Browser the App's Application_Exit event will be executed.

As you may figure out, there is no Life Cycle.. so what you can do is to get your default data and bind it to control within the constructor or even better (regarding to me, based on what you should do), in the Loaded event.

If you have a button control on the Silverlight app and press it, there will never we a post back, back to the server. The click event will just simply be fired of on the client-side, it's where the code is executed.. To get data from a server, you can for example use a WCF service, Web Service, WebClient, .NET RIA Services etc.. they will make the call to the server from the client side for you.

Building apps with Silverlight, is more or less similar way of building a Desktop apps, for example WinForms or WPF apps, remember ASP.NET is stateless and everything is executed and handled on the server-side, Silverlight is not stateless and everything that is executed is executed by default on the client-side, only when you make call to the server, code on the server-side will be executed. So no refresh, no reloading of pages, no page life cycle, ViewState, just a beautiful rich client that holds state ;)

Here are two blog posts on my blog that can be of interest, it's regarding states and also Architecture

http://weblogs.asp.net/fredriknormen/archive/2009/08/18/different-ways-to-keep-state-when-building-ria-with-silverlight.aspx

http://weblogs.asp.net/fredriknormen/archive/2009/04/19/ria-architecture-with-silverlight-in-mind.aspx

Tuesday, 22 February 2011

grid with checkbox column in silverlight

/////////////xaml code./////////////////////////////////
<data:DataGrid x:Name="dgPerson" Margin="8" IsReadOnly="True"
                   LoadingRow="dgPerson_LoadingRow" AutoGenerateColumns="False" Width="425" >
                            <data:DataGrid.Columns>
                                <data:DataGridTemplateColumn Width="80" >
                                    <data:DataGridTemplateColumn.CellTemplate>
                                        <DataTemplate>
                                            <CheckBox x:Name="chkPerson" Click="chkPerson_Click"
                                      VerticalAlignment="Center" IsChecked="false" HorizontalAlignment="Center" HorizontalContentAlignment="Center"/>
                                        </DataTemplate>
                                    </data:DataGridTemplateColumn.CellTemplate>
                                </data:DataGridTemplateColumn>
                                <data:DataGridTextColumn Header="Fee Type" Binding="{Binding Residualfee}" MinWidth="120" Width="SizeToCells" CanUserReorder="True" CanUserSort="True"/>
                                <data:DataGridTemplateColumn Width="80" Header="Fee" >
                                    <data:DataGridTemplateColumn.CellTemplate>
                                        <DataTemplate>
                                            <TextBox Width="120" Height="30" Name="feeamount" Text="{Binding FeeAmount,Mode=TwoWay}"
                                                     ></TextBox>
                                        </DataTemplate>
                                    </data:DataGridTemplateColumn.CellTemplate>
                                </data:DataGridTemplateColumn>
                            </data:DataGrid.Columns>
                        </data:DataGrid>
                        <data:DataPager x:Name="dataPager1" Width="425" Margin="0,-10,0,0"
                                    Source="{Binding Path=ItemsSource,ElementName=dgPerson}"
                        PageSize="2"    DisplayMode="FirstLastPreviousNext" ></data:DataPager>

//////////////////////////public var////////////////////
//List for Original List of Facilitie
        ObservableCollection<AssignFecilitieToProvision> myList;

        //List for selected Facilitie
        ObservableCollection<AssignFecilitieToProvision> personList = new ObservableCollection<AssignFecilitieToProvision>();
////////////////////////////////chk _clik////////////////////
CheckBox chk = sender as CheckBox;

            bool check = chk.IsChecked.Value;
            var obj = dgPerson.SelectedItem as AssignFecilitieToProvision;

            Facilitie p = chk.DataContext as Facilitie;
            if (check)
            {
                if (!personList.Contains(obj))
                    personList.Add(obj);

            }
            else
            {
                personList.Remove(obj);
            }
////////////////save button////////////
foreach (var item in personList)
            {
///////////do insert
}

Friday, 18 February 2011

Telerik radgridview in silverlight

xmlns:telerik="http://schemas.telerik.com/2008/xaml/presentation"

<telerik:RadGridView x:Name="RadGridView1" ScrollViewer.VerticalScrollBarVisibility="Auto" ScrollViewer.HorizontalScrollBarVisibility="Auto" Loaded="RadGridView1_Loaded" AutoGenerateColumns="False" RowDetailsVisibilityMode="VisibleWhenSelected" CanUserFreezeColumns="False">
                            <telerik:RadGridView.Columns>
                                
                                
                                <telerik:GridViewDataColumn Header="Provision Name" Width="200" DataMemberBinding="{Binding Provision, Mode=TwoWay}" >
                                    <telerik:GridViewDataColumn.CellTemplate>
                                        <DataTemplate>
                                            <TextBlock Text="{Binding Provision}" />
                                        </DataTemplate>
                                    </telerik:GridViewDataColumn.CellTemplate>
                                    <telerik:GridViewDataColumn.CellEditTemplate>
                                        <DataTemplate>
                                            <TextBox x:Name="TxtProvisionnames" Text="{Binding Provision}" SelectionChanged="TxtProvisionnames_SelectionChanged"></TextBox>
                                        </DataTemplate>
                                    </telerik:GridViewDataColumn.CellEditTemplate>

                                </telerik:GridViewDataColumn>

                                <telerik:GridViewDataColumn Header="ResidualFee Name" Width="200" DataMemberBinding="{Binding Residualfee, Mode=TwoWay}" >
                                    <telerik:GridViewDataColumn.CellTemplate>
                                        <DataTemplate>
                                            <TextBlock Text="{Binding Residualfee}" />
                                        </DataTemplate>
                                    </telerik:GridViewDataColumn.CellTemplate>
                                    <telerik:GridViewDataColumn.CellEditTemplate>
                                        <DataTemplate>
                                            <TextBox x:Name="TxtResidualfeenames" Text="{Binding Residualfee}" SelectionChanged="TxtResidualfeenames_SelectionChanged"></TextBox>
                                        </DataTemplate>
                                    </telerik:GridViewDataColumn.CellEditTemplate>

                                </telerik:GridViewDataColumn>
                                

                                <telerik:GridViewColumn Width="150">
                                    <telerik:GridViewColumn.CellTemplate>
                                        <DataTemplate x:Name="dtDelete">
                                            
                                            <HyperlinkButton x:Name="hypDelete" Content="Delete" Tag="{Binding Slno}"
                                                FontWeight="Normal" Click="hypDelete_Click"></HyperlinkButton>
                                        </DataTemplate>
                                    </telerik:GridViewColumn.CellTemplate>
                                </telerik:GridViewColumn>

                            </telerik:RadGridView.Columns>

                        </telerik:RadGridView>
                        <sdk:DataPager x:Name="dataPager"
                                    Source="{Binding Path=ItemsSource,ElementName=RadGridView1}"
                        PageSize="6"    DisplayMode="FirstLastPreviousNext" ></sdk:DataPager>

Wednesday, 9 February 2011

applying styles for ag menus in silverlight

Pages