پروژه‌ی طراحی سایت با ASP.NET Core MVC – طراحی فرم ورود اطلاعات

با سلامت خدمت تمامی همراهان سایت میزفا ، با یکی دیگر از جلسات آموزش طراحی سایت با نحوه اتصال action method ها به وسیله لینک آشنا شدیم در این جلسه از .NET Core قصد داریم تا فرم ورود اطلاعات را طراحی کنیم.

ایجاد فرم ورود داده ها

پس از ایجاد نمایی که به داده ها مقید است و امکان دسترسی به آن از نمای Index ، نوبت تهیه محتوای صفحه Create.cshtml برای ویرایش اشیا ایجاد شده از کلاس GuestResponse رسیده است.

محتوای ویوی Create را ویرایش کرده و کدهای زیر در آن جایگزین کنید در ادامه‌ی این مقاله آموزشی به شما نحوه ایجاد این فرم را آموزش خواهم داد پس اگر با دیدن این کدها گیج شده اید نگران نباشید.

برای هر یک از خاصیت‌های تعریف شده در کلاس مدل GuestResponse یک عنصر Input و یک عنصر label تعریف شده است . هر یک از این عناصر به وسیله صفت asp-for که یک Tag Helper دیگر است به خصوصیتی از کلاس مدل متصل شده اند. در ادامه مثالی از کد اچ تی ام الی که Tag Helper های یاد شده ایجاد می‌کنند را می‌بینید.

</p>

صفت asp-for در عنصر label تعیین کننده مقدار صفت for است (صفت for مربوط به تگ یا عنصر label معمولی ) به همین شکل صفت asp-for در عنصر input تعیین کننده‌ی مقدار صفت های id و name این عنصر است . این موضوع ممکن است هم اینک زیاد مهم به نظر نرسد ولی در آینده با فواید مهم تری از متصل کردن عناصر HTML با خصوصیات مدل داده آشنا خواهید شد.

صفت asp-action که در عنصر form به کار رفته در اینجا از اهمیت بیشتری برخوردار است این صفت با استفاده از پیکربندی مسیرهای پروژه در مورد URL ها ، صفت action (مربوط به عنصر form) را به فرمی تنظیم می‌کند که متد اکشن خاصی در کنترلر را هدف گیری کند :

 <form  method='post' action='/WellCome/Create'>

معنی آن این است که اطلاعات فرم با روش post ( با استفاده از هدرهای HTTP) برای متد اکشن Create در کنترلر WellCome فرستاده می شوند. اجرای برنامه و کلیک بر روی لینک “ثبت نام در جشن” در ویوی Index فرم ساخته شده با Tag Helper ها را نمایش می‌دهد. من برای زیباتر شدن فرم ورود اطلاعات از کلاس های بوت استرپ استفاده کردم شما هم می‌توانید برای زیباتر نمودن تگ input از کلاس form-control و برای دکمه ها از کلاس btn و برای تغییر رنگ دکمه از کلاس های btn-danger ، btn-success ، btn-primary و … استفاده کنید .

حال پروژه رو اجرا کنید و آدرس /WellCome/Create/ را در نوار آدرس اضافه کنید فرمی به شکل زیر مشاهده می‌نمایید.

بسیار خب ، به پایان این جلسه اموزشی رسیدیم در صورتی که سوالی پیرامون مقالات آموزش ASP.NET Core داشتید حتما در قسمت نظرات این مقاله‌ی آموزشی مطرح کنید.

• 
  
  
  
  منبع: میزفا
  

• 
  
  
  برچسب:
  
  آموزش Core MVC