From 7ac072781396ed58c7cab05b249c057e3186ea7f Mon Sep 17 00:00:00 2001 From: SteveSandersonMS Date: Wed, 25 Nov 2015 17:44:32 +0000 Subject: [PATCH] Towards working forms --- .../MusicStore/Apis/AlbumsApiController.cs | 3 +- .../MusicStore/Infrastructure/ApiResult.cs | 22 +++--------- .../admin/album-edit/album-edit.html | 26 +++++++------- .../components/admin/album-edit/album-edit.ts | 35 ++++++++----------- 4 files changed, 34 insertions(+), 52 deletions(-) diff --git a/samples/angular/MusicStore/Apis/AlbumsApiController.cs b/samples/angular/MusicStore/Apis/AlbumsApiController.cs index fdb4464..dbd9459 100644 --- a/samples/angular/MusicStore/Apis/AlbumsApiController.cs +++ b/samples/angular/MusicStore/Apis/AlbumsApiController.cs @@ -113,8 +113,7 @@ namespace MusicStore.Apis } [HttpPut("{albumId:int}/update")] - [Authorize("app-ManageStore")] - public async Task UpdateAlbum(int albumId, [FromBody]AlbumChangeDto album) + public async Task UpdateAlbum(int albumId, [FromBody] AlbumChangeDto album) { if (!ModelState.IsValid) { diff --git a/samples/angular/MusicStore/Infrastructure/ApiResult.cs b/samples/angular/MusicStore/Infrastructure/ApiResult.cs index 9aae780..7adac59 100644 --- a/samples/angular/MusicStore/Infrastructure/ApiResult.cs +++ b/samples/angular/MusicStore/Infrastructure/ApiResult.cs @@ -1,7 +1,6 @@ using Microsoft.AspNet.Mvc; using Microsoft.AspNet.Mvc.ModelBinding; using Newtonsoft.Json; -using System; using System.Collections.Generic; using System.Linq; using System.Threading.Tasks; @@ -13,16 +12,13 @@ namespace MusicStore.Infrastructure public ApiResult(ModelStateDictionary modelState) : this() { - if (modelState.Any(m => m.Value.Errors.Count > 0)) + if (modelState.Any(m => m.Value.Errors.Any())) { StatusCode = 400; Message = "The model submitted was invalid. Please correct the specified errors and try again."; ModelErrors = modelState - .SelectMany(m => m.Value.Errors.Select(me => new ModelError - { - FieldName = m.Key, - ErrorMessage = me.ErrorMessage - })); + .Where(m => m.Value.Errors.Any()) + .ToDictionary(m => m.Key, m => m.Value.Errors.Select(me => me.ErrorMessage )); } } @@ -40,7 +36,7 @@ namespace MusicStore.Infrastructure public object Data { get; set; } [JsonProperty(NullValueHandling = NullValueHandling.Ignore)] - public IEnumerable ModelErrors { get; set; } + public IDictionary> ModelErrors { get; set; } public override Task ExecuteResultAsync(ActionContext context) { @@ -49,15 +45,7 @@ namespace MusicStore.Infrastructure context.HttpContext.Response.StatusCode = StatusCode.Value; } - var json = new JsonResult(this); - return json.ExecuteResultAsync(context); - } - - public class ModelError - { - public string FieldName { get; set; } - - public string ErrorMessage { get; set; } + return new ObjectResult(this).ExecuteResultAsync(context); } } } diff --git a/samples/angular/MusicStore/wwwroot/ng-app/components/admin/album-edit/album-edit.html b/samples/angular/MusicStore/wwwroot/ng-app/components/admin/album-edit/album-edit.html index 1276a38..393f80b 100644 --- a/samples/angular/MusicStore/wwwroot/ng-app/components/admin/album-edit/album-edit.html +++ b/samples/angular/MusicStore/wwwroot/ng-app/components/admin/album-edit/album-edit.html @@ -2,37 +2,37 @@
- - + - - + - - + + - +
$ - +
- - + + - + diff --git a/samples/angular/MusicStore/wwwroot/ng-app/components/admin/album-edit/album-edit.ts b/samples/angular/MusicStore/wwwroot/ng-app/components/admin/album-edit/album-edit.ts index e199e22..83a40b0 100644 --- a/samples/angular/MusicStore/wwwroot/ng-app/components/admin/album-edit/album-edit.ts +++ b/samples/angular/MusicStore/wwwroot/ng-app/components/admin/album-edit/album-edit.ts @@ -23,14 +23,15 @@ export class AlbumEdit { constructor(fb: ng.FormBuilder, http: Http, routeParam: router.RouteParams) { this._http = http; - http.get('/api/albums/' + routeParam.params['albumId']).subscribe(result => { + var albumId = parseInt(routeParam.params['albumId']); + http.get('/api/albums/' + albumId).subscribe(result => { var json = result.json(); this.originalAlbum = json; - (this.form.controls['title']).updateValue(json.Title); - (this.form.controls['price']).updateValue(json.Price); - (this.form.controls['artist']).updateValue(json.ArtistId); - (this.form.controls['genre']).updateValue(json.GenreId); - (this.form.controls['albumArtUrl']).updateValue(json.AlbumArtUrl); + (this.form.controls['Title']).updateValue(json.Title); + (this.form.controls['Price']).updateValue(json.Price); + (this.form.controls['ArtistId']).updateValue(json.ArtistId); + (this.form.controls['GenreId']).updateValue(json.GenreId); + (this.form.controls['AlbumArtUrl']).updateValue(json.AlbumArtUrl); }); http.get('/api/artists/lookup').subscribe(result => { @@ -42,11 +43,12 @@ export class AlbumEdit { }); this.form = fb.group({ - artist: fb.control('', ng.Validators.required), - genre: fb.control('', ng.Validators.required), - title: fb.control('', ng.Validators.required), - price: fb.control('', ng.Validators.compose([ng.Validators.required, AlbumEdit._validatePrice])), - albumArtUrl: fb.control('', ng.Validators.required) + AlbumId: fb.control(albumId), + ArtistId: fb.control(0, ng.Validators.required), + GenreId: fb.control(0, ng.Validators.required), + Title: fb.control('', ng.Validators.required), + Price: fb.control('', ng.Validators.compose([ng.Validators.required, AlbumEdit._validatePrice])), + AlbumArtUrl: fb.control('', ng.Validators.required) }); } @@ -62,14 +64,7 @@ export class AlbumEdit { (window).fetch(`/api/albums/${ albumId }/update`, { method: 'put', headers: { 'Content-Type': 'application/json' }, - body: JSON.stringify({ - AlbumArtUrl: controls['albumArtUrl'].value, - AlbumId: albumId, - ArtistId: controls['artist'].value, - GenreId: controls['genre'].value, - Price: controls['price'].value, - Title: controls['title'].value - }) + body: JSON.stringify(this.form.value) }).then(response => { console.log(response); }); @@ -77,6 +72,6 @@ export class AlbumEdit { } private static _validatePrice(control: ng.Control): { [key: string]: boolean } { - return /^\d+\.\d+$/.test(control.value) ? null : { price: true }; + return /^\d+\.\d+$/.test(control.value) ? null : { Price: true }; } }