github/JavaScriptServices
1
1
Fork 0
mirror of https://github.com/aspnet/JavaScriptServices.git synced 2025-12-22 17:47:53 +00:00
Code Issues Packages Projects Releases Wiki Activity

Towards working forms

Browse Source
This commit is contained in:
SteveSandersonMS
2015-11-25 17:44:32 +00:00
parent dbc17acc62
commit 7ac0727813
4 changed files with 34 additions and 52 deletions
Download Patch File Download Diff File Expand all files Collapse all files

3
samples/angular/MusicStore/Apis/AlbumsApiController.cs
View File

@@ -113,8 +113,7 @@ namespace MusicStore.Apis
} }
[HttpPut("{albumId:int}/update")] [HttpPut("{albumId:int}/update")]
[Authorize("app-ManageStore")] public async Task<ActionResult> UpdateAlbum(int albumId, [FromBody] AlbumChangeDto album)
public async Task<ActionResult> UpdateAlbum(int albumId, [FromBody]AlbumChangeDto album)
{ {
if (!ModelState.IsValid) if (!ModelState.IsValid)
{ {

22
samples/angular/MusicStore/Infrastructure/ApiResult.cs
View File

@@ -1,7 +1,6 @@
using Microsoft.AspNet.Mvc; using Microsoft.AspNet.Mvc;
using Microsoft.AspNet.Mvc.ModelBinding; using Microsoft.AspNet.Mvc.ModelBinding;
using Newtonsoft.Json; using Newtonsoft.Json;
using System;
using System.Collections.Generic; using System.Collections.Generic;
using System.Linq; using System.Linq;
using System.Threading.Tasks; using System.Threading.Tasks;
@@ -13,16 +12,13 @@ namespace MusicStore.Infrastructure
public ApiResult(ModelStateDictionary modelState) public ApiResult(ModelStateDictionary modelState)
: this() : this()
{ {
if (modelState.Any(m => m.Value.Errors.Count > 0)) if (modelState.Any(m => m.Value.Errors.Any()))
{ {
StatusCode = 400; StatusCode = 400;
Message = "The model submitted was invalid. Please correct the specified errors and try again."; Message = "The model submitted was invalid. Please correct the specified errors and try again.";
ModelErrors = modelState ModelErrors = modelState
.SelectMany(m => m.Value.Errors.Select(me => new ModelError .Where(m => m.Value.Errors.Any())
{ .ToDictionary(m => m.Key, m => m.Value.Errors.Select(me => me.ErrorMessage ));
FieldName = m.Key,
ErrorMessage = me.ErrorMessage
}));
} }
} }
@@ -40,7 +36,7 @@ namespace MusicStore.Infrastructure
public object Data { get; set; } public object Data { get; set; }
[JsonProperty(NullValueHandling = NullValueHandling.Ignore)] [JsonProperty(NullValueHandling = NullValueHandling.Ignore)]
public IEnumerable<ModelError> ModelErrors { get; set; } public IDictionary<string, IEnumerable<string>> ModelErrors { get; set; }
public override Task ExecuteResultAsync(ActionContext context) public override Task ExecuteResultAsync(ActionContext context)
{ {
@@ -49,15 +45,7 @@ namespace MusicStore.Infrastructure
context.HttpContext.Response.StatusCode = StatusCode.Value; context.HttpContext.Response.StatusCode = StatusCode.Value;
} }
var json = new JsonResult(this); return new ObjectResult(this).ExecuteResultAsync(context);
return json.ExecuteResultAsync(context);
}
public class ModelError
{
public string FieldName { get; set; }
public string ErrorMessage { get; set; }
} }
} }
} }

26
samples/angular/MusicStore/wwwroot/ng-app/components/admin/album-edit/album-edit.html
View File

@@ -2,37 +2,37 @@
<hr /> <hr />
<form class="form-horizontal" [ng-form-model]="form" (ng-submit)="onSubmitModelBased()"> <form class="form-horizontal" [ng-form-model]="form" (ng-submit)="onSubmitModelBased()">
<form-field label="Artist" [validate]="form.controls.artist"> <form-field label="Artist" [validate]="form.controls.ArtistId">
<select class="form-control" ng-control="artist"> <select class="form-control" ng-control="ArtistId">
<option value="">-- choose Artist --</option> <option value="0">-- choose Artist --</option>
<option *ng-for="#artist of artists" [value]="artist.ArtistId">{{ artist.Name }}</option> <option *ng-for="#artist of artists" [value]="artist.ArtistId">{{ artist.Name }}</option>
</select> </select>
</form-field> </form-field>
<form-field label="Genre" [validate]="form.controls.genre"> <form-field label="Genre" [validate]="form.controls.GenreId">
<select class="form-control" ng-control="genre"> <select class="form-control" ng-control="GenreId">
<option value="">-- choose Genre --</option> <option value="0">-- choose Genre --</option>
<option *ng-for="#genre of genres" [value]="genre.GenreId">{{ genre.Name }}</option> <option *ng-for="#genre of genres" [value]="genre.GenreId">{{ genre.Name }}</option>
</select> </select>
</form-field> </form-field>
<form-field label="Title" [validate]="form.controls.title"> <form-field label="Title" [validate]="form.controls.Title">
<input class="form-control" type="text" ng-control="title"> <input class="form-control" type="text" ng-control="Title">
</form-field> </form-field>
<form-field label="Price" [validate]="form.controls.price"> <form-field label="Price" [validate]="form.controls.Price">
<div class="input-group"> <div class="input-group">
<span class="input-group-addon">$</span> <span class="input-group-addon">$</span>
<input class="form-control" type="text" ng-control="price"> <input class="form-control" type="text" ng-control="Price">
</div> </div>
</form-field> </form-field>
<form-field label="Album Art URL" [validate]="form.controls.albumArtUrl"> <form-field label="Album Art URL" [validate]="form.controls.AlbumArtUrl">
<input class="form-control" ng-control="albumArtUrl"> <input class="form-control" ng-control="AlbumArtUrl">
</form-field> </form-field>
<form-field label="Album Art"> <form-field label="Album Art">
<img src="{{ form.controls.albumArtUrl.value }}"> <img src="{{ form.controls.AlbumArtUrl.value }}">
</form-field> </form-field>
<form-field> <form-field>

35
samples/angular/MusicStore/wwwroot/ng-app/components/admin/album-edit/album-edit.ts
View File

@@ -23,14 +23,15 @@ export class AlbumEdit {
constructor(fb: ng.FormBuilder, http: Http, routeParam: router.RouteParams) { constructor(fb: ng.FormBuilder, http: Http, routeParam: router.RouteParams) {
this._http = http; 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(); var json = result.json();
this.originalAlbum = json; this.originalAlbum = json;
(<ng.Control>this.form.controls['title']).updateValue(json.Title); (<ng.Control>this.form.controls['Title']).updateValue(json.Title);
(<ng.Control>this.form.controls['price']).updateValue(json.Price); (<ng.Control>this.form.controls['Price']).updateValue(json.Price);
(<ng.Control>this.form.controls['artist']).updateValue(json.ArtistId); (<ng.Control>this.form.controls['ArtistId']).updateValue(json.ArtistId);
(<ng.Control>this.form.controls['genre']).updateValue(json.GenreId); (<ng.Control>this.form.controls['GenreId']).updateValue(json.GenreId);
(<ng.Control>this.form.controls['albumArtUrl']).updateValue(json.AlbumArtUrl); (<ng.Control>this.form.controls['AlbumArtUrl']).updateValue(json.AlbumArtUrl);
}); });
http.get('/api/artists/lookup').subscribe(result => { http.get('/api/artists/lookup').subscribe(result => {
@@ -42,11 +43,12 @@ export class AlbumEdit {
}); });
this.form = fb.group(<any>{ this.form = fb.group(<any>{
artist: fb.control('', ng.Validators.required), AlbumId: fb.control(albumId),
genre: fb.control('', ng.Validators.required), ArtistId: fb.control(0, ng.Validators.required),
title: fb.control('', ng.Validators.required), GenreId: fb.control(0, ng.Validators.required),
price: fb.control('', ng.Validators.compose([ng.Validators.required, AlbumEdit._validatePrice])), Title: fb.control('', ng.Validators.required),
albumArtUrl: 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 {
(<any>window).fetch(`/api/albums/${ albumId }/update`, { (<any>window).fetch(`/api/albums/${ albumId }/update`, {
method: 'put', method: 'put',
headers: { 'Content-Type': 'application/json' }, headers: { 'Content-Type': 'application/json' },
body: JSON.stringify({ body: JSON.stringify(this.form.value)
AlbumArtUrl: controls['albumArtUrl'].value,
AlbumId: albumId,
ArtistId: controls['artist'].value,
GenreId: controls['genre'].value,
Price: controls['price'].value,
Title: controls['title'].value
})
}).then(response => { }).then(response => {
console.log(response); console.log(response);
}); });
@@ -77,6 +72,6 @@ export class AlbumEdit {
} }
private static _validatePrice(control: ng.Control): { [key: string]: boolean } { 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 };
} }
} }