آموزش ایجاد View ها

ایجاد View ها

اکنون شرایط برای ایجاد کدی که عملیات استاندارد و متداول داده را برای کلاس model ارائه می دهد، فراهم شده است. کد مورد نظر را با راست کلیک بر روی پوشه ی controller در سمت چپ محیط ویژوال و انتخاب Add، New Scaffolded Item به پروژه اضافه می کنید. برای نوع scaffolding ای که می خواهید اضافه کنید، گزینه های متعددی پیش رو دارید. در آموزش حاضر، scaffold ای که اضافه خواهیم کرد، شامل controller و view هایی می باشد که معادل model های Student و Enrollment ای است که در بخش قبل ایجاد کردید.
جهت حفظ سازگاری در سراسر پروژه ی خود، controller جدید را به پوشه ی جاری Controller اضافه کنید. بر روی پوشه ی Controllers راست کلیک کرده و Add – New Scaffolded Item را انتخاب کنید.

حال گزینه ی MVC 5 Controller with views, using Entity Framework را انتخاب کنید. گزینه ی ذکر شده controller و view های مورد نیاز برای بروز رسانی، حذف، ایجاد و نمایش داده ها در model را ایجاد می نماید.

در کادر Model class، Student و در کادر Data context class، ContosoUniversityEntities را انتخاب نمایید. اسم controller را همان StudentsController نگه داشته و تغییر نمی دهیم.

Add را کلیک کنید.
در صورت دریافت خطا، بدانید که پروژه را در بخش قبلی کامپایل (Build) نکرده اید. برای برطرف ساختن این مشکل، می بایست پروژه را کامپایل کرده، سپس scaffolded item را بار دیگر اضافه کنید.

همان مراحل را مجددا دنبال کنید، اما این بار یک scaffold نیز برای کلاس Enrollment اضافه نمایید. پس از اتمام این کار، می بایست یک فایل EnrollmentsController.cs و یک پوشه به نام Enrollments در زیر views به ضمیمه ی نمایه هایی برای Delete، Create، Details، Edit و Index آماده داشته باشید.

افزودن لینک هایی به view های جدید

جهت سهولت در پیمایش به view های جدید خود، می توانید تعدادی لینک به Index view های خود ویژه ی students و enrollments اضافه کنید. فایل مورد نظر را در فایل Views/Home/Index.cshtml، که صفحه ی اصلی یا همان home page سایت شما است، باز کنید. این کد را در زیر jumbotron اضافه کنید.

  
@Html.ActionLink("List of students", "Index", "Students")
    @Html.ActionLink("List of enrollments", "Index", "Enrollments")

اولین پارامتر متد ActionLink، همان متن لینک می باشد. دومین پارامتر متد مذکور، action (عملیات) و سومین پارامتر اسم controller مورد نظر را مشخص می کند. به عنوان مثال، اولین لینک به عملیات Index در StudentsController اشاره می کند. خود لینک از این مقادیر ساخته می شود. اولین لینک کاربران را به فایل Index.cshtml در داخل پوشه ی Views/Students هدایت می کند.

نمایش دادن view های Student

در این بخش مطمئن می شوید که کد اضافه شده به پروژه فهرستی از دانشجویان (همان طور که در تصویر زیر مشاهده می کنید، لینک list of students) را در view به نام Index نمایش می دهد و همچنین به کاربر اجازه ی انجام عملیات ویرایش، ایجاد و حذف بر روی سطرهای student در پایگاه داده ی مربوطه را می دهد.
بر روی فایل Views/Home/Index.cshtml راست کلیک کرده و گزینه ی View in Browser را انتخاب نمایید. در این صفحه بر روی لینک List of students در زیر تصویر و بالای لینک list of enrollments کلیک کنید.

درتصویر زیر فهرست دانشجویان و لینک هایی برای ویرایش اطلاعات آن ها را مشاهده می کنید.

لینک Create New را کلیک کرده و مقدارهای لازم برای دانشجوی جدید را وارد نمایید.

پس از کلیک بر روی لینک Create، می بینید که دانشجوی جدید به لیست شما اضافه شده است.

حال لینک Edit را کلیک کرده، مقادیر وارد شده برای دانشجوی مورد نظر را تغییر دهید.

با کلیک بر روی دکمه ی Save، خواهید دید که سطر مد نظر اصلاح شده و تغییرات مربوط به آن ذخیره گردیده است.
در نهایت عملیات حذف را برای یک سطر پیاده می کنیم. برای این منظور، کافی است لینک Delete را کلیک کرده و سپس دکمه ی Delete را فشار دهید تا رکورد دلخواه پاک شود.

بدون هیچ گونه زحمت کدنویسی، view هایی اضافه کردیم که عملیات رایجی همچون حذف، اضافه و ویرایش و غیره .. را بر روی داده های موجود در جدول Student اجرا می کنند.
حتما متوجه شدید که برچسب متنی (text label) یک فیلد بر اساس فیلد پایگاه داده (database property) انتخاب شده (مانند LastName) که شاید دقیقا آن چیزی نیست که می خواهید بر روی صفحه ی وب نمایش داده شود. برای مثال، می خواهید برچسب فیلد بجای LastName، باشد Last Name. این مشکل را بعدا در این سری آموزشی برطرف خواهیم کرد.

نمایش دادن view های enrollment

پایگاه داده ی شما شامل یک رابطه ی یک به چند بین جداول Enrollment و Student و (همچنین یک رابطه ی یک به چند) بین جداول Course و Enrollment می باشد. View های با نام Enrollment به درستی این رابطه ها را مدیریت می کند. به صفحه ی اصلی سایت خود مراجعه کرده و لینک List of enrollments را انتخاب نموده و سپس لینک Create New را کلیک کنید. View مورد نظر یک فرم نمایش می دهد که در آن می توان یک سطر enrollment جدید ایجاد کرد. توجه ویژه ای به دو drop-down list (فهرست کشویی) فرم حاضر داشته باشید. دو لیست مزبور با داده هایی از جداول مربوطه پر شده است.

بعلاوه، اعتبارسنجی مقادیر ارائه شده به صورت خودکار و بر اساس نوع داده ای فیلد مورد نظر اعمال می شود (مقادیر وارد شده با نوع داده ی مجاز در فیلد مقایسه می شود). در داخل فیلد Grade فقط عدد می توان وارد کرد، بنابراین اگر در آن یک مقدار غیرمجاز مانند حرف وارد کنید، یک پیام خطا نمایش داده می شود.

در این مبحث view هایی که بدون کدنویسی و به صورت خودکار ایجاد شده را بررسی کرده و اطمینان حاصل کردیم که به کاربر این امکان را می دهند که با داده های موجود در پایگاه داده کار کرده و آن ها را مدیریت کند. در درس بعدی پایگاه داده را بروز رسانی کرده و تغییرات مربوطه را در برنامه ی تحت وب اعمال می کنیم.