使用JayData的CRUD应用程序,使用来使用 Visual Studio LightSwitch业务层

分享于 

11分钟阅读

Web开发

  繁體

下载代码:http://code.msdn.microsoft.com/vstudio/Visual-Studio-LightSwitch-7ba4b1ed

image

你可以用AngularJs的AngularJs services服务花费backend的Visual Studio services服务。 将你的业务层编码为 将节省大量开发时间,并减少编写代码所需的代码。

image

这个例子使用了 JayData unified统一数据访问库 JavaScript JavaScript JavaScript read。

应用程序

image

任务显示在列表中。

image

单击 add添加新按钮将显示允许创建新任务的表单。

image

可以输入和保存任务。

image

新任务将立即出现。

image

单击现有任务将在表单中打开它,以便可以编辑它。

单击 remove 按钮删除任务。

image

业务规则在 Business业务层中创建。

创建LightSwitch应用程序

image

使用 Visual Studio 2013 ( 或者更高),创建一个收费的新项目表。

image

创建新的应用程序。

image

右键单击 Data文件夹,然后选择 Add Add。

image

创建一个名为 ToDo ToDo的table 并保存。

image

将被 pluralized pluralized pluralized ToDoes。

image

选择编写代码,然后 ToDoes。

将以下代码用于该方法:


partial void ToDoes_Validate(ToDo entity,


 EntitySetValidationResultsBuilder results)


{


 // Do not allow a task to be called {New Task]


 if (entity.TaskName == "[New Task]")


 {


 results.AddEntityError(


 "Task cannot be named [New Task]"


 );


 }



 // Do not allow more than 1 incomplete Task


 if (entity.IsComplete == false)


 {


 int intCountOfIncomplete =


 this.DataWorkspace.ApplicationData.ToDoes


. Where(x => x.IsComplete == false).Count();



 if (intCountOfIncomplete > 0)


 {


 results.AddEntityError(


 "Cannot have more than 1 incomplete Task"


 );


 }


 }


}




image

我们可以创建的LightSwitch客户端屏幕,以允许我们输入示例数据。

( 见: LightSwitch 2013-Hello ! 为创建的LightSwitch屏幕提供

image

我们还看到 业务规则的收费。

创建实体上下文

JayData 跟踪实体使用实体上下文的更改。 在 context Adding的上下文中添加。更新。删除实体,并将引用保存到已经添加。更新和删除的对象中,并在调用后将操作分配给 endpoint。 实体上下文可以手动定义,也可以的JaySvcUtil.exe。 你可以从 JaySvcUtil 页面下载最新版本。

当我们运行应用程序时,我们会注意到。

如果我们将路径改为 ApplicationData.svc,我们会看到的OData服务。

我们使用 JayScvUtil 工具使用以下格式创建实体上下文:

JaySvcUtil.exe -m http://{domain}:{port}/ApplicationData.svc/$metadata -o ApplicationData.js

我们将生成的文件添加到项目中。

创建AngularJs视图页面

image

我们将首先制作一个显示数据的简单页面。

右键点击服务器项目 and Add添加新的HTML HTML页面。

image

将页面命名为 JayDataView。

将以下代码用于该页:


<html>


<head>


<title>JayData.org Sample</title>


<script src="http://code.jquery.com/jquery-2.0.3.min.js"></script>


<script src="http://code.angularjs.org/1.2.0-rc.3/angular.js"></script>


<script src="http://include.jaydata.org/datajs-1.0.3.js"></script>


<script src="http://include.jaydata.org/jaydata.js"></script>


<script src="http://include.jaydata.org/jaydatamodules/angular.js"></script>


<script src="JayDataView.js"></script>


<script src="ApplicationData.js"></script>


</head>



<body data-ng-app="app">


<div ng-controller="ToDoesController">


 <ul>


 <li ng-repeat="ToDo in ToDoes">


 <input id="checkSlave" type="checkbox" ng-model="ToDo.IsComplete">


 {{ToDo.TaskName}}


 </li>


 </ul>


</div>


</body>


</html>



创建一个名为 JayDataView.js的JavaScript JavaScript文件并使用以下代码:


// Create an Angular app and inject JayData


var app = angular.module('app', ['jaydata']);


// Define a controller


function ToDoesController($scope, $data) {


 // Make a empty collection for ToDoes


 $scope.ToDoes = [];



 var ApplicationData = new LightSwitchApplication.ApplicationData({


 name: 'oData',


 oDataServiceHost: '/ApplicationData.svc'


 });



 ApplicationData.onReady(function () {


 // Connect the ToDoes collection to the


 // JayData toLiveArray()


 $scope.ToDoes = ApplicationData.ToDoes.toLiveArray();


 });


}



image

执行应用程序。

image

导航到网站中的 JayDataView页面,任务会显示。

创建AngularJs的CRUD页面

JayData.html 创建一个新的页面调用,并使用下面的代码:


<html>


<script src="http://code.jquery.com/jquery-2.0.3.min.js"></script>


<script src="http://code.angularjs.org/1.2.0-rc.3/angular.js"></script>


<script src="http://include.jaydata.org/datajs-1.0.3.js"></script>


<script src="http://include.jaydata.org/jaydata.js"></script>


<script src="http://include.jaydata.org/jaydatamodules/angular.js"></script>


<script src="JayData.js"></script>


<script src="ApplicationData.js"></script>



<body>


 <div data-ng-app="app" ng-controller="ToDoEditorController">


 <ul>


 <li ng-repeat="ToDo in colToDoes">


 <input id="checkbox" type="checkbox" ng-model="ToDo.IsComplete" disabled="disabled">


 <a href="#" ng-click="$parent.selectedToDo = ToDo">{{ToDo.TaskName}}</a>


 </li>


 </ul>


 <button ng-click="newToDo()">add new</button>


 <p>


 <form ng-if="selectedToDo">


 <fieldset style="width: 300px; background-color: #FFFFCC;">


 <legend>{{selectedToDo.TaskName}}</legend>


 <br />


 <label>


 <span><strong>Id:</strong></span>


 <span>{{selectedToDo.Id}}</span>


 <span>


 <br />


 <strong>Task Name:</strong>


 </span>


 <input ng-model="selectedToDo.TaskName" size="20" />


 <span>


 <br />


 <strong>Is Complete:</strong>


 </span>


 <input type="checkbox" ng-model="selectedToDo.IsComplete" />


 <br />


 <br />


 </label>


 <button ng-click="save()">Save</button>


 <button ng-click="remove()">Remove</button>


 </fieldset>


 </form>


 </p>


 </div>


</body>


</html>



使用 JayData.js file:的下列代码


var app = angular.module('app', ['jaydata']);



function ToDoEditorController($scope, $data) {


 $scope.ToDoes = [];


 $scope.selectedToDo = null;



 var ApplicationData = new LightSwitchApplication.ApplicationData({


 name: 'oData',


 oDataServiceHost: '/ApplicationData.svc'


 });



 ApplicationData.onReady(function () {


 $scope.ApplicationData = ApplicationData;


 $scope.ToDoes = ApplicationData.ToDoes.toLiveArray();


 });



 // This will be called when the collection changes


 Object.defineProperty($scope, "colToDoes", {


 get: function () {


 return $scope.ApplicationData


. ToDoes


. toLiveArray();


 }


 });



 $scope.save = function () {


 if ($scope.selectedToDo.Id) {


 // Save an existing ToDo item


 $scope.ApplicationData.ToDoes.attach($scope.selectedToDo, true);


 $scope.selectedToDo.entityState = $data.EntityState.Modified;


 }


 else {


 // Save a new ToDo item


 $scope.ApplicationData.ToDoes.add($scope.selectedToDo, true);


 }


 $scope.saveChanges();


 };



 // Save any changes


 $scope.saveChanges = function () {


 $scope.ApplicationData.saveChanges()


. then(function () {


 $scope.selectedToDo = null;


 }, function (error) {


 // Get the validation error messages from LightSwitch


 var xml = error.message,


 xmlDoc = $.parseXML(xml),


 $xml = $(xmlDoc),


 $ValidationResults = $xml.find("ValidationResults");



 angular.forEach($ValidationResults, function (ValidationResult) {


 angular.forEach(ValidationResult.childNodes, function (childNode) {


 alert(childNode.childNodes[0].textContent);


 });


 });



 $scope.ApplicationData.stateManager.reset();


 });


 };



 $scope.remove = function () {


 // Remove the ToDo item


 $scope.ApplicationData.ToDoes.remove($scope.selectedToDo);


 $scope.saveChanges();


 };



 $scope.newToDo = function () {


 var ctx = $scope.ApplicationData;


 // Add a new ToDo item


 $scope.selectedToDo = new ctx.ToDoes.elementType({


 // Set the default value for the Task Name


 TaskName: "[New Task]"


 });


 };


}



JayData链接

Jaydata和 AngularJS

Jaydata和AngularJS继续运行。


LightSwitch帮助网站链接

使用JayData在AngularJs的CRUD应用程序中使用 Visual-Studio-LightSwitch业务层。

使用 Visual-Studio LightSwitch 创建一个AngularJS的CRUD应用程序


相关文章