در این مقاله سعی شده مختصر و مفید نحوه استفاده از Mapster را به شما نمایش دهد.
اگرچه همچنان برنامه نویسان استفاده از automapper را ترجیح می‌دهند اما با توجه به اینکه استفاده از Mapster بسیار ساده است و به مراتب عملکرد بهتری از automapper داشته است توصیه بنده این است در پروژه هایتان از هردو کتابخانه استفاده کنید چرا که اضافه کردن Mapster به پروژه هزینه خاصی نخواهد داشت.
<img [src]='producr.imageUrl'>
<img src={{producr.imageUrl}}> <img src='http://www.mysite.com/images/{{producr.imageUrl}}'> <tbody>
<tr *ngFor='#product of products'>
<td>
<img [src]='product.imageUrl'
[title]='product.productName'>
</td>
<td>{{ product.productName }}</td>
<td>{{ product.productCode }}</td>
<td>{{ product.releaseDate }}</td>
<td>{{ product.price }}</td>
<td>{{ product.starRating }}</td>
</tr>
</tbody> 
export class ProductListComponent {
pageTitle: string = 'Product List';
imageWidth: number = 50;
imageMargin: number = 2;
products: any[] = [
// as before...
];
} <tbody> <tr *ngFor='#product of products'> <td> <img [src]='product.imageUrl' [title]='product.productName' [style.width.px]='imageWidth' [style.margin.px]='imageMargin'> </td>
<button (click)='toggleImage()'>
export class ProductListComponent {
pageTitle: string = 'Product List';
imageWidth: number = 50;
imageMargin: number = 2;
showImage: boolean = false; export class ProductListComponent {
// as before ...
toggleImage(): void {
this.showImage = !this.showImage;
}
} <button class='btn btn-primary' (click)='toggleImage()'> Show Image </button>
<tr *ngFor='#product of products'> <td> <img *ngIf='showImage' [src]='product.imageUrl' [title]='product.productName' [style.width.px]='imageWidth' [style.margin.px]='imageMargin'> </td>
<button class='btn btn-primary'
(click)='toggleImage()'>
{{showImage ? 'Hide' : 'Show'}} Image
</button> 
<input [(ngModel)]='listFilter' >
export class ProductListComponent {
pageTitle: string = 'Product List';
imageWidth: number = 50;
imageMargin: number = 2;
showImage: boolean = false;
listFilter: string = 'cart'; <div class='panel-body'>
<div class='row'>
<div class='col-md-2'>Filter by:</div>
<div class='col-md-4'>
<input type='text'
[(ngModel)]='listFilter' />
</div>
</div>
<div class='row'>
<div class='col-md-6'>
<h3>Filtered by: {{listFilter}}</h3>
</div>
</div> 
{{ product.productCode | lowercase }} [title]='product.productName | uppercase'
{{ product.price | currency | lowercase }} {{ product.price | currency:'USD':true:'1.2-2' }} <td>{{ product.productName }}</td>
<td>{{ product.productCode | lowercase }}</td>
<td>{{ product.releaseDate }}</td>
<td>{{ product.price | currency:'USD':true:'1.2-2'}}</td>
<td>{{ product.starRating }}</td> 
<form #f="ngForm" (ngSubmit)="onSubmit(f.form)">
<div class="panel panel-default">
<div class="panel-heading">
<h3 class="panel-title">
Add Product
</h3>
</div>
<div class="panel-body form-horizontal">
<div class="form-group">
<label for="productName" class="col col-md-2 control-label">Name</label>
<div class="controls col col-md-10">
<input ngControl="productName" id="productName" required
#productName="ngForm"
(change)="log(productName)"
minlength="3"
type="text" class="form-control"
[(ngModel)]="productModel.productName"/>
<div *ngIf="productName.touched && productName.errors">
<label class="text-danger" *ngIf="productName.errors.required">
Name is required.
</label>
<label class="text-danger" *ngIf="productName.errors.minlength">
Name should be minimum {{ productName.errors.minlength.requiredLength }} characters.
</label>
</div>
</div>
</div>
<div class="form-group">
<label for="productCode" class="col col-md-2 control-label">Code</label>
<div class="controls col col-md-10">
<input ngControl="productCode" id="productCode" required
#productCode="ngForm"
type="text" class="form-control"
[(ngModel)]="productModel.productCode"/>
<label class="text-danger" *ngIf="productCode.touched && !productCode.valid">
Code is required.
</label>
</div>
</div>
<div class="form-group">
<label for="releaseDate" class="col col-md-2 control-label">Release Date</label>
<div class="controls col col-md-10">
<input ngControl="releaseDate" id="releaseDate" required
#releaseDate="ngForm"
type="text" class="form-control"
[(ngModel)]="productModel.releaseDate"/>
<label class="text-danger" *ngIf="releaseDate.touched && !releaseDate.valid">
Release Date is required.
</label>
</div>
</div>
<div class="form-group">
<label for="price" class="col col-md-2 control-label">Price</label>
<div class="controls col col-md-10">
<input ngControl="price" id="price" required
#price="ngForm"
type="text" class="form-control"
[(ngModel)]="productModel.price"/>
<label class="text-danger" *ngIf="price.touched && !price.valid">
Price is required.
</label>
</div>
</div>
<div class="form-group">
<label for="description" class="col col-md-2 control-label">Description</label>
<div class="controls col col-md-10">
<textarea ngControl="description" id="description" required
#description="ngForm"
rows="10" type="text" class="form-control"
[(ngModel)]="productModel.description"></textarea>
<label class="text-danger" *ngIf="description.touched && !description.valid">
Description is required.
</label>
</div>
</div>
<div class="form-group">
<label for="imageUrl" class="col col-md-2 control-label">Image</label>
<div class="controls col col-md-10">
<input ngControl="imageUrl" id="imageUrl" required
#imageUrl="ngForm"
type="text" class="form-control"
[(ngModel)]="productModel.imageUrl"/>
<label class="text-danger" *ngIf="imageUrl.touched && !imageUrl.valid">
Image is required.
</label>
</div>
</div>
</div>
<footer class="panel-footer">
<button [disabled]="!f.valid"
type="submit" class="btn btn-primary">
Submit
</button>
</footer>
</div>
</form> import { Component } from 'angular2/core';
import { Router } from 'angular2/router';
import { IProduct } from './product';
import { ProductService } from './product.service';
@Component({
//selector: 'product-form',
templateUrl: 'app/products/product-form.component.html'
})
export class ProductFormComponent {
productModel = <IProduct>{}; // creates an empty object of an interface
constructor(private _productService: ProductService, private _router: Router) { }
log(productName): void {
console.log(productName);
}
onSubmit(form): void {
console.log(form);
console.log(this.productModel);
this._productService.addProduct(this.productModel)
.subscribe((product: IProduct) => {
console.log(`ID: ${product.productId}`);
this._router.navigate(['Products']);
});
}
} <div class="form-group"> <label for="description" class="col col-md-2 control-label">Description</label> <div class="controls col col-md-10"> <textarea ngControl="description" id="description" required #description="ngForm" rows="10" type="text" class="form-control" [(ngModel)]="productModel.description"></textarea> <label class="text-danger" *ngIf="description.touched && !description.valid"> Description is required. </label> </div> </div>
<input ngControl="productName" id="productName" required #productName="ngForm" (change)="log(productName)" minlength="3" type="text" class="form-control" [(ngModel)]="productModel.productName"/>
<textarea ngControl="description" id="description" required #description="ngForm" rows="10" type="text" class="form-control"></textarea> <div class="alert alert-danger" *ngIf="description.touched && !description.valid"> Description is required. </div>
.ng-touched.ng-invalid{
border: 1px solid red;
} 
<div class="alert alert-danger" *ngIf="productName.touched && !productName.valid"> Name is required. </div>
<div *ngIf="productName.touched && productName.errors"> <div class="alert alert-danger" *ngIf="productName.errors.required"> Name is required. </div> <div class="alert alert-danger" *ngIf="productName.errors.minlength"> Name should be minimum 3 characters. </div> </div>
<div *ngIf="productName.touched && productName.errors">
{{ productName.errors | json }} Name should be minimum {{ productName.errors.minlength.requiredLength }} characters. <form #f="ngForm" (ngSubmit)="onSubmit(f.form)">
onSubmit(form): void {
console.log(form);
} 
<button [disabled]="!f.valid" type="submit" class="btn btn-primary"> Submit </button>
//same as before...
import { ProductFormComponent } from './products/product-form.component';
@Component({
//same as before…
template: `
//same as before…
<li><a [routerLink]="['AddProduct']">Add Product</a></li>
//same as before…
`,
//same as before…
})
@RouteConfig([
//same as before…
{ path: '/addproduct', name: 'AddProduct', component: ProductFormComponent }
])
//same as before... 
productModel = <IProduct>{}; // creates an empty object of an interface <textarea ngControl="description" id="description" required #description="ngForm" rows="10" type="text" class="form-control" [(ngModel)]="productModel.description"></textarea>
addProduct(product: IProduct): Observable<IProduct> {
let headers = new Headers({ 'Content-Type': 'application/json' }); // for ASP.NET MVC
let options = new RequestOptions({ headers: headers });
return this._http.post(this._addProductUrl, JSON.stringify(product), options)
.map((response: Response) => <IProduct>response.json())
.do(data => console.log("Product: " + JSON.stringify(data)))
.catch(this.handleError);
} [HttpPost]
public ActionResult AddProduct(Product product)
{ import { Headers, RequestOptions } from 'angular2/http'; //Same as before…
import { IProduct } from './product';
import { ProductService } from './product.service';
@Component({
//Same as before…
})
export class ProductFormComponent {
productModel = <IProduct>{}; // creates an empty object of an interface
constructor(private _productService: ProductService, private _router: Router) { }
//Same as before…
onSubmit(form): void {
console.log(form);
console.log(this.productModel);
this._productService.addProduct(this.productModel)
.subscribe((product: IProduct) => {
console.log(`ID: ${product.productId}`);
this._router.navigate(['Products']);
});
}
} 
Tailwind CSS is self-described as a utility first CSS framework.
Rather than focusing on the functionality of the item being styled,
Tailwind is centered around how it should be displayed. This makes it
easier for the developer to test out new styles and change the layout.
Additional information: The ForeignKeyAttribute on property 'User' on type 'Models.Project' is not valid. The foreign key name 'FK_User_Id' was not found on the dependent type 'Models.Project'. The Name value should be a comma separated list of foreign key property names
.NET Core 5 is open source on GitHub
Microsoft will support .NET Core 5 on Windows, Linux and Mac.
Microsoft has contributed .NET Core 5 to the .NET Foundation
.NET Framework 4.6 reference source now uses the MIT license
Renewed collaboration with the Mono Project
