publicclassEntity{publicvirtualGuidId{get;set;}publicvirtualGuidParentId{get;set;}publicvirtualTypeParentType=>null;}然后将Recipe,RecipeStep和RecipeItem派生Entity,将Recipe的RecipeId替换为Id,将RecipeStep的RecipeStepId替换为Id,将RecipeItem的ItemId替换为Id,将RecipeStep的RecipeId替换为ParentId,将RecipeItem的RecipeStepId替换为ParentId。隐藏,复制Code
publicclassRecipe:Entity{publicvirtualstringName{get;set;}publicvirtualstringComments{get;set;}publicvirtualDateTimeModifyDate{get;set;}publicvirtualIList
publicclassRecipeMap:ClassMap
voidRefreshParentObject(Entityentity){if(!entity.ParentId.HasValue)return;varparentObj=_session.Get(entity.ParentType,entity.ParentId.Value);if(parentObj!=null)_session.Refresh(parentObj);}现在我们更新webAPI控制器。隐藏,收缩,复制Code
(function(){'usestrict';angular.module('masterChefApp',[//Angularmodules'ngRoute',//Custommodules'recipesService'//3rdPartyModules]);})();2)配置Angular路由为我们的Angularapp模块定义一个配置函数——masterChefApp。并且,在该配置函数中,使用来自ngRoute模块的路由提供程序服务来定义客户端路由隐藏,复制Code
angular.module('masterChefApp').controller('recipesController',recipesController).controller('recipesAddController',recipesAddController).controller('recipesEditController',recipesEditController).controller('recipesDeleteController',recipesDeleteController);2)实现食谱添加控制器隐藏,复制Code
recipesAddController.$inject=['$scope','Recipe','$location'];functionrecipesAddController($scope,Recipe,$location){$scope.recipe=newRecipe();$scope.addRecipe=function(){$scope.recipe.$save(function(){$location.path('/');});}}因此,recipesAddController需要一个$作用域和食谱服务,它还需要$location服务。recipesAddController创建或提供了允许用户向应用程序添加菜谱的功能。为此,使用菜谱服务创建一个新的$scope变量recipe。它还在这里创建了一个$scope函数——addRecipe,该函数将使用recipeservices保存方法向服务器提交菜谱。在提交食谱后的回调中,我们将把应用程序重定向到它的主页。3)实现菜谱编辑控制器隐藏,复制Code
recipesEditController.$inject=['$scope','Recipe','$location','$routeParams'];functionrecipesEditController($scope,Recipe,$location,$routeParams){$scope.recipe=Recipe.get({id:$routeParams.id});$scope.editRecipe=function(){$scope.recipe.$save(function(){$location.path('/');});}}recipesEditController需要一个$作用域和菜谱服务$location服务。它还需要$routeParameter来传递id.recipesEditController创建或提供允许某人向应用程序更新菜谱的功能。我们将使用routeParams服务来更新菜谱。通过从route参数获取菜谱的ID。然后,我们将进入服务器,通过调用菜谱服务get函数获取适当的菜谱——这次是提供ID的get方法。该ID将被提供给前端。用户可以做出任何。最后,我们将更新后的食谱记录提交给服务器。4)实现菜谱删除控制器隐藏,复制Code
{"name":"asp.net","private":true,"dependencies":{"jquery":"3.1.0","bootstrap":"3.1.0","angular":"1.5.8","angular-route":"1.5.8","angular-resource":"1.5.8"}}所以bootstrap已经安装在wwwroot\lib文件夹中。现在我们将它包含在index.html中。隐藏,复制Code
recipesController.$inject=['$scope','Recipe'];functionrecipesController($scope,Recipe){$scope.recipes=Recipe.query();$scope.expand=function(recipe){recipe.show=!recipe.show;}}我们在recipesController中添加了一个ng-click来调用expand()函数。隐藏,复制Code
{{recipe.name}}-{{recipe.comments}}
[Route("api/[controller]")]publicclassRecipesController:Controller{….}对于RecipesController,基本URL是/api/recipes。隐藏,复制Code
[HttpGet("{id}")]publicIActionResultGet(Guidid){varrecipe=_repository.GetEntity
[HttpGet][Route("step/{id}")]publicIActionResultGetStep(Guidid){varrecipeStep=_repository.GetEntity
{get:{method:'GET'},save:{method:'POST'},query:{method:'GET',isArray:true},remove:{method:'DELETE'},delete:{method:'DELETE'}}以上操作都是在ngresource中构建的,所以我们可以直接使用它。隐藏,复制Code
recipesService.factory('Recipe',['$resource',function($resource){return$resource('/api/recipes/:id');}]);但是我们现在需要定义自己的自定义操作,并使用默认URL为操作提供不同的URL。隐藏,复制Code
recipesService.factory('Recipe',['$resource',function($resource){return$resource('/api/recipes/:id',{},{getRecipeStep:{method:'GET',url:'/api/recipes/step/:id'},saveRecipeStep:{method:'POST',url:'/api/recipes/step'},removeRecipeStep:{method:'DELETE',url:'/api/recipes/step/:id'},getRecipeItem:{method:'GET',url:'/api/recipes/item/:id'},saveRecipeItem:{method:'POST',url:'/api/recipes/item'},removeRecipeItem:{method:'DELETE',url:'/api/recipes/item/:id'}});}]);我们仍然使用recipe的默认操作,并添加新的自定义操作getRecipeStep、saveRecipeStep、removeRecipeStep、getRecipeItem、saveRecipeItem和removeRecipeItem。所有url都匹配配方步骤和配方项的webAPIurl。为配方步骤和配方项添加新的角度路径现在我们需要为app.js中的菜谱步骤创建、更新、删除和菜谱项创建、更新、删除模板和控制器添加新的客户端路由。隐藏,收缩,复制Code
angular.module('masterChefApp').controller('recipesController',recipesController).controller('recipesAddController',recipesAddController).controller('recipesEditController',recipesEditController).controller('recipesDeleteController',recipesDeleteController).controller('recipesAddStepController',recipesAddStepController).controller('recipesEditStepController',recipesEditStepController).controller('recipesDeleteStepController',recipesDeleteStepController).controller('recipesAddItemController',recipesAddItemController).controller('recipesEditItemController',recipesEditItemController).controller('recipesDeleteItemController',recipesDeleteItemController);recipesAddStepController创建或提供了允许某人向应用程序添加菜谱步骤的功能。当我们添加配方步骤时,我们需要父配方Id。我们将通过使用routeParams服务获得要创建的配方步骤。通过从route参数获取菜谱的ID。隐藏,复制Code
recipesAddStepController.$inject=['$scope','Recipe','$location','$routeParams'];functionrecipesAddStepController($scope,Recipe,$location,$routeParams){$scope.recipeStep=newRecipe();$scope.recipeStep.parentId=$routeParams.id;$scope.addRecipeStep=function(){$scope.recipeStep.$saveRecipeStep(function(){$location.path('/');});};}recipesEditStepController创建或提供了允许某人将配方步骤更新到应用程序的功能。我们将使用routeParams服务来更新菜谱步骤。通过从route参数获取菜谱步骤的ID。隐藏,复制Code
recipesEditStepController.$inject=['$scope','Recipe','$location','$routeParams'];functionrecipesEditStepController($scope,Recipe,$location,$routeParams){$scope.recipeStep=Recipe.getRecipeStep({id:$routeParams.id});$scope.editRecipeStep=function(){$scope.recipeStep.$saveRecipeStep(function(){$location.path('/');});};}recipesDeleteStepController使用$routeParams获取ID并检索特定的菜谱步骤。然后将此函数的删除步骤提供给应用程序。隐藏,复制Code
recipesDeleteStepController.$inject=['$scope','Recipe','$location','$routeParams'];functionrecipesDeleteStepController($scope,Recipe,$location,$routeParams){$scope.recipeStep=Recipe.getRecipeStep({id:$routeParams.id});$scope.deleteRecipeStep=function(){$scope.recipeStep.$removeRecipeStep({id:$scope.recipeStep.id},function(){$location.path('/');});};}recipesAddItemController创建或提供了允许用户向应用程序添加菜谱项的功能。当我们添加菜谱项时,我们需要父菜谱步骤Id。我们将通过使用routeParams服务获得要创建的菜谱项。通过从route参数获取菜谱步骤的ID。隐藏,复制Code
recipesAddItemController.$inject=['$scope','Recipe','$location','$routeParams'];functionrecipesAddItemController($scope,Recipe,$location,$routeParams){$scope.recipeItem=newRecipe();$scope.recipeItem.parentId=$routeParams.id;$scope.addRecipeItem=function(){$scope.recipeItem.$saveRecipeItem(function(){$location.path('/');});};}recipesEditItemController创建或提供了允许用户将菜谱项更新到应用程序的功能。我们将使用routeParams服务来更新菜谱项。通过从route参数获取菜谱项的ID。隐藏,复制Code
recipesEditItemController.$inject=['$scope','Recipe','$location','$routeParams'];functionrecipesEditItemController($scope,Recipe,$location,$routeParams){$scope.recipeItem=Recipe.getRecipeItem({id:$routeParams.id});$scope.editRecipeItem=function(){$scope.recipeItem.$saveRecipeItem(function(){$location.path('/');});};}recipesDeleteItemController使用$routeParams获取ID并检索特定的菜谱项。然后提供此函数,将菜谱项删除到应用程序。隐藏,复制Code
recipesDeleteItemController.$inject=['$scope','Recipe','$location','$routeParams'];functionrecipesDeleteItemController($scope,Recipe,$location,$routeParams){$scope.recipeItem=Recipe.getRecipeItem({id:$routeParams.id});$scope.deleteRecipeItem=function(){$scope.recipeItem.$removeRecipeItem({id:$scope.recipeItem.id},function(){$location.path('/');});};}添加配方步骤和配方项的所有模板现在我们需要为配方步骤和配方项创建所有模板。创建“addStep。html”、“editStep。html”、“deleteStep.html”、“addItem。html”、“editItem。html”和“deleteItem。在partials文件夹中。1)配方步骤模板在addStep。html,使用ng-submit发送数据到服务器。当用户按下Save按钮时,调用一个作用域函数addRecipeStep,该函数在控制器的后台将向服务器提交这个配方步骤对象。隐藏,复制Code