کاربرد HTML Helper در Strongly Typed View – جلسه ۳۰

HTML Helper in ASPNET Core Part 3 - Session30

در سی امین جلسه از آموزش ASP.NET Core، به بررسی کاربرد HTML Helper در Strongly Typed View خواهیم پرداخت. در جلسه 28 و جلسه 29ام این دوره آموزشی، یک فرم با استفاده از هلپرهای TextBox, TextArea, Label و DropDownList ایجاد نمودیم که در آنها از مدل ارسال شده به فرم استفاده نکردیم. در این جلسه قصد داریم همان فرم را در یک نمای Strongly Typed View ایجاد نموده و از هلپرهای TextBoxFor, TextAreaFor, LabelFor و DropDownListFor استفاده نماییم.

ایجاد نمای Strongly Typed View با استفاده از HTML Helper

برای تبدیل فرم ایجاد شده در جلسه 29ام، ابتدا ViewModel خود را جهت ارسال لیست آیتم‌‌های Drop Down List تغییر میدهیم تا قابلیت ارسال لیست را داشته باشد.

همانگونه که در قطعه کد فوق مشاهده میکنید، فیلد و یا خصوصیت Categories جهت ارسال لیست به مدل CraeteCostViewModel اضافه گردید.

سپس در کنترلر Cost یک اکشن متد جدید جهت ارسال داده به فرم جدید ایجاد خواهیم کرد.

سپس درون Action Method ایجاد شده یک لیست آیتم، مانند جلسه گذشته ایجاد میکنیم.

پس از آن، در ادامه یک Object از ViewModel خود ایجاد کرده و داده های مورد نظر و همچنین لیست مربوط به DropDownList را درون آن ذخیره میکنیم.

و در ادامه Object ایجاد شده را به نما ارسال میکنیم.

در این مرحله باید یک نما برای Action Method ایجاد کنیم. نمای مربوطه را ایجاد کرده و Model Directive آنرا به ViewModel خود متصل میکنیم.

سپس فرم را با استفاده از LabelFor, TextBoxFor, TextAreaFor و DropDownListFor طراحی میکنیم.

همانگونه که در قطعه کد فوق مشاهده کردید، برای Name, ID و همچنین داده‌های پیش فرض، نیازی به نوشتن کد استاتیک وجود ندارد. تمامی این موارد با اتصال هر هلپر به مدل توسط Lambda Expression (به عنوان مثال m=>m.comment) به صورت خودکار تنظیم میگردد.

همچنین امکان استفاده از Html Attribute در این هلپرها وجود دارد که در ادامه نحوه استفاده از آنرا مشاهده خواهید کرد.

در صورت نیاز به جزئیات بیشتر، میتوانید ویدئو آموزشی این جلسه را تماشا نمایید. همچنین برای آگاهی از جلسات بعدی این دوره آموزشی، ما را در اینستاگرام، تلگرام، یوتیوب و آپارات دنبال کنید. همچنین لیست کامل جلسات در این قسمت در دسترس شما میباشد.

تماشای ویدیو در یوتیوب ما

دانلود اسلایدهای آموزشی این جلسه از اینجا

برچسب ها

0 0 رای ها
امتیازدهی به مقاله
guest

0 نظرات
بازخورد (Feedback) های اینلاین
مشاهده همه دیدگاه ها
0
افکار شما را دوست داریم، لطفا نظر دهید.x