Category Archives: Upload

Accessing Database from Silverlight

Hi All,

I am working on Silverlight 2 Beta 2. I ma trying to bind the data to a DataGrid from the DB using LINQ. When I search in the net all articles are talking about binding the data using WCF Service only.

Without WCF we cannot bind the Data?

 I want to design a DataGrid like below


___________________________________________________
|               |                |               Number of                               |
|               |                |___________________________________|
|Column1  |Column 2 |SubColumn1|SubColumn2|SubColumn3|
|________|________ |__________|__________|____________|
| 1          |  a          | as            | fg             | gh            |
| 2          |  b          | sd            | fg             | fgh           |
| 3          |  c          | df             | fg             | fgf           |
________________________________________________

Total     | Total of this Col | same | same...

Let me know

Thanks

Anandraj.A.

You have only 2 method to bind grid in the silver light 1). WCF and 2). Web service (asmx).
1. Create Interface for Datagrid(classes, methods)
2. Create User Control as a Label
3. You have to design a datagrid as your wish by the user control or any.
4. Place table-data into the Label-User-Control through WCF

Note: Dropdown also possible by User Control


 Hi Anandraj

it is a little tricky at best to get databinding in silverlight,  take a look at these videos should help. ado.net data services made life a little easier (but not much) seems to be the way to go.but im not sure if it works with beta, any reason you are using beta?

http://www.microsoft.com/uk/msdn/screencasts/screencast/308/adonet-data-services-a-basic-silverlight-client.aspx

Im not sure about doing it with silverlight 2 beta either?, I know the datagrid changed at some point from beta to live (i think anyway) so you may hit a problem with that.

Hi anand,

WCF is the most suitable way to bind the data in Silverlight applications. We can use LINQ TO SQL classes to create the data layer mapped over SQL Server tables. Further by creating Silverlight-enabled-WebService we can access above created LINQ classes to access the data and fetching to Silverlight application.

First create a silverlight application.

Secondly,

Now that you have created the Silverlight 3 Application, we would add a LINQ to SQL file that is *.dbml .

LinqToSQLSilverlight2.gif


Thirdly,

To communicate with LINQ to SQL we need to have a service that client can call at any time.

Add Silverlight enabled WCF Service to the Web Project.

LinqToSQLSilverlight7.gif


In the Service.svc.cs add methods as per your requirement.

I have written two methods such as:


#region [GetAllEmployees]


        [OperationContract]
        List<vw_mst_EmployeeDetail> GetAllEmployees()
        {
            using (EmployeeDBDataContext context = new EmployeeDBDataContext())
            {
                var result = from emp in context.vw_mst_EmployeeDetails
                             select emp;


                return result.ToList();
            }
        }


        #endregion


        #region [GetEmployeesByFirstName]


        [OperationContract]
        List<vw_mst_EmployeeDetail> GetEmployeesByFirstName(string firstName)
        {
            using (EmployeeDBDataContext context = new EmployeeDBDataContext())
            {
                var result = from emp in context.vw_mst_EmployeeDetails
                             where emp.FirstName.StartsWith(firstName)
                             select emp;


                return result.ToList();
            }
        }


        #endregion


Fourthly,

After writing the service build the project and get this service's reference in Silverlight 3 Project as shown in below figure.

LinqToSQLSilverlight10.gif


<div style="position: absolute; left: -10000px; top: 926px; width: 1px; height: 1px; overflow-x: hidden; overflow-y: hidden;" id="_mcePaste">        #region [GetAllEmployees]</div> <div style="position: absolute; left: -10000px; top: 926px; width: 1px; height: 1px; overflow-x: hidden; overflow-y: hidden;" id="_mcePaste"></div> <div style="position: absolute; left: -10000px; top: 926px; width: 1px; height: 1px; overflow-x: hidden; overflow-y: hidden;" id="_mcePaste">        [OperationContract]</div> <div style="position: absolute; left: -10000px; top: 926px; width: 1px; height: 1px; overflow-x: hidden; overflow-y: hidden;" id="_mcePaste">        List<vw_mst_EmployeeDetail> GetAllEmployees()</div> <div style="position: absolute; left: -10000px; top: 926px; width: 1px; height: 1px; overflow-x: hidden; overflow-y: hidden;" id="_mcePaste">        {</div> <div style="position: absolute; left: -10000px; top: 926px; width: 1px; height: 1px; overflow-x: hidden; overflow-y: hidden;" id="_mcePaste">            using (EmployeeDBDataContext context = new EmployeeDBDataContext())</div> <div style="position: absolute; left: -10000px; top: 926px; width: 1px; height: 1px; overflow-x: hidden; overflow-y: hidden;" id="_mcePaste">            {</div> <div style="position: absolute; left: -10000px; top: 926px; width: 1px; height: 1px; overflow-x: hidden; overflow-y: hidden;" id="_mcePaste">                var result = from emp in context.vw_mst_EmployeeDetails</div> <div style="position: absolute; left: -10000px; top: 926px; width: 1px; height: 1px; overflow-x: hidden; overflow-y: hidden;" id="_mcePaste">                             select emp;</div> <div style="position: absolute; left: -10000px; top: 926px; width: 1px; height: 1px; overflow-x: hidden; overflow-y: hidden;" id="_mcePaste"></div> <div style="position: absolute; left: -10000px; top: 926px; width: 1px; height: 1px; overflow-x: hidden; overflow-y: hidden;" id="_mcePaste">                return result.ToList();</div> <div style="position: absolute; left: -10000px; top: 926px; width: 1px; height: 1px; overflow-x: hidden; overflow-y: hidden;" id="_mcePaste">            }</div> <div style="position: absolute; left: -10000px; top: 926px; width: 1px; height: 1px; overflow-x: hidden; overflow-y: hidden;" id="_mcePaste">        }</div> <div style="position: absolute; left: -10000px; top: 926px; width: 1px; height: 1px; overflow-x: hidden; overflow-y: hidden;" id="_mcePaste"></div> <div style="position: absolute; left: -10000px; top: 926px; width: 1px; height: 1px; overflow-x: hidden; overflow-y: hidden;" id="_mcePaste">        #endregion</div> <div style="position: absolute; left: -10000px; top: 926px; width: 1px; height: 1px; overflow-x: hidden; overflow-y: hidden;" id="_mcePaste"></div> <div style="position: absolute; left: -10000px; top: 926px; width: 1px; height: 1px; overflow-x: hidden; overflow-y: hidden;" id="_mcePaste">        #region [GetEmployeesByFirstName]</div> <div style="position: absolute; left: -10000px; top: 926px; width: 1px; height: 1px; overflow-x: hidden; overflow-y: hidden;" id="_mcePaste"></div> <div style="position: absolute; left: -10000px; top: 926px; width: 1px; height: 1px; overflow-x: hidden; overflow-y: hidden;" id="_mcePaste">        [OperationContract]</div> <div style="position: absolute; left: -10000px; top: 926px; width: 1px; height: 1px; overflow-x: hidden; overflow-y: hidden;" id="_mcePaste">        List<vw_mst_EmployeeDetail> GetEmployeesByFirstName(string firstName)</div> <div style="position: absolute; left: -10000px; top: 926px; width: 1px; height: 1px; overflow-x: hidden; overflow-y: hidden;" id="_mcePaste">        {</div> <div style="position: absolute; left: -10000px; top: 926px; width: 1px; height: 1px; overflow-x: hidden; overflow-y: hidden;" id="_mcePaste">            using (EmployeeDBDataContext context = new EmployeeDBDataContext())</div> <div style="position: absolute; left: -10000px; top: 926px; width: 1px; height: 1px; overflow-x: hidden; overflow-y: hidden;" id="_mcePaste">            {</div> <div style="position: absolute; left: -10000px; top: 926px; width: 1px; height: 1px; overflow-x: hidden; overflow-y: hidden;" id="_mcePaste">                var result = from emp in context.vw_mst_EmployeeDetails</div> <div style="position: absolute; left: -10000px; top: 926px; width: 1px; height: 1px; overflow-x: hidden; overflow-y: hidden;" id="_mcePaste">                             where emp.FirstName.StartsWith(firstName)</div> <div style="position: absolute; left: -10000px; top: 926px; width: 1px; height: 1px; overflow-x: hidden; overflow-y: hidden;" id="_mcePaste">                             select emp;</div> <div style="position: absolute; left: -10000px; top: 926px; width: 1px; height: 1px; overflow-x: hidden; overflow-y: hidden;" id="_mcePaste"></div> <div style="position: absolute; left: -10000px; top: 926px; width: 1px; height: 1px; overflow-x: hidden; overflow-y: hidden;" id="_mcePaste">                return result.ToList();</div> <div style="position: absolute; left: -10000px; top: 926px; width: 1px; height: 1px; overflow-x: hidden; overflow-y: hidden;" id="_mcePaste">            }</div> <div style="position: absolute; left: -10000px; top: 926px; width: 1px; height: 1px; overflow-x: hidden; overflow-y: hidden;" id="_mcePaste">        }</div> <div style="position: absolute; left: -10000px; top: 926px; width: 1px; height: 1px; overflow-x: hidden; overflow-y: hidden;" id="_mcePaste"></div> <div style="position: absolute; left: -10000px; top: 926px; width: 1px; height: 1px; overflow-x: hidden; overflow-y: hidden;" id="_mcePaste">        #endregion</div>

After you add the service it would create the ServiceReferences.ClientConfig file.

Now it's time to design our Silverlight UI in Blend, I have gone for a simple approach, where simple buttons and textbox would help us getting the result which would be displayed in DataGrid.


LinqToSQLSilverlight11.gif


XAML for your reference is as follows - 


<UserControl

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

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

    xmlns:d="http://schemas.microsoft.com/expression/blend/2008" xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" 

    mc:Ignorable="d" xmlns:data="clr-namespace:System.Windows.Controls;assembly=System.Windows.Controls.Data" x:Class="Mazeweb.Silverlight.MainPage"

    d:DesignWidth="640" d:DesignHeight="480">

    <Grid x:Name="LayoutRoot">

     <Grid.Background>

     <LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0">

     <GradientStop Color="#FFF2F2F8" Offset="0.948"/>

     <GradientStop Color="#FF5B99F2" Offset="0.665"/>

     </LinearGradientBrush>

     </Grid.Background>

     <Grid.RowDefinitions>

     <RowDefinition Height="0.106*"/>

     <RowDefinition Height="0.056*"/>

     <RowDefinition Height="0.838*"/>

     </Grid.RowDefinitions>

        <TextBlock HorizontalAlignment="Center" Text="LINQ TO SQL &amp; SILVERLIGHT 3" 

             TextWrapping="Wrap" FontSize="21.333" TextDecorations="Underline" Margin="0,3,0,19" d:LayoutOverrides="Height"/>

        <StackPanel Margin="0" Height="80" VerticalAlignment="Center" Orientation="Horizontal" 

                    HorizontalAlignment="Center" Grid.Row="1">

            <Button x:Name="btnAll" Height="25" Content="Show All" Click="btnAll_Click" VerticalAlignment="Center" Margin="0,0,0,8" Width="109" />

            <Rectangle Height="25" Width="10"/>

            <TextBox x:Name="txtName" Height="25" TextWrapping="Wrap" Width="164" VerticalAlignment="Center"/>

            <Rectangle Height="25" Width="10"/>

            <Button x:Name="btnSubmit" Height="25" Content="Search" Click="btnSubmit_Click" VerticalAlignment="Center" Margin="0,0,0,8" Width="109" />

        </StackPanel>

        <data:DataGrid x:Name="dgResults" Margin="8,10,8,89" Grid.Row="2" IsReadOnly="True" 

                       AutoGenerateColumns="False">

            <data:DataGrid.Columns>

                <data:DataGridTextColumn Binding="{Binding ID}" Header="ID"></data:DataGridTextColumn>

                <data:DataGridTextColumn Binding="{Binding FirstName}" Header="First Name"></data:DataGridTextColumn>

                <data:DataGridTextColumn Binding="{Binding LastName}" Header="Last Name"></data:DataGridTextColumn>

                <data:DataGridTextColumn Binding="{Binding UserCode}" Header="EmailID"></data:DataGridTextColumn>

                <data:DataGridTextColumn Binding="{Binding DesignationName}" Header="Designation"></data:DataGridTextColumn>

                <data:DataGridTextColumn Binding="{Binding BranchName}" Header="Branch"></data:DataGridTextColumn>

            </data:DataGrid.Columns>

        </data:DataGrid>

    </Grid>

</UserControl>

<div>
</div><div>
</div><div>Finally,</div><div>
</div><div>Now we would write client side code to call the service and display the result.

Following code is for Show All Button Click and displaying the result.
</div><div>
</div><div><div>        private void btnSubmit_Click(object sender, RoutedEventArgs e)</div><div>        {</div><div>            ServiceClient clientService = new ServiceClient();</div><div>            clientService.GetEmployeesByFirstNameCompleted += new EventHandler<GetEmployeesByFirstNameCompletedEventArgs>(clientService_GetEmployeesByFirstNameCompleted);</div><div>            clientService.GetEmployeesByFirstNameAsync(txtName.Text);</div><div>        }</div><div>
</div><div>        void clientService_GetEmployeesByFirstNameCompleted(object sender, GetEmployeesByFirstNameCompletedEventArgs e)</div><div>        {</div><div>            dgResults.ItemsSource = e.Result;</div><div>        }</div><div>
</div><div>        private void btnAll_Click(object sender, RoutedEventArgs e)</div><div>        {</div><div>            ServiceClient clientService = new ServiceClient();</div><div>            clientService.GetAllEmployeesCompleted += new EventHandler<GetAllEmployeesCompletedEventArgs>(clientService_GetAllEmployeesCompleted);</div><div>            clientService.GetAllEmployeesAsync();</div><div>        }</div><div>
</div><div>        void clientService_GetAllEmployeesCompleted(object sender, GetAllEmployeesCompletedEventArgs e)</div><div>        {</div><div>            dgResults.ItemsSource = e.Result;</div><div>        }</div><div>
</div><div>
</div><div>Now, Finally you can test your application successfully running.</div>
</div>


Hope this POST helps.


I wrote an article about connecting a datagrid to a silverlight project here. Perhaps it will be useful.

Hi Dear

You have three option

1: Linq to Sql server

2. WCF Service

3. Web Service

[RESOLVED] Do TabPanels in a TabContainer have click events etc

Hi,

I have a TabContainer with 2 TabPanels. In TabPanel1 I have a AsyncFileUpload control.

This AsyncFileUpload must be Visible="false" as I have ActiveTabIndex="1" in the TabContainer. If not, there will be a compile error when trying to access the Page.

Now when I click the Tab of TabPanel1, this AsyncFileUpload controls needs to be Visible="true".

 

I am not sure how I can achieve this. Has TabPanels some kind of click event etc?

<cc1:TabContainer ID="TabContainer1" runat="server" ActiveTabIndex="1"
                        CssClass="fancy" Font-Names="Arial" Width="787px">
<cc1:TabPanel runat="server" ID="TabPanel1" Height="100%" HeaderText="TabPanel1" >
    <HeaderTemplate>
        Tab1
    </HeaderTemplate>
<ContentTemplate>
<cc1:AsyncFileUpload ID="AsyncFileUpload1" runat="server"
                        FailedValidation="False" OnClientUploadComplete="UploadComplete"
                        OnClientUploadError="uploadError" OnClientUploadStarted="StartUpload"
                        UploaderStyle="Modern"
                        UploadingBackColor="#66CCFF" Visible="False" Width="320px" />
</ContentTemplate>
</cc1:TabPanel>








<cc1:TabPanel runat="server" ID="TabPanel2" Height="100%" HeaderText="TabPanel2" >
<ContentTemplate>
    <HeaderTemplate>
        Tab2
    </HeaderTemplate>
<ContentTemplate>
</ContentTemplate>
</cc1:TabPanel>
</cc1:TabContainer>


 

Try this one <cc1:TabContainer onactivetabchanged="tabProductInfo_ActiveTabChanged" ID="tabProductInfo" runat="server" ActiveTabIndex="0" Width="100%" ScrollBars="Auto" >

Thank you, it seems interesting. I have to ask a bit more.

This should be a C# event as I understand: onactivetabchanged="tabProductInfo_ActiveTabChanged"

 

If it is, how would that event look like to know I am setting it up correctly?

Thank you! 

Hi,

I am not sure but I beleive there must be a C# event for this onactivetabchanged but are not sure how to set that event handler up in C#?

<cc1:TabContainer onactivetabchanged="tabProductInfo_ActiveTabChanged" ID="tabProductInfo" runat="server" ActiveTabIndex="0" Width="100%" ScrollBars="Auto" >


 

You can just add this event to your code behind,  

        protected void tabProductInfo_ActiveTabChanged( object sender, EventArgs e )
        {

        }
 
or
 
If you are lazy like me, get the tab control in your properties explorer in the designer, then  click the little lightening bolt icon at the top of the properties explorer.
This will then display all the server events for the control.  Next just double click the empty input box next to the event you need, in your case ActiveTabChanged.  
VS should then create and name the event for you and show display it in the codebehind page.  This is very handy for any server control event you want to create.
 

Thank you, then I understand how you ment.

I think I have set it up as it should be then.

It seems to work out fine.

 

Thank you!

<cc1:TabContainer id="tabconLandTransPlan" runat="server" Width="806" onactivetabchanged="tabProductInfo_ActiveTabChanged" AutoPostBack="True"
                  ActiveTabIndex="4" CssClass="fancy" Font-Names="Arial" >




    protected void tabProductInfo_ActiveTabChanged(object sender, EventArgs e)
    {
        if (tabconLandTransPlan.ActiveTabIndex == 1)
        {
            AsyncFileUpload1.Visible = true;
            AsyncFileUpload2.Visible = true;
        }
        else
        {
            AsyncFileUpload1.Visible = false;
            AsyncFileUpload2.Visible = false;
        }
    }


 

[RESOLVED] open Dialog Box

 Hi All,

how can I  show open dialog box in asp.net but without using fileupload control,cause I just want to select

the url and assign it to imageurl property of image control to show image before save to database

regards

khalid

To my knowledge there is no way to do that without FileUpload in asp.net....

the options which you are left with is to use ActivX or Silverlight for this kind of requirement....

Thanks.

Hi,

You can see here

An Open File Dialog in JavaScript

Regards

shabir

[RESOLVED] Dispaly image of fileupload control

hi all,

please if could anyone help me in how can I dispaly image on image control after user choose it using fileupload control

Regards

khalid

Hi,

Here is Code and Explaination

Dispaly image of fileupload control


Regards

shabir

There is no proper way of doing this on client side....many browsers have restrictions on this.....and especially without uploading the image....it is not possible to generate clientside preview....it is possible in IE, but not FF....

So what I would suggest is to submit the form asynchronously to server, and then generate the preview....finally when user selects upload, then actually upload the image....

what i mean was....user selects the image...send the image to the server, but dont save it....then display image in the image control using Bitmap....then when user selects upload, then save the image on the server....

Thanks.

Shell32 problem with thumbnails

GOAL: Showing thumbnail of uploaded media files (pictures, videos etc..)

I tried to extract thumbnails from thumbnails.db using Microsoft Shell Controls And Automation (Interop.Shell32.dll). I followed  http://www.vbaccelerator.com/home/net/code/libraries/shell_projects/Thumbnail_Extraction/article.asp .

PROBLEM: I tried it in WPF application and it worked. Then i used the same code in ASP.NET WebForms website and it works for pictures but doest not work for videos. I also tried the same in clean console application but it doesn't work as well. But in wpf it works! the same assembly. Assembly is from Window 7, but neither WinXp's Interop.Shell32.dll works for videos in websites.

It throws an exception NotImplementedException whenn I call IExtractImage.Extract(ref IntPtr phBmpThumbnail);

Can you explain this behaviour?


sample code:http://tsmaestro.aspdotnet.sk/shellthumbnails.zip


Thanks, Daniel