مدیریت درخواستهای PUT با Angular و ASP.NET Core Web API
شناسه پست: 3989
بازدید: 113

در این پست، ما به شما نشان می دهیم که چگونه درخواست های PUT را با Angular هنگام update کردن منابع توسط برنامه NET Core Web API server. مدیریت کنید.

بدون مقدمه، شروع میکنیم.

اگر می خواهید تمام آموزشهای لازم و پایه مربوط به آموزش گام به گام Angular را ببینید ، لطفاً روی این لینک کلیک کنید: مقدمه آموزش گام به گام Angular.

ساختار پوشه و Routing

قبل از هر اقدام به روز رسانی، باید فایل های component خود را ایجاد کنیم.

بنابراین، با استفاده از دستور Angular CLI آنها را ایجاد میکنیم که این دستور تمام فایل‌ها را ایجاد میکند و کامپوننت OwnerUpdate ایجاد شده را در فایل owner.module.ts ایمپورت میکنیم:

اکنون، برای ایجاد route به این component، باید آرایه routes را در فایل owner routing تغییر دهیم:

اکنون می‌خواهیم فایل‌های owner-list.component.html و owner-list.component.ts خود را تغییر دهیم تا navigation بین component های OwnerList و OwnerUpdate برقرار شود:

و در فایل ts. :

در این مرحله، ما rout خود را تعریف کرده ایم، و می توانیم برای handle کردن درخواست PUT به مرحله بعد برویم.

ایجاد Form برای Handle کردن درخواستهای PUT با Angular

فایل owner-update.component.html ما تقریباً مشابه فایل HTML برای ایجاد owner خواهد بود. از آنجایی که این چنین است، اجازه دهید پیاده سازی آن را شروع کنیم.

ابتدا، اجازه دهید کد wrappers را در فایل owner-update.component.html به این صورت اضافه کنیم:

ما از پست قبلی می دانیم که formGroup قرار است تمام کنترل های داخل مقدار خود را در بر داشته باشد. مقدار آن دقیقاً همان چیزی است که به عنوان پارامتر به اکشن updateOwner ارسال می کنیم.

ثانیا، ما می‌خواهیم کنترل‌های خود را بین تگ div card card-body ایجاد کنیم:

اینجا هر عنصر input حاوی یک ویژگی formControlName است که می‌خواهیم از آن در فایل component برای اعتبارسنجی استفاده کنیم. علاوه بر این، توابع validateControl و hasError توابع سفارشی هستند که به ما کمک می کنند پیام های خطا را نمایش دهیم (همان کاری که در کامپوننت CreateOwner انجام دادیم).

زیر آخرین عنصر <“div class=”mb-3 row>، می خواهیم دکمه ها را اضافه کنیم:

اکنون فایل HTML خود را در اختیار داریم و زمان آن رسیده است که business logic برای فایل owner-update.component را پیاده سازی کنیم.

Business Logic در فایل Component برای مدیریت درخواستهای PUT با Angular

با تمام import ها داخل فایل owner-update.component.ts شروع میکنیم:

در مرحله بعد، ویژگی های مورد نیاز را اضافه کرده و service های مورد نیاز را inject میکنیم:

در ادامه، باید تابع ngOnInit را تغییر داده و یک تابع دیگر را اضافه کنیم:

در تابع ngOnInit، ما ownerForm را با تمام کنترل‌های form نمونه‌سازی کرده و قوانین اعتبارسنجی را به آن اضافه می‌کنیم. سپس تابع getOwnerById را فراخوانی کرده تا owner را با id مورد نظر از سرور fetch کنیم.

در داخل این تابع، اقداماتی که برای ما آشنا هستند را اجرا می کنیم. id را از URI بیرون میکشیم و رشته API URI را ایجاد میکنیم، درخواست GET را ارسال کرده و response را چه success  باشد یا یک error پردازش میکنیم.

یکی از مواردی که باید به آن توجه کرد تبدیل مقدار dateOfBirth به قالبی است که در کنترل ورودی خود انتظار داریم آن را نمایش دهیم. ما اینجا از DatePipe برای تبدیل فرمت استفاده می کنیم.

اکنون باید توابع اعتبارسنجی خطا را اضافه کنیم:

اینها توابعی آشنا برای اعتبار سنجی فیلدهای ورودی هستند.

اکنون، قبل از ارسال درخواست PUT، می‌خواهیم یک interface دیگر اضافه کنیم:

و همچنین تابع updateOwner را در فایل owner-repository.service تغییر دهید:

در نهایت، ما به فایل component خود باز می گردیم و عمل update  را اجرا می کنیم:

این تقریباً همان logic تابع createOwner است. فقط اینکه ما اینجا هیچ پارامتری برای ویژگی :next نداریم: زیرا API ما یک object را به عنوان response به درخواست PUT بر نمی گرداند.

البته ما اینجا به تابع redirectToOwnerList نیز نیاز داریم:

حال می توانید آن را امتحان کرده و تعدادی update انجام دهید. سعی کنید response های از نوع success و error را در سرور ایجاد کرده تا component های modal را نیز تست کنید. سپس، می توانید بررسی کنید که آیا اعتبار سنجی فرم کار می کند یا خیر.

نتیجه گیری

در این مقاله، نحوه ایجاد template (HTML) به عنوان قسمتی از اقدام update، و همچنین اقداماتی را که باید در فایل component (.ts) اجرا کنیم را یاد گرفتیم.

در قسمت بعدی این آموزش گام به گام، قسمت delete پروژه را می نویسیم و کم کم قسمت کد نویسی این آموزش را با هم می بندیم.

نویسنده

امید عباسی
من امید عباسی هستم. سالهاست که در زمینه برنامه نویسی با تکنولوژی دات نت فعالیت میکنم و عاشق این هستم که تجربیات و دانش خودم را در این زمینه با دیگران به اشتراک بزارم. خیلی دوست دارم که نظر و انتقاد خودتون رو در مورد این نوشته برای من بنویسید تا بتونم در آینده، مطالب بهتر و ارزشمندتری را برای شما فراهم کنم. در صورت داشتن هرگونه سوال هم در قسمت دیدگاه ها میتونید با بنده در ارتباط باشید