Architecture with .NET Core 3.1, ASP.NET Core 3.1, Entity Framework Core 3.1, C#, Angular 9.1, Clean Code, SOLID, DDD, Code Analysis, Docker and more.
Technologies
Practices
In this webinar, we will show the benefits of using DevExpress Object-Relational Mapping Library - the eXpress Persistent Objects - with .NET Core 2. The presentation will quickly cover the basics for those new to DevExpress products, and will show how you can use our ORM to manage data in ASP.NET Core or Xamarin apps.
Templates for building React.js front-ends in ASP.NET Core and MVC5
dockerrun --name db` -d ` -p 3306:3306 ` -e MYSQL_ROOT_PASSWORD=my-secret-pw ` -v db:/var/lib/mysql` mysql dockerinspect db # extract ipaddress dockerrun --name web ` -d ` -p 8080:80 ` -e MY_DB_PORT=3306 ` -e MY_DB_HOST=? ` -v /my/php/app:/usr/share/nginx/html ` nginx
version: '2'
services:
db:
image: mysql
ports:
-3306:3306
environment:
-MYSQL_ROOT_PASSWORD=my-secret-pw
volumes:
-db:/var/lib/mysql
web:
image: nginx
ports:
-8080:80
environment:
-MY_DB_PORT=3306
-MY_DB_HOST=db
volumes:
-/my/php/app:/usr/share/nginx/html version: '2'
services:
teamcity:
image: sjoerdmulder/teamcity
ports:
- 8111:8111
teamcity-agent:
image: sjoerdmulder/teamcity-agent
environment:
- TEAMCITY_SERVER=http://teamcity:8111
postgres:
image: postgres
environment:
- POSTGRES_DB=teamcity 
docker ps docker exec -it teamcity_postgres_1 bash #exit
docker-compose exec postgres bash
#ping teamcity #exit
docker-compose exec postgres psql -U postgres postgres=#\l postgres=#\q
docker run --name apline -it --rm --net teamcity_default alpine sh
docker ps docker-compose ps docker volume ls docker network ls docker-compose stop docker-compose rm -v docker-compose down docker ps -a docker volume ls docker network ls
version: '3'
services:
db:
image: microsoft/mssql-server-windows-developer
environment:
sa_password: "Password1"
ACCEPT_EULA: "Y"
ports:
- "1433:1433" # REMARK: This is currently required, needs investigation
healthcheck:
test: [ "CMD", "sqlcmd", "-U", "sa", "-P", "Password1", "-Q", "select 1" ]
interval: 1s
retries: 30
web:
build:
context: .
dockerfile: Dockerfile.windows
environment:
- "Data:DefaultConnection:ConnectionString=Server=db,1433;Database=MusicStore;User Id=sa;Password=Password1;MultipleActiveResultSets=True"
depends_on:
- db
ports:
- "5000:5000" FROM microsoft/dotnet-nightly:2.0-sdk-nanoserver SHELL ["powershell", "-Command", "$ErrorActionPreference = 'Stop'; $ProgressPreference = 'SilentlyContinue';"] ENV NUGET_XMLDOC_MODE skip ENV DOTNET_SKIP_FIRST_TIME_EXPERIENCE 1 RUN New-Item -Path \MusicStore\samples\MusicStore -Type Directory WORKDIR app ADD samples/MusicStore/MusicStore.csproj samples/MusicStore/MusicStore.csproj ADD build/dependencies.props build/dependencies.props ADD NuGet.config . RUN dotnet restore --runtime win10-x64 .\samples\MusicStore ADD samples samples RUN dotnet publish --output /out --configuration Release --framework netcoreapp2.0 --runtime win10-x64 .\samples\MusicStore FROM microsoft/dotnet-nightly:2.0-runtime-nanoserver WORKDIR /app COPY --from=0 /out . EXPOSE 5000 ENV ASPNETCORE_URLS http://0.0.0.0:5000 CMD dotnet musicstore.dll
docker-compose -f .\docker-compose.windows.yml build docker-compose -f .\docker-compose.windows.yml up
Google Chrome 110 is anticipated to be released on February 7, 2023. Along with this, the company to end support of Chrome for Windows 7/8.1
This series of articles show "how" to achieve architecture with decoupled infrastructure concerns so that the end solution is simple to follow and maintain.
If your app makes use of two separate instances of the SQLite library, you can end up with a corrupted SQLite data file
npm install @angular/cdk
import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { DragDropModule } from '@angular/cdk/drag-drop';
import { FormsModule } from '@angular/forms';
@NgModule({
declarations: [ AppComponent ],
imports: [
BrowserModule,
FormsModule,
DragDropModule
],
bootstrap: [ AppComponent ]
})
export class AppModule {} <div cdkDrag> I'm Draggable </div>
<div cdkDrag cdkDragLockAxis="x"> I'm Draggable </div>
در ابتدا یک مدل را ایجاد می‌کنیم:
export interface Todo {
title: string;
type?: string;
}
فایل app.component.ts
export class AppComponent implements OnInit {
public title = 'Darg and drop';
public model: Todo;
public todo: Todo[];
public done: Todo[];
public cancelled: Todo[];
ngOnInit(): void {
this.setDefalutValue();
}
addItem(form, $event: Event) {
$event.preventDefault();
if (form.valid) {
if (this.model.type === 'todo') {
this.todo.push({ title: this.model.title });
} else {
this.done.push({ title: this.model.title });
}
} else {
alert('فرم معتبر نمی‌باشد . عنوان را وارد نمایید');
}
}
drop(event: CdkDragDrop<Todo[]>) {
if (event.previousContainer === event.container) {
moveItemInArray(event.container.data, event.previousIndex, event.currentIndex);
} else {
transferArrayItem(event.previousContainer.data, event.container.data, event.previousIndex, event.currentIndex);
}
}
private setDefalutValue() {
this.todo = [
{ title: 'خرید مواد غذایی' },
{ title: 'رفتن به خانه' },
{ title: 'خوابیدن' }
];
this.done = [
{ title: 'بیدار شدن' },
{ title: 'مسواک زدن' },
{ title: 'دوش گرفتن' },
{ title: 'چک کردن ایمیل' }
];
this.cancelled = [];
this.model = {
title: null,
type: 'todo'
};
}
}
در اینجا 3 آرایه یکی برای to-do و یکی برای Done و دیگری برای Cancelled ایجاد می‌کنیم و به هر کدام تعدادی آیتم را اضافه می‌کنیم.
addItem : زمانیکه فرم را submit می‌کنیم اجرا می‌شود .
drop : زمانی اجرا می‌شود که یک آیتم را Drag and Drop کنیم. در ایجا شرط event.previousContainer === event.container زمانی درست است که جابجایی در درون یک لیست باشد و هدف در این صورت، مرتب سازی است .
moveItemInArray : ایندکس آیتم‌ها را در همان لیست تغیر می‌دهد (مرتب سازی).
transferArrayItem: آیتم را از یک لیست حذف و به لیست دیگری اضافه می‌کند.
فایل app.component.html
<div>
<!-- فرم -->
<div>
<fieldset>
<legend>
اضافه کردن آیتم جدید
</legend>
<form #form="ngForm" (submit)="addItem(form,$event)">
<label></label>
<input type="text" required name="title" #name="ngModel" [(ngModel)]="this.model.title">
<label></label>
<select required name="type" #type="ngModel" [(ngModel)]="this.model.type">
<option value="todo">
انجام دادن
</option>
<option value="done">
انجام شده
</option>
</select>
<input type="submit" value="ذخیره">
</form>
</fieldset>
</div>
<!-- آیتم‌ها -->
<div>
<fieldset>
<legend>
لیست آیتم‌ها </legend>
<div>
<!-- انجام دادن -->
<div>
<p>
انجام دادن
</p>
<div cdkDropList #todoList="cdkDropList" [cdkDropListData]="todo" [cdkDropListConnectedTo]="[doneList, cancelledList]"
(cdkDropListDropped)="drop($event)">
<div *ngFor="let item of todo" cdkDrag>
<p> {{ item.title | titlecase }} </p>
</div>
</div>
</div>
<!-- انجام شده -->
<div>
<p>
انجام شده
</p>
<div cdkDropList #doneList="cdkDropList" [cdkDropListData]="done" [cdkDropListConnectedTo]="[todoList, cancelledList]"
(cdkDropListDropped)="drop($event)">
<div *ngFor="let item of done" cdkDrag>
<p> {{ item.title | titlecase }} </p>
</div>
</div>
</div>
<!-- انجام نشده -->
<div>
<p>
انجام نشده
</p>
<div cdkDropList #cancelledList="cdkDropList" [cdkDropListData]="cancelled" [cdkDropListConnectedTo]="[todoList, doneList]"
(cdkDropListDropped)="drop($event)">
<div *ngFor="let item of cancelled" cdkDrag>
<p> {{ item.title | titlecase }} </p>
</div>
</div>
</div>
</div>
</fieldset>
</div>
</div>
در ابتدا یک فرم داریم که در اینجا همه چیز مشخص است ( فرم‌های مبتنی بر قالب‌ها در Angular )
در ادامه 3 container را ایجاد می‌کنیم یکی برای to-do و یکی برای Done و در آخر یکی برای Cancelled
container ایجاد شده برای to-do :
<div cdkDropList #todoList="cdkDropList" [cdkDropListData]="todo" [cdkDropListConnectedTo]="[doneList, cancelledList]"
(cdkDropListDropped)="drop($event)">
<div *ngFor="let item of todo" cdkDrag>
<p> {{ item.title | titlecase }} </p>
</div>
</div>
توضیحات:
cdkDropList : یک container می‌باشد، برای آیتم‌هایی که قرار است Drag and Drop شوند.
todoList #:
id مربوط به container را مشخص می‌کند.
cdkDropListConnectedTo:
id مربوط به container های دیگری که می‌تواند آیتم های container جاری را بپذیرد.
cdkDropListData: مشخص کنند منبع داده است.
cdkDropListDropped: این رویداد زمانی اجرا می‌شود که Drag and Drop برای یک آیتم انجام شود.
cdkDrag: برای اینکه آیتم‌های درون یک container قابلیت Drag and Drop را داشته باشند، این دایرکتیو را اضافه می‌کنیم.
تمام !