使用 WCF RIA服务的LightSwitch图片管理器

分享于 

14分钟阅读

Web开发

  繁體

从这里下载项目的费用: http://code.msdn.microsoft.com/vstudio/LightSwitch-HTML-Picture-821a2bbe

image

( 注:尝试现场取样:https://pictureuploader.lightswitchhelpwebsite.com/htmlclient/ ( 使用你的LightSwitchHelpWebsite.com 用户名和密码进行访问) )

本文描述了一个收费为的Visual Studio LightSwitch,它使用的WCF服务上传并查看web服务器上的文件。 使用 WCF服务允许应用程序在显示列表时使用存储在服务器硬盘上的缩略图提供快速性能,当用户选择它时完全原始映像。 收费服务允许代码清晰易懂,因为它暴露了作为普通表的实体,但它保存和读取来自硬盘驱动器的图片。

image

本示例从以下创建的应用程序开始: 完全控制 LightSwitch (。ServerApplicationContext和通用文件处理程序和Ajax调用)

在这里应用程序中,你可以搜索用户和图片名称( 请参阅使用LightSwitch客户端搜索的服务器端搜索关于创建搜索屏幕的教程)。

image

用户可以选择收费我的帐户来更新他们的个人资料和上传图片。

image

页面中,只显示用户照片。 用户可以点击照片来编辑它的标题。

用户可以选择添加用户图片上传照片。

image

上传照片时,它将显示在预览中。

image

业务规则允许用户只上传 5个图片。

建筑群 项目

image

项目是一个普通的LightSwitch项目,带有的WCF RIA服务服务将映像保存到服务器硬盘驱动器,并从服务器硬盘驱动器读取映像。 它公开了两个实体,单价为,BigPictures。 两个实体都在服务器硬盘上查看相同的文件。 原因有两个,当我们想显示原始图像时,使用 BigPictures。 当我们想显示图像缩略图( 在查看图片列表时,这提供了更快的性能) 时,使用 UserPictures

显示图片

image

如果我们查看主屏幕,我们会看到 UserPictures 绑定到 Tile控件,的GetBigPicture实体的弹出窗口为 Popup。

WCF服务为这两个实体定义了定义:


 public class UserPicture


{


 [Key]


 public int Id { get; set; }


 public string UserName { get; set; }


 public string PictureName { get; set; }


 public string ActualFileName { get; set; }


 public byte[] FileImage { get; set; }


}



public class BigPicture


{


 [Key]


 public int Id { get; set; }


 public string ActualFileName { get; set; }


 public byte[] FileImage { get; set; }


}




要检索照片,使用了 below 代码。 注意它实际上是从图片 table ( 这是一个普通的SQL table ) 获取所有数据,并用硬盘上文件( 在这种情况下,缩略图图像)的内容替换FileImage属性:

#region GetPictures[Query(IsDefault = true)]public IQueryable<UserPicture> GetPictures()
{
 var colUserPictures = new List<UserPicture>();
 colUserPictures = (from Pictures inthis.Context.Pictures
 selectnew UserPicture
 {
 Id = Pictures.Id,
 UserName = Pictures.UserName,
 PictureName = Pictures.PictureName,
 ActualFileName = Pictures.ActualFileName,
 }).ToList();
 // Add the Pictures to the collectionforeach (var Picture in colUserPictures)
 {
 try {
 // Load Image thumbnailstring strThumbnailFile =
 String.Format("{0}_thumb{1}",
 Path.GetFileNameWithoutExtension(Picture.ActualFileName),
 Path.GetExtension(Picture.ActualFileName));
 string strPath = string.Format(@"{0}{1}",
 GetFileDirectory(), strThumbnailFile);
 FileStream sourceFile = new FileStream(strPath, FileMode.Open);
 long FileSize;
 FileSize = sourceFile.Length;
 byte[] getContent = new byte[(int)FileSize];
 sourceFile.Read(getContent, 0, (int)sourceFile.Length);
 sourceFile.Close();
 Picture.FileImage = getContent;
 }
 catch {
 // Do nothing if image not found }
 }
 return colUserPictures.AsQueryable();
}#endregion

检索单个大图片时,将使用以下方法:

#region GetBigPicturepublic BigPicture GetBigPicture(int? Id)
{
 var objPicture = new BigPicture();
 if (Id!= null)
 {
 objPicture = (from Pictures inthis.Context.Pictures
 where Pictures.Id == Id
 selectnew BigPicture
 {
 Id = Pictures.Id,
 ActualFileName = Pictures.ActualFileName,
 }).FirstOrDefault();
 // Add the Pictures to the collectionif (objPicture!= null)
 {
 try {
 string strPath = string.Format(@"{0}{1}",
 GetFileDirectory(), objPicture.ActualFileName);
 FileStream sourceFile = new FileStream(strPath, FileMode.Open);
 long FileSize;
 FileSize = sourceFile.Length;
 byte[] getContent = new byte[(int)FileSize];
 sourceFile.Read(getContent, 0, (int)sourceFile.Length);
 sourceFile.Close();
 objPicture.FileImage = getContent;
 }
 catch {
 // Do nothing if image not found }
 }
 }
 return objPicture;
}#endregion

删除照片

image

用户可以编辑自己的图片。 完成后,他们有一个选择删除图片。

image

在屏幕设计器中,我们可以看到 Delete button。

对于收费为 Delete button按钮的JavaScript代码实际上非常简单,与我们不调用WCF服务: 完全相同:


myapp.EditPicture.Delete_execute = function (screen) {


 // Delete the current picture record


 screen.UserPicture.deleteEntity();


 // Save the changes


 return myapp.commitChanges().then(null, function fail(e) {


 // There was an error -- cancel changes


 myapp.cancelChanges();


 // Throw the error so it will display


 // to the user


 throw e;


 });


};




WCF RIA服务方法的基础为 :

#region DeleteFilepublicvoid DeleteFile(UserPicture objFileRecord)
{
 string strCurrentUserName = GetCurrentUserName();
 // This picture must belong to the person deleting itif (strCurrentUserName == objFileRecord.UserName)
 {
 // Delete filetry {
 string strFileDirectory = GetFileDirectory();
 string strFileName = objFileRecord.ActualFileName;
 string strThumbnailFile =
 String.Format(@"{0}_thumb{1}",
 Path.GetFileNameWithoutExtension(strFileName),
 Path.GetExtension(strFileName));
 // Delet the thumbnail and the picture File.Delete(Path.Combine(strFileDirectory, strThumbnailFile));
 File.Delete(Path.Combine(strFileDirectory, objFileRecord.ActualFileName));
 }
 catch {
 // Do nothing if file does not delete }
 // Get database picture recordvar objPicture = (from Pictures inthis.Context.Pictures
 where Pictures.Id == objFileRecord.Id
 where Pictures.UserName == strCurrentUserName
 select Pictures).FirstOrDefault();
 if (objPicture!= null)
 {
 // Delete database picture recordthis.Context.Pictures.DeleteObject(objPicture);
 this.Context.SaveChanges();
 }
 }
}#endregion

上传图片

image

我们将从 LightSwitch的HTML客户端教程中借用代码- Contoso Moving教程。 这个示例与这个示例的主要区别在于,在示例中,图片存储在数据库中而不是硬盘驱动器中。

image

添加图片屏幕的布局很简单。 它包含的UserPicture entity实体,它的FileImage属性绑定到一个收费控件

下面的代码用于呈现 Custom控件的内容:


myapp.AddPicture.FileImage_render = function (element, contentItem) {


 // Create the Image Uploader


 createImageUploader(element, contentItem, "max-width: 300px; max-height: 300px");


};




WCF RIA服务方法的基础为 :

#region InsertFilepublicvoid InsertFile(UserPicture objFileRecord)
{
 // Get current userstring strCurrentUserName = GetCurrentUserName();
 // The file name will be prepended with the userNamestring strActualFileName = String.Format("{0}_{1}.png",
 strCurrentUserName, DateTime.Now.Ticks.ToString());
 // Create a Picture object Picture objPicture = this.Context.CreateObject<Picture>();
 // Ste values objPicture.ActualFileName = strActualFileName;
 objPicture.PictureName = objFileRecord.PictureName;
 // User can only Insert a picture under their identity objPicture.UserName = strCurrentUserName;
 // Get the local directorystring strFileDirectory = GetFileDirectory();
 EnsureDirectory(new System.IO.DirectoryInfo(strFileDirectory));
 // Set a value for the file pathstring filePath = Path.Combine(strFileDirectory, strActualFileName);
 // Convert file to streamusing (Stream FileImageStream =
 new MemoryStream(objFileRecord.FileImage))
 {
 FileInfo fi = new FileInfo(filePath);
 // If file exists - delete itif (fi.Exists)
 {
 try {
 fi.Delete();
 }
 catch {
 // could not delete }
 }
 using (FileStream fs = File.Create(filePath))
 {
 // Save the file SaveFile(FileImageStream, fs);
 fs.Close();
 }
 // Make a thumbnail of the file MakeThumbnail(filePath);
 }
 // Update LightSwitch Databasethis.Context.Pictures.AddObject(objPicture);
 this.Context.SaveChanges(
 System.Data.Objects.SaveOptions.DetectChangesBeforeSave);
 // Set the objFileRecord.Id to the ID that was inserted// In the Picture table objFileRecord.Id = objPicture.Id;
 // Set Actual File Name objFileRecord.ActualFileName = strActualFileName;
}#endregion

业务规则

image

为了实现用户只能上传 5张图片的业务规则,我们将打开的UserPicture 实体,并选择的UserPictures_Inserting method方法。

我们将以下代码用于该方法:


partial void UserPictures_Inserting(UserPicture entity)


{


 string strCurrentUser = this.Application.User.Identity.Name;



 // Only allow each user to insert 5 pictures


 if (this.DataWorkspace.ApplicationData.Pictures


. Where(x => x.UserName == strCurrentUser).Count() > 4)


 {


 throw new Exception(string.Format("{0} can only add 5 pictures.", entity.UserName));


 }


 else


 {


 // The UserName is set to the person who is logged in


 entity.UserName = this.Application.User.Identity.Name;


 }


}




强大的框架

服务允许我们创建复杂的功能并将它的作为实体公开。 这允许我们使用相对简单的代码编写JavaScript层。

特别鸣谢

特别感谢和 valuable valuable的帮助。

LightSwitch帮助网站文章

一个 End-To-End-Visual-Studio-LightSwitch应用程序。

完全控制 LightSwitch (。ServerApplicationContext和通用文件处理程序和Ajax调用)

将数据保存在 Visual-Studio LightSwitch客户端( 包括自动保存) 中。

使用LightSwitch中的Wijmo网格创建桌面体验。

使用ServerApplicationContext创建 ASP.NET Web窗体CRUD页

在 Visual-Studio-LightSwitch中使用 promise

检索LightSwitch客户端中的当前用户。

在 Visual-Studio-LightSwitch中编写实现绑定 Pattern的JavaScript。

在LightSwitch客户端中实现Wijmo径向表。

在LightSwitch客户端预览系统中编写 JavaScript

在 Visual-Studio LightSwitch中使用TypeScript创建 JavaScript

使用 JQuery ThemeRoller插件对你的LightSwitch网站进行主题化。

使用带有 Visual-Studio-LightSwitch HTML客户端的Toastr ( 预览 )

LightSwitch团队HTML和JavaScript文章

使用地图控件控件可视化列表数据

使用 JQuery Mobile 控件增强LightSwitch控件。

的自定义控件和数据绑定在LightSwitch客户机( Joe活页夹) 中。

使用LightSwitch客户端( Joe活页夹) 创建屏幕。

HTML客户端: 一个架构概览( Stephen Provine )

在 LightSwitch ( Joe活页夹) 中编写JavaScript代码。

新的LightSwitch客户端 api。

为LightSwitch服务器交互提供了一个新的API: ServerApplicationContext

构建一个LightSwitch客户端: 易趣日报每日交易( Andy )。


MAN  服务  services  WCF  lights  picture  
相关文章