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")]
[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)
{

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

@@ -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<ModelError> ModelErrors { get; set; }
public IDictionary<string, IEnumerable<string>> 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);
}
}
}

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

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