スキップしてメイン コンテンツに移動

投稿

[Angular][ASP.NET Core] Upload chunked files

Intro I wanted to send files to Web application (made by ASP.NET Core). If the file size had been small, I didn't need do any special things. But when I tried to send a large file, the error was occurred by ASP.NET Core's limitation. Though I could change the settings, but I didn't want to do that, because I hadn't known the file sizes what would been actually using. So I splitted the data into chunks first, and sent them. After receiving all chunks, I merged them into one file. There might be some libraries or APIs (ex. Stream API) what did them automatically, but I couldn't find them. What I did [ASP.NET Core] Make CORS enabled [Angular] Split a large file into chunks [Angular][ASP.NET Core] Send and receive data as form data [ASP.NET Core] Merge chunks into one file [ASP.NET Core] Make CORS enabled Because the client side application(Angular) and the server side application(ASP.NET Core) had been separated, I had to make CORS(Cross-Origin Requests) ...

[Angular]Transfer data between the components

Create pages with Angular Create pages with Angular 1 Create pages with Angular 2 Create pages with Angular 3 What I did getting/setting data for select tag transfer data between parent component and child components getting/setting data for select tag I got list items from service and added options to selectbox. favorite.ts export interface Favorite { displayValue: string; favoriteId: number; } favorite.service.ts import {Injectable} from '@angular/core'; import {Favorite} from './favorite'; @Injectable({ providedIn: 'root' }) export class FavoriteService { public static favorites: Array<Favorite> = [ { displayValue: '☆', favoriteId: 1}, { displayValue: '☆☆', favoriteId: 2}, { displayValue: '☆☆☆', favoriteId: 3}, ]; constructor() { } } product-cell.component.ts import { Component, OnInit, Input } from '@angular/core'; import {CellComponent} from '../cell.component'; import {Product...

Create pages with Angular 3

Create pages with Angular Create pages with Angular 1 Create pages with Angular 2 Data bindings with Pikaday Last time, I didn't know how to use Two-way data bindings to the element what was set date by Pikaday. According to the document, I could separate [(ngModel)]="dateText" like below. Before &ltinput type="text" id="datepicker" [(ngModel)]="dateText"> After &ltinput type="text" id="datepicker" [value]="dateText" (input)="dateText=$event.target.value" > And because when Pikaday set text, the input event wasn't fired, thus I got nothing. So I changed the event. &ltinput type="text" id="datepicker" [value]="dateText" (change) ="dateText=$event.target.value"> Template Syntax - Angular Background color for IE11 When I had set background-color like "background-color:#000000AA", the color wasn't shown ...

Create pages with Angular 2

Create pages with Angular Create pages with Angular 1 Create child components I could add a child component to top-page component like below. ng g component top-page/product-ranking product-ranking folder was made under the top-page folder. src L app L top-page L product-ranking L product-ranking.component.css ... Base size I thought, the important thing was the base size of component was affected by the parent component. Although there had been some parent elements, the child component's size ignored them. For example, I generated two components on the same directory, and made parent-child relationship by HTML template. src L app L top-page L product-ranking // component L product-ranking-block // component L product-cell // component product-ranking.component.html <div id="product-ranking-area"> <div id="product-ranking-frame"> <div id=...

Create pages with Angular 1

What I did I created some pages with Angular. Because I wanted to use on my work, I had to add compatibility of IE11. The structure of pages Top page L Page1 L Page2 L Contents1 L Contents2 * Contents1 and Contents2 were shown and hidden by URL parameter. Setup Environments npm : ver.6.13.1 Angular : ver.8.2.14 Angular-cli : ver.8.3.19 VSCode : ver.1.41.0-insider Create project ng new product-sample I didn't add router, and I choosed CSS. Read configuration file Angular How-to: Editable Config Files - Premier Developer First, I added config file. Most of all things I did were written in the blog. First, I tried using DI and calling load method in AppConfig's constructor. But when I had done like that, I couldn't use in the class constructors and ngOnInits what had been depended on AppConfig. Because at that time, the loading had not been finished yet, so I could get undefined. app-config.service.ts (failed) import { ...

[ASP.NET Core 3.0] Sign in with Identity

Today I tried authentication by ASP.NET Core Identity. What I did 1. Create custom IdentityUser 2. Create a route for authentication 3. After authentication, access authorized route Setup Most of all environments were same as previous post. I only installed Microsoft.AspNetCore.Identity.EntityFrameworkCore (ver.3.0.0) by NuGet. Add user table I added user table to DB. CREATE TABLE "User" ( "UserId" serial PRIMARY KEY, "Name" text not null, "Password" text not null ) 1. Create custom IdentityUser First, I created custom IdentityUser for signing in. Because the default IdentityUser had had so many properties. But I only wanted three things below. Id UserName Password ApplicationUser I could created custom user class by inheritting IdentityUser class. ApplicationUser.cs using System; using System.ComponentModel.DataAnnotations; using System.ComponentModel.DataAnnotations.Schema; using Microsoft.AspNetCore.Identity; names...

Upgrade from ASP.NET Core 2.2 to 3.0

Conguratulations on the releasing .NET Core 3.0 and ASP.NET Core 3.0! Today's theme is about upgrading ASP.NET Core from ver.2.2 to ver.3.0. What I did Creating an empty ASP.NET Core project(ver.2.2.402) Adding EntityFrameworkCore by NuGet Adding some codes Upgrading to ver.3.0.100 Fixing some problems Setup Environments .NET Core : ver.2.2.402, ver.3.0.100 Microsoft.EntityFrameworkCore : ver.2.2.6, ver.3.0.0 Npgsql.EntityFrameworkCore.PostgreSQL : ver.2.2.4, ver.3.0.1 Windows10 : ver.1903 Rider : ver.2019.2.3 PostgreSQL : ver.12.0 Creating the base project UpgradeSample.csproj <Project Sdk="Microsoft.NET.Sdk.Web"> <PropertyGroup> <TargetFramework>netcoreapp2.2</TargetFramework> <AspNetCoreHostingModel>InProcess</AspNetCoreHostingModel> </PropertyGroup> <ItemGroup> <PackageReference Include="Microsoft.AspNetCore.App" /> <PackageReference Include=...