تاکنون دو مطلب مشابه «
ساخت DropDownListهای مرتبط به کمک jQuery Ajax در MVC» و «
ایجاد Drop Down Listهای آبشاری توسط Kendo UI» را در مورد ساخت Cascading Drop-down Lists در این سایت مطالعه کردهاید. در اینجا قصد داریم چنین قابلیتی را توسط Angular پیاده سازی کنیم (بدون استفاده از هیچ کتابخانهی ثالث دیگری).
مدلهای سمت سرور برنامه
در این مطلب قصد داریم لیست گروهها را به همراه محصولات مرتبط با آنها، توسط دو drop down list نمایش دهیم:
public class Category
{
public int CategoryId { set; get; }
public string CategoryName { set; get; }
[JsonIgnore]
public IList<Product> Products { set; get; }
}
public class Product
{
public int ProductId { set; get; }
public string ProductName { set; get; }
}
از ویژگی
JsonIgnore جهت عدم درج لیست محصولات، در خروجی JSON نهایی تولیدی گروهها، استفاده شدهاست (و کتابخانهی JSON.NET، کتابخانهی پیش فرض کار با JSON در ASP.NET Core است).
منبع داده JSON سمت سرور
پس از مشخص شدن مدلهای برنامه، اکنون توسط دو اکشن متد، لیست گروهها و همچنین لیست محصولات یک گروه خاص را با فرمت JSON بازگشت میدهیم:
namespace AngularTemplateDrivenFormsLab.Controllers
{
[Route("api/[controller]")]
public class ProductController : Controller
{
[HttpGet("[action]")]
public async Task<IActionResult> GetCategories()
{
await Task.Delay(500);
return Json(CategoriesDataSource.Items);
}
[HttpGet("[action]/{categoryId:int}")]
public async Task<IActionResult> GetProducts(int categoryId)
{
await Task.Delay(500);
var products = CategoriesDataSource.Items
.Where(category => category.CategoryId == categoryId)
.SelectMany(category => category.Products)
.ToList();
return Json(products);
}
}
}
- بار اولی که صفحه بارگذاری میشود، توسط یک درخواست Ajax ایی، لیست گروهها دریافت خواهد شد. سپس با انتخاب یک گروه، اکشن متد GetProducts جهت بازگرداندن لیست محصولات آن گروه، فراخوانی میگردد. کدهای کامل CategoriesDataSource در فایل پیوستی انتهای بحث قرار داده شدهاست و یک منبع ساده درون حافظهای است.
- در اینجا از یک Delay نیز استفاده شدهاست تا بتوان آیکنهای چرخندهی Loading سمت کاربر را در حین کار با عملیاتی زمانبر، بهتر مشاهده کرد.
کدهای سمت کاربر برنامه
کدهای سمت کاربر این مثال در ادامهی همان مطلب «
فرمهای مبتنی بر قالبها در Angular - قسمت پنجم - ارسال اطلاعات به سرور» هستند که بر روی آن این دستورات فراخوانی شدهاست:
>ng g m Product -m app.module --routing
ماژول جدیدی به نام محصولات اضافه و به app.module معرفی شدهاست. البته پس از اصلاح، ProductModule بجای ProductRoutingModule در این فایل تنظیم خواهد شد.
>ng g c product/product-group
سپس یک کامپوننت جدید به نام ProductGroupComponent درون ماژول Product ایجاد شدهاست.
>ng g cl product/product
>ng g cl product/Category
>ng g cl product/product-group-form
در ادامه سه کلاس Product، Category و ProductGroupForm به این ماژول اضافه شدهاند که دو مورد اول، معادل کلاسهای مدل سمت سرور و مورد سوم، معادل فرم جدید ProductGroupComponent است:
export class ProductGroupForm {
constructor(
public categoryId?: number,
public productId?: number
) { }
}
export class Product {
constructor(
public productId: number,
public productName: string
) { }
}
export class Category {
constructor(
public categoryId: number,
public categoryName: string
) { }
}
سپس سرویسی را جهت دریافت اطلاعات دراپ داونها از سرور تهیه کردهایم:
>ng g s product/product-items -m product.module
با این محتوا:
import { Injectable } from "@angular/core";
import { Http, Response, Headers, RequestOptions } from "@angular/http";
import { Observable } from "rxjs/Observable";
import "rxjs/add/operator/do";
import "rxjs/add/operator/catch";
import "rxjs/add/observable/throw";
import "rxjs/add/operator/map";
import "rxjs/add/observable/of";
import { Category } from "./category";
import { Product } from "./product";
@Injectable()
export class ProductItemsService {
private baseUrl = "api/product";
constructor(private http: Http) { }
private handleError(error: Response): Observable<any> {
console.error("observable error: ", error);
return Observable.throw(error.statusText);
}
getCategories(): Observable<Category[]> {
return this.http
.get(`${this.baseUrl}/GetCategories`)
.map(response => response.json() || {})
.catch(this.handleError);
}
getProducts(categoryId: number): Observable<Product[]> {
return this.http
.get(`${this.baseUrl}/GetProducts/${categoryId}`)
.map(response => response.json() || {})
.catch(this.handleError);
}
}
از متد getCategories برای پر کردن اولین drop down استفاده خواهد شد و از متد دوم برای دریافت لیست محصولات متناظر با یک گروه انتخاب شده کمک میگیریم.
پس از این مقدمات اکنون میتوان کدهای ProductGroupComponent را تکمیل کرد.
ابتدا در متد ngOnInit آن کار دریافت لیست آغازین گروههای محصولات را انجام میدهیم:
export class ProductGroupComponent implements OnInit {
categories: Category[] = [];
model = new ProductGroupForm();
constructor(private productItemsService: ProductItemsService) { }
ngOnInit() {
this.productItemsService.getCategories().subscribe(
data => {
this.categories = data;
},
err => console.log("get error: ", err)
);
}
برای این منظور ابتدا ProductItemsService به سازندهی کلاس تزریق شدهاست تا بتوان به متدهای دریافت اطلاعات از سرور دسترسی یافت. سپس در متد ngOnInit، اطلاعات دریافتی به خاصیت عمومی categories انتساب داده شدهاست.
اکنون چون این خاصیت در دسترس است، میتوان به قالب این کامپوننت مراجعه کرده و قسمت ابتدایی فرم را تکمیل کرد:
<div class="container">
<h3>Cascading Drop-down Lists</h3>
<form #form="ngForm" (submit)="submitForm(form)" novalidate>
<div class="form-group">
<label class="control-label">Category</label>
<span class="glyphicon glyphicon-refresh glyphicon-spin spinner" *ngIf="categories.length == 0"></span>
<select class="form-control" name="categoryCtrl" #categoryCtrl (change)="fetchProducts(categoryCtrl.value)"
[(ngModel)]="model.categoryId">
<option value="undefined">Select a Category...</option>
<option *ngFor="let category of categories" value="{{category.categoryId}}">
{{ category.categoryName }}
</option>
</select>
</div>
- در اینجا اولین ngIf بکار گرفته شده، طول آرایهی categories (همان خاصیت عمومی معرفی شدهی در کامپوننت) را بررسی میکند. اگر این آرایه خالی باشد، یک آیکن چرخنده را نمایش میدهد.
- سپس ngModel به خاصیت categoryId وهلهای از کلاس ProductGroupForm که مدل معادل فرم است، متصل شدهاست.
- همچنین با اتصال به رخداد change، مقدار Id عضو انتخابی به متد fetchProducts ارسال میشود. دسترسی به این Id از طریق یک template reference variable به نام categoryCtrl# انجام شدهاست.
- در آخر، ngFor تعریف شده به ازای هر عضو آرایهی categories، یکبار تگ option را تکرار میکند و در هربار تکرار، مقدار ویژگی value را به categoryId تنظیم میکند و برچسب نمایشی آنرا از categoryName دریافت خواهد کرد.
بنابراین مرحلهی بعدی تکمیل این drop down آبشاری، واکنش نشان دادن به رخداد change و تکمیل متد fetchProducts است:
products: Product[] = [];
isLoadingProducts = false;
fetchProducts(categoryId?: number) {
console.log(categoryId);
this.products = [];
if (categoryId === undefined || categoryId.toString() === "undefined") {
return;
}
this.isLoadingProducts = true;
this.productItemsService.getProducts(categoryId).subscribe(
data => {
this.products = data;
this.isLoadingProducts = false;
},
err => {
console.log("get error: ", err);
this.isLoadingProducts = false;
}
);
}
- در ابتدای متد fetchProducts، آرایهی خاصیت عمومی products که به drop down دوم متصل خواهد شد، خالی میشود تا تداخلی با اطلاعات قبلی آن حاصل نشود.
- سپس بررسی میکنیم که آیا categoryId دریافتی undefined است یا خیر؟ این مساله دو علت دارد:
الف) اولین عضو drop down انتخاب محصولات را با مقدار undefined مشخص کردهایم:
<option value="undefined">Select a Category...</option>
ب) علت اینجا است که چون ngModel به model.categoryId متصل شدهاست و در این مدل، پارامتر و همچنین خاصیت عمومی categoryId از نوع optional است و با ؟ مشخص شدهاست:
public categoryId?: number
به همین جهت زمانیکه مدل را به این صورت تعریف میکنیم:
model = new ProductGroupForm();
مقدار categoryId همان undefined جاوا اسکریپت خواهد بود.
- پس از آن همانند قسمت قبل، این categoryId را به سرور ارسال کرده و سپس اطلاعات متناظری را دریافت و به خاصیت عمومی products نسبت دادهایم. همچنین از یک خاصیت عمومی دیگر به نام isLoadingProducts نیز استفاده شدهاست تا مشخص شود چه زمانی کار دریافت اطلاعات از سرور خاتمه پیدا میکند. از آن برای نمایش یک آیکن چرخندهی دیگر استفاده میکنیم:
<div class="form-group">
<label class="control-label">Product</label>
<span class="glyphicon glyphicon-refresh glyphicon-spin spinner" *ngIf="isLoadingProducts"></span>
<select class="form-control" name="productCtrl" [(ngModel)]="model.productId">
<option value="undefined">Select a Product...</option>
<option *ngFor="let product of products" value="{{product.productId}}">
{{ product.productName }}
</option>
</select>
</div>
به این ترتیب drop down دوم بر اساس مقدار خاصیت عمومی products تشکیل میشود. اگر مقدار isLoadingProducts مساوی true باشد، یک spinner که کدهای css آنرا در فایل src\styles.css به نحو ذیل تعریف کردهایم، نمایان میشود و برعکس. همچنین ngFor به ازای هر عضو آرایهی products یکبار تگ option را تکرار خواهد کرد.
/* Spinner */
.spinner {
font-size:15px;
z-index:10
}
.glyphicon-spin {
-webkit-animation: spin 1000ms infinite linear;
animation: spin 1000ms infinite linear;
}
@-webkit-keyframes spin {
0% {
-webkit-transform: rotate(0deg);
transform: rotate(0deg);
}
100% {
-webkit-transform: rotate(359deg);
transform: rotate(359deg);
}
}
@keyframes spin {
0% {
-webkit-transform: rotate(0deg);
transform: rotate(0deg);
}
100% {
-webkit-transform: rotate(359deg);
transform: rotate(359deg);
}
}
کدهای کامل این قسمت را از اینجا میتوانید دریافت کنید: angular-template-driven-forms-lab-06.zip
برای اجرای آن فرض بر این است که پیشتر Angular CLI را نصب کردهاید. سپس به ریشهی پروژه وارد شده و دو پنجرهی کنسول مجزا را باز کنید. در اولی دستورات
>npm install
>ng build --watch
و در دومی دستورات ذیل را اجرا کنید:
>dotnet restore
>dotnet watch run
اکنون میتوانید برنامه را در آدرس http://localhost:5000 مشاهده و اجرا کنید.