WCF Ria Services(通常称为RIA服务),专门设计让Silverlight应用程序访问数据库,网上有关其示例应用都是基于简单的数据显示,其中MSDN网站上有详细的解决方案介绍,地址http://msdn.microsoft.com/zh-cn/library/ff713719(v=vs.91).aspx,我认为把这个看懂后,你基本上就入门了。

但是由于项目需要,我要把SQL SERVER数据库中以二进制流保存的图片显示到客户端浏览器里,在网上找了很久的资料,都没找到相关的介绍,最后花了不少功夫,终于实现了功能。先看其效果如下:

在数据库中,我们建了一个ImageTable数据库,两列数据ImageId(int)和ImageData(varbinary(MAX)),然后通过下面命令插入初始数据和图片

Use ImageDB;
Go
INSERT INTO ImageTable VALUES (1,(SELECT * FROM OPENROWSET(BULK N'D:\DEC.jpg',SINGLE_BLOB) AS Photo))

  然后新建一个silverlght业务应用程序,添加一个显示此图片的silverlight页,ADO.NET实体数据模型和域服务类,过程可参考前面给出的例子,这里主要说明如何把图片显示出来。

 <navigation:Page xmlns:sdk="http://schemas.microsoft.com/winfx/2006/xaml/presentation/sdk"  x:Class="ImageTestApp.Views.WorkerImage"
            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:local="clr-namespace:ImageTestApp.Views"
            xmlns:navigation="clr-namespace:System.Windows.Controls;assembly=System.Windows.Controls.Navigation"
            d:DesignWidth="
            Title="WorkerImage Page">
     <navigation:Page.Resources>
         <local:DataToImageConverter x:Key="DataToImageConverter"></local:DataToImageConverter>
     </navigation:Page.Resources>
     <Grid x:Name="LayoutRoot">
         <ScrollViewer x:Name="PageScrollViewer" Style="{StaticResource
   PageScrollViewerStyle}" >
             <StackPanel x:Name="ContentStackPanel" Style="{StaticResource ContentStackPanelStyle}">

                 <TextBlock Text="图片" Style="{StaticResource HeaderTextStyle}"/>
                 <sdk:DataGrid AutoGenerateColumns=">

                     <sdk:DataGrid.Columns>
                         <sdk:DataGridTextColumn Header="序号" Binding="{Binding ImageId}" />
                         <sdk:DataGridTemplateColumn Header="图片" CanUserResize="False" >
                             <sdk:DataGridTemplateColumn.CellTemplate>
                                 <DataTemplate>
                                     <StackPanel Orientation="Horizontal" VerticalAlignment="Center">
                                         <!--<TextBox x:Name="imgLogo" Text="{Binding Path=ImageData}" >
                                         </TextBox>-->
                                         <Image x:Name=" Source="{Binding Path=ImageData,Converter={StaticResource DataToImageConverter}}" >
                                         </Image>
                                     </StackPanel>
                                 </DataTemplate>
                             </sdk:DataGridTemplateColumn.CellTemplate>
                         </sdk:DataGridTemplateColumn>
                     </sdk:DataGrid.Columns>

                 </sdk:DataGrid>

             </StackPanel>
         </ScrollViewer>
     </Grid>
 </navigation:Page>

注意,我们在datagrid前两行定义了两列,序号和图片,由于ImageData是二进制流,无法在图片控件上直接显示,所以图片显示一栏还需要个转化器,下面是后台代码。

using System;
using System.Collections.Generic;
using System.Linq;
using System.Net;
using System.Windows;
using System.Windows.Controls;
using System.Windows.Documents;
using System.Windows.Input;
using System.Windows.Media;
using System.Windows.Media.Animation;
using System.Windows.Shapes;
using System.Windows.Navigation;

using System.Windows.Data;
using System.Windows.Media.Imaging;
using System.IO;
using System.Text;

using ImageTestApp.Web;
using System.ServiceModel.DomainServices.Client;

namespace ImageTestApp.Views
{
    public partial class WorkerImage : Page
    {
        OrganizationContext _OrganizationContext = new OrganizationContext();
        public WorkerImage()
        {
            InitializeComponent();

            this.dataGrid1.ItemsSource = _OrganizationContext.ImageTables;
            _OrganizationContext.Load(_OrganizationContext.GetImageTableQuery());

        }

    }

    public class DataToImageConverter : IValueConverter
    {

        public object Convert(object value, Type targetType, object parameter, System.Globalization.CultureInfo culture)
        {

            BitmapImage bi = new BitmapImage();
            bi.SetSource(new MemoryStream((byte[])value));
            Image image = new Image();
            image.Source = bi;
            return bi;  

            //Image image = new Image();
            //image.Source = bi;
            //    return image;

        }

        public object ConvertBack(object value, Type targetType, object parameter, System.Globalization.CultureInfo culture)
        {
            throw new NotImplementedException();
        }

    }
}

由于界面里用的Image控件绑定图片,所以刚开始在转换器里需要返回Image类型数据,但实际上此方法行不通,最后看了Image.Source属性才知道应该返回BitmapImage类型,下面是Image的用法:

<Image Width="200"  Margin="5" Grid.Column="1" Grid.Row="1" >
   <Image.Source>
      <BitmapImage UriSource="sampleImages/bananas.jpg" />
   </Image.Source>
</Image>

通过此转换器,我们就能将接收到的二进制流转换为图片。如果不通过转换,直接利用datagrid的自动显示功能,图片一栏将显示System.Byte[],让人搞不清楚。此项目还需要完成图片上传功能,后面再加上。

其实在调试过程中,我还有点不明白的是   dataGrid1.ItemsSource 一直看不到接收到的数据,但是客户浏览器里确实已经有了已经有了数据库中的每一项列表。

  

Silverlight应用程序中调用WCF Ria Services访问数据库图片的更多相关文章

  1. Silverlight项目笔记1:UI控件与布局、MVVM、数据绑定、await/async、Linq查询、WCF RIA Services、序列化、委托与事件

    最近从技术支持转到开发岗,做Silverlight部分的开发,用的Prism+MVVM,框架由同事搭好,目前做的主要是功能实现,用到了一些东西,侧重于如何使用,总结如下 1.UI控件与布局 常用的主要 ...

  2. Silverlight项目笔记2:.svc处理程序映射缺失导致的WCF RIA Services异常

    在确定代码.编译结果和数据库都正常的情况下,无法从数据库取到数据.错误提示:Sysyem.Net.WebException:远程服务器返回了错误:NotFound,监听发现请求数据库的服务异常,访问相 ...

  3. WCF RIA Services异常

    .svc处理程序映射缺失导致的WCF RIA Services异常 在确定代码.编译结果和数据库都正常的情况下,无法从数据库取到数据.错误提示:Sysyem.Net.WebException:远程服务 ...

  4. WCF RIA Services使用详解(转载)

    理解领域服务和领域操作 本文目录: 3.1 WCF Ria Services简介 3.1.1 什么是WCF Ria Services 3.1.2 WCF Ria Services如何生成客户端代码 3 ...

  5. Native Application 开发详解(直接在程序中调用 ntdll.dll 中的 Native API,有内存小、速度快、安全、API丰富等8大优点)

    文章目录:                   1. 引子: 2. Native Application Demo 展示: 3. Native Application 简介: 4. Native Ap ...

  6. Consuming Hidden WCF RIA Services

    原文 http://codeseekah.com/2013/07/05/consuming-hidden-wcf-ria-services/ A Silverlight application mad ...

  7. iPhone中调用WCF服务

    本文介绍的是跨平台iPhone中调用WCF服务,WCF是由微软发展的一组数据通信的应用程序开发接口,它是.NET框架的一部分,由 .NET Framework 3.0+开始引入 iPhone中调用WC ...

  8. C++程序中调用WebService的实现

    前言 因为最近的项目中需要运用到在MFC程序中调用WebService里面集成好了的函数,所以特意花了一天的时间来研究WebService的构建以及如何在MFC的程序中添加Web引用,进而来实现在C+ ...

  9. 在网页程序或Java程序中调用接口实现短信猫收发短信的解决方案

    方案特点: 在网页程序或Java程序中调用接口实现短信猫收发短信的解决方案,简化软件开发流程,减少各应用系统相同模块的重复开发工作,提高系统稳定性和可靠性. 基于HTTP协议的开发接口 使用特点在网页 ...

随机推荐

  1. qss 实践

    *{ font-size:13px; color:white; font-family:"宋体"; } CallWidget QLineEdit#telEdt { font-siz ...

  2. C#_delegate - Pair<T> & 简单顺序逆序 & 方法委托(在Pair类下)&枚举类型 混搭使用

    using System; using System.Collections.Generic; using System.Linq; using System.Text; using System.T ...

  3. C#_delegate - 调用列表 计算阶乘

    using System; using System.Collections.Generic; using System.Linq; using System.Text; namespace Dele ...

  4. 关于jQuery对象与DOM对象

    今天遇到了关于jQuery对象与dom对象的区分问题.具体如下:对于元素<span id="aa" class="aa">hyz</span& ...

  5. SQL 四种连接:内连接、左外连接、右外连接、全连接--转载

    原文:http://zwdsmileface.iteye.com/blog/2191730 个人理解 内连接(INNER JOIN)(典型的连接运算,使用像   =   或   <>   ...

  6. C语言内存四区

    按照老版操作系统来学习,内存对于程序来讲分四区.分别是 代码区,静态区,栈,堆. 由上面程序执行的结果可知: 貌似结果就是 静态代码堆栈 静态区存放的是程序中所有静态变量和常量的值.静态区的大小是程序 ...

  7. javascript数据结构和算法[转]

    字符串表示的数组 join() 和 toString() 函数返回数组的字符串表示.这两个函数通过将数组中的元素用逗号分隔符分割,返回字符串数组表示. 这里有个例子: var names = [&qu ...

  8. Unity3D之Ugui 制作弹框

    创建一个UI控件. 这里通过按钮的点击取控制弹框的显示或者隐藏.给按钮Button绑定一个脚本. 将Panel初始化设置为隐藏.就可以实现了. using UnityEngine; using Sys ...

  9. 微信平台(一)--获取access_token

    事前思路准备 说在前面:如果要获取access_token,那么你需要appid,appsecret;另外需要post请求连接https://api.weixin.qq.com/cgi-bin/tok ...

  10. xadmin学习笔记(一)——编程准备

    前言 xadmin是GitHub上的开源项目,它是Django admin的超强升级版,提供了强大的插件系统,丰富的内置功能,以及无与伦比的UI主题,使管理系统的实现变得异常简单.详情请参见官方网址. ...