public class Person
{
public int Id { get; set; }
public string Name { get; set; }
public int Age { get; set; }
} public class PeopleRepository
{
private List<Person> _people;
public PeopleRepository()
{
_people = new List<Person> {
new Person{ Id=1,Age=28,Name="Uthman"},
new Person{ Id=2,Age=27,Name="Vahid"},
new Person{ Id=3,Age=26,Name="Hadi"},
new Person{ Id=4,Age=25,Name="Saman"},
new Person{ Id=5,Age=20,Name="Sirwan"},
};
}
public List<Person> GetAll()
{
return _people;
}
} [Route("api/people")]
public class PeopleController : Controller
{
PeopleRepository _repository;
public PeopleController()
{
_repository = new PeopleRepository();
}
[HttpGet("")]
public IActionResult Get()
{
return Ok(_repository.GetAll());
}
[HttpGet("{id:int}")]
public IActionResult Get(int id)
{
return Ok(_repository.GetAll().FirstOrDefault(p => p.Id == id));
}
[HttpPost]
public IActionResult Post([FromBody]Person person)
{
return Ok(person);
}
[HttpPut("{id:int}")]
public IActionResult Put(int id,[FromBody] Person person)
{
if (id != person.Id)
return BadRequest();
return Ok(person);
}
[HttpDelete("{id:int}")]
public IActionResult Delete(int id)
{
return Ok();
}
[HttpPost("avatar")]
public IActionResult Post(IFormFile file)
{
return Ok();
}
} GET http://localhost:59416/api/people
تا به اینجا توانستیم فقط با نوشتن آدرس API مورد نظر، آن را فراخوانی کنیم.
برای ارسال پارامترهایی در هدر درخواست فقط کافیست دقیقا در خط پایین آدرس، به صورت field-name:field-value، هر پارامتری را که میخواهید، به همراه درخواست ارسال کنید. برای نمونه برای API لیست افراد که در بالا تست کردیم، میتوانیم هدر را به صورت زیر تنظیم نماییم :
GET http://localhost:59416/api/people Content-Type: application/json
اجرای درخواست GET برای دریافت یک شخص خاص
GET http://localhost:59416/api/people/1
خروجی آن به صورت زیر می‌باشد
درخواست POST برای درج کاربر جدید:
POST http://localhost:59416/api/people
content-type: application/json
{
"id": 10,
"name": "ali",
"age":37
} بعد از هدرهای درخواست، یک خط خالی ایجاد کنید و پایین‌تر از خط خالی، میتوانید مقادیر body درخواست را وارد نمایید.
درخواست PUT برای آپدیت یک شخص :
PUT http://localhost:59416/api/people/3
content-type: application/json
{
"id": 3,
"name": "ali",
"age":37
} درخواست DELETE برای حذف شخص:
DELETE http://localhost:59416/api/people/3 content-type: application/application/json
ارسال توکن اعتبارسنجی :
در صورتی که یک API نیاز به اعتبار سنجی دارد و باید توکن را به همراه درخواستی ارسال نمایید، میتوانید در هدر درخواست، همانند زیر، توکن را ارسال نمایید
GET http://localhost:59416/api/people content-type: application/json Authorization: Bearer token
آپلود فایل:
یکی از API هایی که در مثال ابتدای مقاله داشتیم، مربوط به آپلود فایل آواتار هست که از ورودی، یک IFormFile را به عنوان ورودی دریافت میکند. برای آپلود فایل به کمک افزونه Rest Client میتوانیم به صورت زیر فایل را ارسال نماییم
POST http://localhost:59416/api/people/avatar Content-Type: multipart/form-data; boundary=----MyBoundary ------MyBoundary Content-Disposition: form-data; name="file";filename="Studio" content-type: image/png < C:\Users\rahimi\Downloads\Studio.png ------MyBoundary--
قبل از آدرس فایل، وجود > ضروری می‌باشد.
فعال سازی دکمه Send Request به ازای هر آدرس:
اگر در یک فایل، چند آدرس را همانند عکس زیر داشته باشید، فقط یک دکمه‌ی Send Request وجود خواهد داشت که کلیک بر روی آن منجر به فراخوانی اولین url میشود.
برای داشتن یک دکمه Send Request به ازای هر API، باید بین هر کدام از API ها، حداقل سه تا # قرار دهید.
### Get All People
GET http://localhost:59416/api/people
content-type: application/json
### Get Person
GET http://localhost:59416/api/people/1
### Create
POST http://localhost:59416/api/people
content-type: application/json
{
"id": 10,
"name": "ali",
"age":37
}
### Edit person
PUT http://localhost:59416/api/people/3
content-type: application/json
{
"id": 3,
"name": "ali",
"age":37
}
### Delete person
DELETE http://localhost:59416/api/people/3
content-type: application/application/json
### Upload Avatar
POST http://localhost:59416/api/people/avatar
Content-Type: multipart/form-data; boundary=----MyBoundary
------MyBoundary
Content-Disposition: form-data; name="file";filename="Studio"
content-type: image/png
< C:\Users\rahimi\Downloads\Studio.png
------MyBoundary-- افزونه‌ی Rest Client، فراتر از توضیحات این مقاله می‌باشد. در صورت علاقه و برای مطالعه بیشتر در مورد آن، میتوانید به لینک صفحه افزونه مراجعه نمایید.
<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']);
});
}
} 
[TestMethod]
public void SearchForWatiNOnGoogle()
{
using (var browser = new IE("http://www.google.com"))
{
browser.TextField(Find.ByName("q")).TypeText("WatiN");
browser.Button(Find.ByName("btnG")).Click();
Assert.IsTrue(browser.ContainsText("WatiN"));
}
}[TestMethod]
public void SearchForWatiNOnGoogle()
{
using (var browser = new IE("http://www.google.com"))
{
browser.TextField(Find.ByName("q")).Value="WatiN";
browser.Button(Find.ByName("btnG")).ClickNoWait();
Thread.Sleep(3000);
Assert.IsTrue(browser.ContainsText("WatiN"));
}
}
بسیاری از الگوهای طراحی پایه، اکنون معادل‌های بهتر و ساده‌تری در دات نت پیدا کرده‌اند ...
