مدل ها بخشی از MVC هستند که ساختار پایگاه داده و چگونگی ارتباط میان آنها را نشان می دهند و آنها به کمک Entity Framework Core طراحی می شوند. کنترل گر وظیفه پردازش درخواست آمده از یک نشانی را دارد و از این رو بر پایه درخواست، مسئول ارتباط با مدل است تا داده ها را از مدل دریافت یا به مدل واگذار کند.

روش های فرستادن داده به فایل نما

به طور کلی سه روش برای فرستادن داده ها از یک کنترل گر به فایل نما هست که پیش از این درباره ۱) شیوه های به کارگیری ViewBag و ViewData گفته ایم. شیوه دیگر، ۲) شیوه پویا به کمک عبارت model@ است و شیوه پایانی، ۳) شیوه مدل به شدت وابسه به نوع (Strongly Typed Model) است.

فایل های نما و فرستادن داده به نما در ASP.NET Core MVC

مدل به شدت وابسته به نوع

یکی از برجسته ترین کارهایی که درون یک فایل نما باید انجام دهیم، نمایش داده های مدلی است که کنترل گر از مدل دریافت کرده و نما فرستاده است. Strongly Typed View نماهایی هستند که یک مدل ویژه را ارائه می دهند. برای این باید از عبارت model@ به کار می بریم. model یک واژه کلیدی درون Razor است که پیش از آن کاراکتر @ آمده است. اگر گمان کنیم نام پروژه ما AspNetCoreMvcBasic باشد و یک کلاس مدل به نام Employee درون پوشه Models داشته باشیم، برای دسترسی به مدل درون فایل نما، باید دستور زیر را در آغاز فایل نما بگذاریم. توجه کنید پایان دستور زیر کاراکتر سمی کالن ; نیست.

ساخت نما به شدت وابسته به نوع

در این نوشته می خواهیم یک برنامه بسیار ساده داده محور را بسازیم که در آن یک نما به شدت وابسته به مدل را می سازیم که داده های مدلی به نام Employee را نشان می دهد. بنابراین نخستین گام این است که یک کلاس به نام Employee درون پوشه Models بسازیم و سپس کدهای زیر را برای کلاس در آن وارد کنیم.

سپس به دنبال آن نیاز داریم تا یک کلاس کنترل گر به نام EmployeeController بسازیم که پیش فرض دارای یک متد به نام ()Index است که برگه خانگی (Index Page) را برای مسیرهای این کلاس نشان می دهد. همانگونه که در شکل زیر می بینید نشانی های https://127.0.0.1/employee و https://127.0.0.1/employee/index به مسیر Employee/Index برای متد ()Index از کلاس EmployeeController اشاره دارند.

سپس نیاز داریم تا یک فایل نما به نام index.cshml بسازیم، پس نخست باید یک زیر پوشه به نام Employee در زیر پوشه Views ساخته و سپس فایل نمای index.cshtml را در آن بسازید. کد زیر درون مایه فایل index.cshtml را نشان می دهد و می خواهیم چندین نکته را با آن آموزش دهیم. در آغاز آن دستور model AspNetCoreMvcBasic.Models.Employee@ نوشته شده است، پس یک فایل نما به شدت وابسته به مدل به نام Employee است.

همچنین در فایل نما دو متغیر به نام Title و Welcome را به کمک ViewData شناسانده ایم. نوشتن این دو متغیر در بدنه ای به گونه {}@ انجام شده است و پایان نوشتن هر متغیر کاراکتر سمی کالن نوشته ایم. نخستین متغیر، Title یک مقدار رشته ای است و مقدار آن میان تگ <title> نوشته می شود. پیش از این گفتیم که یک لایه سراسری درون فایل Views/Shared/_Layout.cshtml ساخته شده است که بدنه اصلی برگه های وب را در آن نوشته ایم که این بدنه اصلی دربرگیرنده بخش head و تگ title نیز می شود.

منغیر Welcome دارای یک رشته و روز و زمان چسبیده شده به آن است. این الحاق به کمک عملگر + انجام شده است. همچنین روز و زمان نیز به کمک متد ()Now از کلاس DateTime بدست آمده است. توجه کنید دستور  DateTime.Now@ مقداری را نشان می دهد٬ پس سرآغاز آن کاراکتر @ نوشته شده است و همچنین در فراخوانی متد نیازی به نوشتن پرانتزهای باز و بسته () نیست. بنابراین اگر بخواهیم برآیند متدی از یک کلاس را نشان دهیم، باید از الگوی ClassName.MethodName@ کمک بگیریم.

پایان هر خط درون بدنه {}@ باید سمی کالن داشته باشد.

سپس نیاز داریم تا یک متد تازه به نام ()EmployeeForm بسازیم که یک فرم HTML را اداره می کند. گونه برگشتی این متد از کلاس ViewResult است. همچنین نیاز است تا یک فایل نما به نام EmployeeForm.cshtml در زیر مسیر Views/Employee بسازیم که فرم درون آن نمایش داده می شود. توجه کنید که برگشتی متد ()EmployeeForm متد ()View از کلاس ViewResult است و هیچ پارامتری را دریافت نمی کند، پس به یک فایل cshtml همنام در مسیر مربوطه اشاره خواهد کرد.

asp-action در Razor

اکنون باید فایل Index.cshtml را کمی ویرایش کنیم که در آن می خواهیم یک فرم پیوند (Link) نمایش داده شود. در کد زیر یک نوشته در میان تگ h4 و یک تگ a برای یک پیوند داریم که درون آن یک ویژگی به نام asp-action نوشته شده است که به نام متد ()EmployeeForm اشاره دارد. در واقع asp-action یکی از ویژگی های Razor در ASP.NET Core MVC است که خودکار تگ href را درون a می افزاید. بنابراین با افزودن asp-action تگ href با یک نشانی به متد کنترلگر افزوده می شود و نیازی به نوشتن دستی نیست. در این نمونه متد کنترل گر ()EmployeeForm نام دارد پس نشانی https://127.0.0.1:5001/employee/employeeform به ویژگی href درون تگ a افزوده می شود. در واقع می خواهیم از درون برگه Index.cshtml صفحه با پیوندی به برگه EmployeeForm.cshtml اشاره کنیم.

  • برگه Index.cshtml در مسیر Views/Employee برگه خانگی کنترل گر EmployeeController است.
  • در برگه Index.cshtml یک پیوند به برگه EmployeeForm.cshtml داریم که به کمک تگ a و asp-action=EmployeeForm ساخته می شود.
  • درون برگه EmployeeForm.cshtml یک فرم برای دریافت داده ها برای مدل Employee داریم.

بنابراین اکنون فایل Index.cshtml که در مسیر Views/Employee ساخته بودیم را باید با تگ a و ویژگی asp-action ویرایش کنیم.

بنابراین بر پایه شکل بالا تا کنون یک پیوند به برگه Index.cshtml افزوده ایم که پیوندی به برگه EmployeeForm.cshtml است. اکنون باید درون مایه EmployeeForm.cshtml را بسازیم که دربرگیرنده یک فرم HTML است. در کد زیر می بینید که بازهم سرآغاز فایل نما عبارت model@ است که به کلاس مدل Employee اشاره می کند. سپس یک متغیر به نام Title به کمک ViewData نوشته ایم که عنوان برگه را نشان می دهد.

عبارت asp-for در Razor

بنابراین با تگ form یک فرم ساختیم که مقدارهایی را برای هر یک از ویژگی های کلاس مدل Employee دریافت می کند. توجه کنید چون در این برگه با مدل Employee سروکار داریم، پس در آغاز به کمک عبارت model@ این کلاس پیوست شده است. سپس برای هر یک از ویژگی های کلاس مدل یک تگ label و input افزوده ایم. درون تگ ها یک عبارت به نام asp-for به کار رفته که به ازای هر تگ label و input مقدار آن نام یکی از ویژگی های کلاس پیوست شده با model@ است. برای نمونه دوتایی label و input نخستین مقدار asp-for آنها Id است که یکی از ویژگی های کلاس Employee است و به همین گونه تا واپسین دوتایی label و input انجام شده است. در پایان یک دگمه با تگ button افزوده شده است. بنابراین شکل زیر نمایی از فایل EmployeeForm.cshtml را نشان می دهد.

در نوشته های پسین بیشتر درباره فرم ها و چگونگی اداره کردن و فرستادن و دریافت داده ها در متدهای کنترل گر می گوییم.

شکل زیر کدهای HTML فرم را نشان می دهد. پیش از هر چیز درون تگ form دو چیز نوشته شده است. method که در اینجا مقدار post گرفته، شیوه درخواست پروتکل HTTP را نشان می دهد. از میان شیوه های درخواست های HTTP، دو شیوه GET و POST رایج هستند که در نوشته پسین بیشتر درباره اداره کردن فرم های اچ تی ام ال و شیوه های درخواست های HTTP می گوییم. دومین، action است که به مسیر Employee/EmployeeForm اشاره می کند و در واقع نام کلاس کنترل گر و متدی را دریافت می کند که قرار است این فرم اچ تی ام ال را اداره کنند. در واقع پس از فشردن دگمه Submit، داده های فرم به این متد از این کلاس کنترل گر فرستاده می شوند. در دنباله می توانید ببینید که ویژگی name تگ های input با مقداری همنام با نام ویژگی ها مقداردهی شده اند. به یاد داشته باشید که برای دسترسی به مقدار فرستاده شده از هر یک از فیلدهای درون فرم، از مقدار ویژگی name آن فیلد کمک می گیریم. بنابراین فیلد name بسیار برجسته است، زیرا دسترسی به فیلدهای فم درون کنترل گر از راه آن انجام می شوند.

دریافت داده های فرم HTML

در این نوشته نمی خواهیم زیاد روی این تمرکز کنیم  و تنها چکیده وار خواهیم گفت که یک متد کلاس کنترل گر می تواند درخواست های GET یا POST (یاد دیگر شیوه ها) را اداره کند. بنابراین یک متد کنترل گر یا می تواند شیوه GET را با ویژگی [HttpGet] یا شیوه POST را با ویژگی [HttpPost] را اداره کند. همچنین یک متد می تواند هر دو شیوه را اداره کند که این نیاز به نوشتن دوبار متد دارد. در واقع در این باره از Override کردن کمک می گیریم. در مفاهیم شی گرایی Override کردن یعنی یک متد از کلاسی بیش از یک بار تعریف شود، یعنی می توانیم متدهای همنام داشته باشیم ولی به شرط آنکه تعریف پارامترهای ورودی آنها یکسان نباشد. در کد زیر و درون کلاس EmployeeController می بینید که متد ()EmployeeForm دوبار نوشته شده است، پس Override انجام داده ایم. سپس بالای هر یک به ترتیب ویژگی های [HttpGet] و [HttpPost] نوشته شده اند، پس متد ()EmployeeForm هر دو شیوه فرستادن درخواست ها GET و POST را اداره می کند. اینکه این دو چه تفاوتی دارند در نوشته های پسین گفته شده است ولی توجه کنید تعریف پارامترهای هر یک متفاوت است زیرا متد ()EmployeeForm که شیوه POST را اداره می کند، در اینجا کلاسی از گونه Employee را دریافت می کند که همان کلاس مدل است. توجه کنید که برای دسترسی به کلاس Employee در آغاز برنامه برای دسترسی به همه کلاس های مدل دستور using AspNetCoreMvcBasic.Models افزوده شده است که در اینجا AspNetCoreMvcBasic نام پروژه من است.

بنابراین در نوشته نشان دادیم که به کمک عبارت model@ می توانیم درون یک نما به یک مدل دسترسی داشته باشیم و به کمک آن در کنار دستورهای Razor مانند asp-action و asp-for یک فرم HTML را برای دریافت آن فرم به گونه خودکار بسازیم. برای نمونه با asp-action نشانی URL به برگه یک متد کنترل گر ساخته می شود و می توانیم آن را هرجایی مانند مقدار ویژگی href از تگ a به کار ببریم. همچنین asp-for به گونه خودکار نام ویژگی های یک کلاس مدل که بالای فایل نما پیوست شده اند را به ویژگی name از تگ هایی مانند input یا textbox یا checkbox و یا radio buuton می دهد، زیرا برای دسترسی به هر فیلد درون فرم، از مقدار ویژگی name آن کمک می گیریم. همچنین برای یک فرم می توانیم شیوه ای مانند post و get را برای مقدار ویژگی method تگ form به کار ببریم ولی به یاد داشته باشید، برای فرم ها همیشه method=post است. همچنین درون تگ form مقدار ویژگی action برابر با نام متد کنترل گری است که باید داده های فرستاده شده را پردازش کند که در اینجا متد ()EmployeeForm ای نوشته شده و آن هم متدی که بالای آن ویژگی [HttpPost] نوشته شده باشد.