65.9K
CodeProject 正在变化。 阅读更多。
Home

DB to Browser - 简单的 Silverlight 概述

J van Rooyen
starIconstarIconstarIconstarIcon
emptyStarIcon
starIcon

4.20/5 (3投票s)

2013 年 4 月 15 日

CPOL

5分钟阅读

viewsIcon

19038

downloadIcon

373

一个简单的文章：从 DB 到浏览器使用 Silverlight。

引言

本文旨在轻松清晰地引导开发人员完成通过 WCF Web 服务访问数据库中的数据，并将数据显示在 Silverlight 应用程序的数据网格中的过程。

本文假定读者对 C# 语言、ADO.NET 以及 Web 服务和 Silverlight 的概念有一定了解，因此不会对其进行深入分析。

开发环境

  • MS Visual Studio 2010 (专业版)
  • MS SQL Server 2012 (Express 版)
  • Dot Net Framework 4

Silverlight 应用程序概述

典型的 Silverlight 项目包含 3 部分

  1. 数据库
  2. 服务
  3. 应用程序

在本文中，我们将概述每个部分以及它们如何相互作用。

数据库

数据库通常与托管服务的服务器位于同一台服务器或同一网络上。它通常是 MS-SQL 服务器，但 Oracle 和 MySQL 是常见的替代方案。

服务

服务是应用程序的 ASP 托管“家”。它是应用程序与服务器的链接。服务通过网络或互联网以预定义的、预共享的蓝图或对象形式发送数据。这些对象或类可以是单个的，也可以是多个单个的集合，并且可以包含原生类型。在开发过程中，这些预定义类型或对象作为蓝图暴露给应用程序。完成后，应用程序和服务就拥有了一个通信标准或协议，两者都能理解和识别，因此可以通过 Web 服务无缝通信。

服务可以访问服务器上的数据库，因此是应用程序与数据库之间所有通信的入口和出口。

让我们看一下典型服务的布局。下面仅描述相关部分

模型

查看模型如何与表结构相关联。如果我们有更多表，例如发票、用户等，我们也会通过添加新的文件夹和类来反映它们，以对应这些表。

ServiceRoutines.svc

此文件包含我们希望通过 Web 发布或公开的所有例程和函数。由于到目前为止我们只有一个客户端表，因此创建以下方法并通过将它们标记为操作协定来公开它们是正确的做法。（要做到这一点，请在方法前面加上 [OperationContact] 标签）

应用程序

Silverlight 应用程序仅包含 GUI 和其他一些基本功能。应用程序具有服务的蓝图，并通过服务终结点访问服务以发出服务调用。尽管应用程序托管在服务器上，但它会在连接时下载到客户端，然后在客户端浏览器内运行。

让我们看看应用程序方面的基本布局

服务引用

这显示了对项目服务部分的引用。如果步骤正确执行，应自动创建此引用。

如何整合

 

服务是为应用程序提供数据的关键。也就是说，它也是为数据库提供来自 GUI 应用程序的更新数据的关键。

数据库通常位于私有网络上，无法公开访问。另一方面，应用程序在客户端 PC 上运行（与典型网站不同，典型网站在服务器上运行，但在客户端浏览器中显示），并且仅托管在客户端浏览器内（有关此概念的更多信息，请参阅“在浏览器外运行”）。这样做的问题在于，如何将数据从私有数据库通过公共网络传输到应用程序中进行处理和显示。

这就是服务发挥作用的地方。服务在 Web 服务器上运行并托管，并提供一个安全的通道，通过该通道，数据库和应用程序可以进行通信。

从 DB 到服务再到应用程序

确保从数据到服务再到应用程序的统一结构是一个好主意。如果保持这种流程，也容易适应结构的变化。请注意，在上图中，数据库中的结构与服务和应用程序中的结构相似。

一旦在数据库中的表（例如，客户端表）中实现了数据结构，您就可以开始进行服务调用以访问该表及其数据。通常，每个表会有三到四个服务调用，它们通常执行以下功能

  • 获取项目列表
  • 获取单个项目
  • 更新/保存项目
  • 删除项目

这些功能中的每一个都作为方法进行编码，并托管在服务内部，然后通过 WCF 暴露给应用程序。服务调用是通过服务引用实例发出的，这使得从数据库到服务再到应用程序，再回到服务，最后回到数据库的循环得以完成。

典型设计流程

从 DB 到应用程序获取数据的一个简单设计流程是 3 个步骤。

  1. 设计数据结构（数据库和表）

  2. 服务（通常是 Get_Something 和 Save_Something 方法和过程）

  3. 应用程序（利用和消耗服务的 UI）

分步指南

步骤 1： 创建一个新的 **Silverlight 应用程序**项目

*请注意，在上方的截图中，我们配置了应用程序服务端的配置选项

步骤 2： 打开 **解决方案资源管理器**视图

您现在将清楚地看到两个不同的子项目。请注意服务端如何以 .web 扩展结尾。

步骤 3： 右键单击 Web 项目，然后创建一个名为 **Models** 的新文件夹

步骤 4： 右键单击 **Models** 文件夹，然后创建一个名为 **Client** 的新子文件夹

步骤 5： 在 **Client** 文件夹中添加一个名为 **Client.cs** 的新 **类**

public class Client
    {
        public Client()
        {
            clientId = 0;
            companyName = "";
            telephone = "";
            email = "";
        }
 
        private int clientId;
        public int ClientId
        {
            get { return clientId; }
            set { clientId = value; }
        }
 
        private string companyName;
        public string CompanyName
        {
            get { return companyName; }
            set { companyName = value; }
        }
 
        private string telephone;
        public string Telephone
        {
            get { return telephone; }
            set { telephone = value; }
        }
 
        private string email;
        public string Email
        {
            get { return email; }
            set { email = value; }
        }
    }

步骤 6： 在 **Client** 文件夹中添加一个名为 **ClientList.cs** 的新 **类**

    public class ClientList
    {
        public ClientList()
        {
            items = new List<Client>();
            errorMessage = "";
        }
 
        private List<Client> items;
        public List<Client> Items
        {
            get { return items; }
            set { items = value; }
        }
 
        private string errorMessage;
        public string ErrorMessage
        {
            get { return errorMessage; }
            set { errorMessage = value; }
        }
    }

步骤 7： 右键单击 Web 项目，并添加一个 **Silverlight 启用的 WCF 服务**。您可以在 **添加新项**页面下的 **Visual C# \ Silverlight** 中找到它。将服务命名为 **ServiceRoutines.svc**

这应该会在项目中添加一个名为您提供的文档。我们将在其中放置所有公开的服务调用和用于访问数据库的方法。

using System;
using System.Linq;
using System.Runtime.Serialization;
using System.ServiceModel;
using System.ServiceModel.Activation;
 
namespace SL_WCF_ADO.Web
{
    [ServiceContract(Namespace = "")]
    [SilverlightFaultBehavior]
    [AspNetCompatibilityRequirements(RequirementsMode = AspNetCompatibilityRequirementsMode.Allowed)]
    public class ServiceRoutines
    {
        private const string connectionString = "YourSQLConnectionString";
 
        [OperationContract]
        public Models.Client.ClientList GetClientList(int clientId)
        {
            Models.Client.ClientList result = new Models.Client.ClientList();
            string sql = "";
 
            if (clientId == 0)
            {
                sql = "SELECT * FROM Clients";
            }
            else
            {
                sql = "SELECT * FROM Clients WHERE ClientId = " + clientId.ToString();
            }
 
            try
            {
                System.Data.SqlClient.SqlConnection conn = new System.Data.SqlClient.SqlConnection(connectionString);
                System.Data.SqlClient.SqlCommand cmd = new System.Data.SqlClient.SqlCommand(sql, conn);
 
                conn.Open();
 
                System.Data.SqlClient.SqlDataReader sqldr = cmd.ExecuteReader();
 
                while (sqldr.Read())
                {
                    Models.Client.Client item = new Models.Client.Client();
 
                    item = new Models.Client.Client();
                    item.ClientId = (int)sqldr["ClientId"];
                    item.CompanyName = sqldr["CompanyName"].ToString();
                    item.Email = sqldr["Email"].ToString();
                    item.Telephone = sqldr["Telephone"].ToString();
 
                    result.Items.Add(item);
                }
            }
            catch (Exception err)
            {
                result = new Models.Client.ClientList();
                result.ErrorMessage = err.Message;
            }
 
            return result;
        }
 
    }
}

步骤 8： 保存并构建整个解决方案

步骤 9： 右键单击应用程序项目（没有 .web 扩展的那个），然后选择 **添加服务引用**。打开向导后，单击 **发现**，并将其更改为如下所示



*验证是否已在 **Web 引用**文件夹下添加了服务引用

步骤 10： 打开 **MainPage.cs**

步骤 11： 从工具箱添加一个 **DataGrid** 控件，并将其 **AutoGenerateColumns** 属性设置为 **True**

步骤 12： 打开 **MainPage.cs** 代码视图，并编辑页面使其与以下内容相似

    public partial class MainPage : UserControl
    {
        ServiceReference.ServiceRoutinesClient service;
        ServiceReference.ClientList result;
 
        public MainPage()
        {
            InitializeComponent();
            Loaded += new RoutedEventHandler(MainPage_Loaded);
            
            service = new ServiceReference.ServiceRoutinesClient();
            service.GetClientListCompleted += new EventHandler<ServiceReference.GetClientListCompletedEventArgs>(service_GetClientListCompleted);
        }
 
        void MainPage_Loaded(object sender, RoutedEventArgs e)
        {
            service.GetClientListAsync(0);
        }
 
        void service_GetClientListCompleted(object sender, ServiceReference.GetClientListCompletedEventArgs e)
        {
            if (!String.IsNullOrEmpty(e.Result.ErrorMessage))
            {
                MessageBox.Show(e.Result.ErrorMessage,"Error", MessageBoxButton.OK);
            }
            else
            {
                result = e.Result;
                dataGridMain.ItemsSource = result.Items;
            }
        }
    }

Web 浏览器中的结果视图

© . All rights reserved.