结束LightSwitch的HTML示例

分享于 

21分钟阅读

Web开发

  繁體
从这里下载 63Mb 项目: http://code.msdn.microsoft.com/vstudio/Online-Ordering-System-An-5a6d9134

一个 End-To-End LightSwitch HTML示例

注意:在这里查看更新后的版本: 一个 End-To-End-Visual-Studio-LightSwitch 2013 HTML5应用程序插件。

现场演示:https://endtoendexample.lightswitchhelpwebsite.com/Client/default.htm ( 使用你的用户名和密码 http://LightSwitchHelpWebsite.com )

在本文中,我们将以 LightSwitch 为代价创建一个end-to-end的HTML应用程序。 目的是演示LightSwitch如何让你创建专业的商业应用程序,让开发者每天去创建一个专业的商业应用程序。 你可以在一个小时内创建这样的应用。

你可以在以下位置下载 :http://www.microsoft.com/visualstudio/en-us/lightswitch

场景

在本示例中,我们将负责生成满足订单跟踪系统以下要求的应用程序:

  • 产品
    • 添加产品
    • 编辑产品
    • 删除产品
  • 订单
    • 添加订单
    • 编辑订单
      • 添加订单详细信息
      • 编辑订单详细信息
      • 删除订单详细信息
    • 删除订单
  • 业务规则
    • 允许当前用户只查看他们的订单
    • 显示当前用户的订单数量
    • 允许管理员查看所有订单
  • 功能
    • 显示用户的订单数量

创建应用程序

0像素"alt="图像"src="https://www.codeproject.com/KB/LightSwitch/543429/Windows-Live-Writer-An-End-To-End-Visual-Studio-LightSwi_027.png">

打开 Visual Studio 并选择 File,然后项目


图像

创建新的应用程序 (。注意你必须安装了 LightSwitch HTML客户端 )。

图像

将创建应用程序。

图像

右键单击解决方案资源管理器的服务器节点,然后选择添加 table。

图像

点击 table NAME 来编辑它。

将 table NAME 更改为

图像

另外,向 table 添加ProductName和 ProductPrice fields。

图像

单击保存按钮以保存 table。

图像

创建订单 table ( 图像 上面 中的字段)。

图像

创建收费的OrderDetail table。

创建关系

你总是希望在表相关时建立关系。 这样可以获得最佳的应用结构。 创建查询时,定义的关系允许你简单地键入一个周期("。") 并从一个实体传递到另一个实体。 这样可以节省大量编码工作并减少编码错误。

当创建用户界面时,定义关系可以节省大量的编码工作,因为 LightSwitch 可以自动 associate associate associate Order订单详细信息与相关的收费。

图像

点击 Relationship 按钮创建关系订单细节和Product产品 table 之间的关系。

图像

将出现一个框。选择 Product table,然后单击 ok ok ( 确保其他字段 MATCH 显示图像 上面 )。

图像

你将看到已经创建了一个关系。 你可以双击双击编辑关系。

图像

点击 按钮,并将 new Relationship table。

创建筛选器

我们需要实现的一个特性是只显示用户自己的订单( 并允许管理员查看所有订单)。 我们必须记住 all applications应用程序通过OData公开所有数据,所以我们必须始终在客户端代码( 例如的HTML 或者的Silverlight LightSwitch客户) 中设置服务器端代码的安全性。

图像

我们要做的第一件事就是打开安全。

图像

接下来,我们打开订单 table 并选择编写代码,然后 Orders_Filter。

将以下代码用于该方法:


partial void Orders_Filter(ref Expression<Func<Order, bool>> filter)


{


 // Only show the Orders for the current user


 filter = (x => x.UserName == this.Application.User.Identity.Name);


}




访问这里 table的所有数据都将通过这里筛选器。

设置默认值

记住必须设置与服务器端代码中安全相关的所有内容,我们意识到使用服务器端代码设置当前用户的用户名必须使用服务器端代码。

图像

打开订单 table 并选择编写代码,然后 Orders_Inserting。 将以下代码用于该方法:


partial void Orders_Inserting(Order entity)


{


 // Set the Username


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


}




Orders_Updating 事件执行相同的操作。

稍后,我们还将使用客户端代码设置用户名,但是服务器端代码总是运行并覆盖任何值集客户端。

创建查询

我们需要实现的另一个特性是显示当前用户的订单数量。 我们将进行一个查询,稍后我们会从客户端消费。

0像素"alt="图像"src="https://www.codeproject.com/KB/LightSwitch/543429/Windows-Live-Writer-An-End-To-End-Visual-Studio-LightSwi_006.png">

右键单击 on 订单 table,然后选择添加查询。

0像素"alt="图像"src="https://www.codeproject.com/KB/LightSwitch/543429/Windows-Live-Writer-An-End-To-End-Visual-Studio-LightSwi_012.png">

通过单击标题并编辑该查询,将查询命名为 OrdersForUser。 先保存,然后选择 OrdersForUser PreprocessQuery

将以下代码用于该方法:


partial void OrdersForUser_PreprocessQuery(ref IQueryable<Order> query)


{


 // Only show the Orders for the current user


 query = query.Where(x => x.UserName == this.Application.User.Identity.Name);


}




创建产品的用户界面

图像

我们将首先创建一个屏幕,让我们看到的产品

右键单击解决方案资源管理器的客户端节点,并选择添加屏幕。

图像

使用产品 table 创建一个收费的浏览数据屏幕。

图像

将创建屏幕。

图像

我们现在将创建一个屏幕,允许我们编辑一个的产品

点击产品清单,在它的属性 select Item action action action。

图像

选择选择现有方法,选择 editSelected。

图像

现在,我们将把浏览数据屏幕连接到一个新的收费屏幕。

For导航到,选择 ( 新屏幕。) click ok ok ok ok ok。

图像

添加新屏幕 只选择产品详细信息,然后单击 ok。

图像

将创建屏幕。

图像

现在我们将添加一个按钮,该按钮将创建一个新的产品

返回浏览产品屏幕。

图像

选择 Command Command 然后 Add Choose选择现有方法,然后 AddAndEditNew。

图像

For导航至,选择添加 Edit Product ( 在早期步骤中创建的屏幕) click click ok ok ok ok ok ok。

0像素"alt="图像"src="https://www.codeproject.com/KB/LightSwitch/543429/Windows-Live-Writer-An-End-To-End-Visual-Studio-LightSwi_047.png">

以运行应用程序。

点击 ADD添加产品按钮以添加一个收费的产品。

图像

添加产品并单击保存按钮以保存它。

图像

这些产品将在清单中显示。

创建主页面

图像

现在,我们将创建收费的主屏幕

创建一个名为的新屏幕,使用的订单 table 屏幕数据。

图像

选择项目 Tap List control control control action action。

图像

现在我们将屏幕连接到一个新的收费的屏幕。

For导航到,选择 ( 新屏幕。) click ok ok ok ok ok。

图像

添加新屏幕 选择订单详细信息和订单 OrderDetails,并单击 ok。

图像

将创建屏幕。

设置添加编辑顺序屏幕的格式

图像

用户 NAME 文本 Box Change Change改为label标签。

图像

现在我们将允许用户选择一个收费的订单细节表,并在一个新的屏幕中编辑。

单击订单详细信息列表控件,然后单击它的属性中的Tap action。

选择 OrderDetails.editSelected 然后按定位到: ( 新屏幕。)。

图像

添加新屏幕

选择 OrderDetail详细信息并单击 ok。

图像

将创建屏幕。

设置添加顺序细节编辑屏幕的格式

图像

右键单击 Layout dropdown dropdown dropdown dropdown dropdown dropdown dropdown dropdown dropdown。

因为我们将在用户进入这个屏幕时设置,所以我们不需要显示 Order的订单。

我们稍后将返回这个屏幕,添加一个的删除按钮。 这个收费的delete 按钮需要自定义的 JavaScript,我们将在以后展示如何做。

因此,现在我们已经完成了这个屏幕。

创建添加顺序详细信息按钮

图像

我们将创建一个按钮,允许用户添加一个新的订单细节

返回到 AddEditOrder 屏幕。

打开 Command命令栏订单详细信息 Tab。

选择添加 Add添加新按钮。

添加按钮 popup中,选择 OrderDetails.addAndEditNew,然后按定位至: 添加编辑顺序详细信息 ( 在前面的步骤中创建的屏幕)。

创建添加顺序按钮

图像

我们将创建一个按钮,允许用户添加一个新的收费。

返回到主屏幕。

打开命令栏

选择添加 Add添加新按钮。

添加按钮 popup中,选择 Orders.addAndEditNew,然后按定位至: 添加编辑顺序 ( 在前面的步骤中创建的屏幕)。

图像

解决方案资源管理器,右键单击 Main Main主页面,然后选择设置为主屏幕。

.所定义的内容类型的类名

0像素"alt="图像"src="https://www.codeproject.com/KB/LightSwitch/543429/Windows-Live-Writer-An-End-To-End-Visual-Studio-LightSwi_051.png">

如果我们运行应用程序,并单击添加订单按钮。

图像

。尝试创建一个收费的订单,它将不会保存。

我们丢失了的用户名。 为了让用户使用当前用户,我们已经添加了代码,但是由于我们使它成为必需的字段,它必须仍然提供。 we用户可以用文本框 ,允许用户输入它,但是我们可以使用 ServerApplicationContext 自动插入客户端端。

请参见以下文章中的分步教程: 检索LightSwitch客户端中的当前用户。

使用服务器应用程序上下文

现在我们将创建一个文件处理程序,它使用服务器应用程序上下文 API 检索当前登录的用户用户名 然后,我们将从客户端的代码调用该处理程序,以填充屏幕上的值。

图像

解决方案资源管理器中,单击项目和 switch 以的文件视图视图。

图像

右键单击服务器/网站文件夹,然后选择添加然后新项目。

图像

创建新的通用处理程序

注意:注意:必须从头创建文件,以便向项目添加正确的引用。 如果只复制和粘贴文件,或者将文件拖放到项目中,它将无法工作。)

对 file: 使用以下代码


using System;


using System.Collections.Generic;


using System.Linq;


using System.Web;


namespace LightSwitchApplication.Web


{


 public class GetUserName : IHttpHandler


 {


 public void ProcessRequest(HttpContext context)


 {


 using (var serverContext = ServerApplicationContext.CreateContext())


 {


 context.Response.ContentType = "text/plain";


 context.Response.Write(serverContext.Application.User.Name);


 }


 }


 public bool IsReusable


 {


 get


 {


 return false;


 }


 }


 }


}



图像

将你的帐户设置为 Logical,打开订单,选择客户,编写代码,然后创建 method方法。

将以下代码用于该方法:


myapp.Order.created = function (entity) {


 // Set the default date for the Order


 entity.OrderDate = new Date();


 // Using a Promise object we can call the CallGetUserName function


 msls.promiseOperation(CallGetUserName).then(function PromiseSuccess(PromiseResult) {


 // Set the result of the CallGetUserName function to the 


 // UserName of the entity


 entity.UserName = PromiseResult;


 });


};



// This function will be wrapped in a Promise object


function CallGetUserName(operation) {


 $.ajax({


 type: 'post',


 data: {},


 url: '../web/GetUserName.ashx',


 success: operation.code(function AjaxSuccess(AjaxResult) {


 operation.complete(AjaxResult);


 })


 });


}



注意: 在 Visual-Studio 中使用承诺,以获得更多关于使用 msls.promiseOperation的更多信息。

图像

在运行新记录时,当我们运行应用程序时,用户名和日期现在被设置为它的默认值。

你现在可以创建和保存记录。

格式化输出

图像

当我们查看的订单细节时,我们看到它没有按照我们想要的方式格式化。

图像

我们返回到 Add Edit screen,并将订单详细摘要摘要控件change为的自定义控件。

图像

在control控件的属性中,我们选择编辑呈现代码。

我们使用下面的代码:


myapp.AddEditOrder.RowTemplate_render = function (element, contentItem) {


 // We need to wait until the Products for the Order Detail are loaded


 // so we create a binding to"value.Product.ProductName"


 // When the data is loaded the binding will be raised


 // We will then have all the data required for our display


 contentItem.dataBind("value.Product.ProductName", function (newValue) {


 // clear the element


 element.innerHTML = "";


 // Create a template


 var itemTemplate = $("<div></div>");


 // Get the Product name and quantity


 var ProductName = contentItem.value.Product.ProductName;


 var ProductQuantity = "";


 if (contentItem.value.Quantity!== undefined) {


 ProductQuantity = ' [' + contentItem.value.Quantity + ']';


 }


 // Create the final display


 var FinalName = $("<h2>").text(ProductName + ProductQuantity);


 // Complete the template


 FinalName.appendTo($(itemTemplate));


 itemTemplate.appendTo($(element));


 });


};



( 说明:的详细信息,请参见:: 在 Visual-Studio-LightSwitch中使用 promise。
另外,请参见:在 Visual-Studio-LightSwitch中编写实现绑定 Pattern的JavaScript

图像

运行应用程序时,输出按照我们希望的格式进行格式化。

调用自定义查询

接下来,我们将调用前面创建的查询。

图像

打开主屏幕,选择添加数据项,并创建一个Integer的整数属性。

图像

将属性从视图模型拖放到屏幕布局。

图像

属性中,使标签的左对齐为磅。

图像

要设置属性的值,请选择编写代码,然后选择创建的method方法。

使用下面的代码:





myapp.Main.created = function (screen) {


 myapp.activeDataWorkspace.ApplicationData.OrdersForUser().execute().then(function (results) {


 var TotalCountOfOrders = CountOrders(results);


 screen.TotalOrdersForCurrentUser = TotalCountOfOrders.toString();


 });


};


function CountOrders(Orders) {


 var TotalOrders = 0;


 var orders = Orders.results;


 orders.forEach(function (order) {


 TotalOrders = TotalOrders + 1;


 });


 return TotalOrders;


}



图像

在运行应用程序时,我们看到了订单的计数。

轻松格式化

图像

查看主屏幕时,我们看到它显示的用户名为,并且我们希望显示的订单日期。

图像

Visual Studio 中,打开的主屏幕。

订单汇总控件更改为行的布局。

图像

右键点击 的用户名标签和 delete。

图像

运行应用程序时,我们将看到订单日期

删除一个记录

图像

命令栏中打开添加编辑订单细节屏幕并添加按钮。

为按钮制作一个的Delete method。

图像

右键单击视图模型中的删除method方法,并选择 Edit。

将以下代码用于该方法:





myapp.AddEditOrderDetail.Delete_execute = function (screen) {


 screen.OrderDetail.deleteEntity();


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


 myapp.cancelChanges();


 throw e;


 });


};



图像

运行该应用程序时,你将能够对所选的订单详细信息进行排序。

图像

你需要将保存才能实际记录。

我们还可以使用以下代码向添加编辑订单 screen添加一个收费的Delete button





myapp.AddEditOrder.Delete_execute = function (screen) {


 screen.Order.deleteEntity();


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


 alert(e.message);


 myapp.cancelChanges();


 throw e;


 });


};



图像

如果我们尝试使用价格为的订单,那么你会注意到,if订单Detail仍然是收费的Detail records记录。

图像

因为我们在早期表之间创建的关系设置为不允许删除有关联的记录,因此将引发错误,这将引发错误。

先删除所有的订单细节,然后你就可以 delete 订单。

导航到屏幕

图像

打开收费的主屏幕并创建一个按钮,浏览到浏览产品屏幕。

图像

显示浏览产品按钮将显示。

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网站进行主题化。

使用Toastr与 Visual-Studio-LightSwitch HTML客户端( 预览)

LightSwitch团队HTML和JavaScript文章

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

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

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

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

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

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

新的LightSwitch客户端 api。

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

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


相关文章