آموزش نکات کاربردی ASP.NET MVC 4 (قسمت دوم)

در این قسمت می خواهیم یک وب سایت برای لیگ برتر فوتبال طراحی کنیم!! در خلال کار نکات اصلی MVC را مرور می کنیم. پروژه ای که می خواهیم انجام دهیم مانند شکل ذیل است:

مرحله اول: ایجاد پروژهیک پروژه جدید از نوع ASP.NET MVC 4 Application با نام Premier League (لیگ برتر) ایجاد کنید:

الگوی پروژه را Empty انتخاب کرده و Razer و HTML 5 را انتخاب کنید

مرحله دوم: ایجاد دیتابیسبر روی پوشه App_Data کلیک راست کرده و گزینه Add> New Item را برگزیده و یک بانک اطلاعات SQL Server با نام PremierLeagueDB.mdb به پروژه خود بیافزایید.

در پنجره Database Explorer اتصال مربوط به PremierLeagueDB.mdb را باز کرده بر روی پوشه Tabels کلیک راست کرده و با انتخاب Add New Tabel جدول های مورد نظر را مانند شکل ذیل ایجاد کنید:

البته شما همه استاد بنده هستید و نیاز به توضیح چگونگی ایجاد جدول ندارید؛ اما برای مبتدیانی چون من این توضیح را می دهم: ابتدا هر دو جدول را مطابق شکل بالا ایجاد کرده و سپس ارتباط میان دو جدول را با استفاده از شکل ذیل ایجاد کنید:

بدین صورت که: در حالی که طراح جدول دوم باز است بر روی دکمه Relationship در نوار ابزار کلیک کرده، در پنجره بعدی بر روی دکمه Add کلیک کرده سپس بر روی Tables And Columns Specification کلیک کنید تا دکمه کوچک کنار آن هویدا شده و با کلیک بر روی این دکمه، پنجره بعدی برای تعیین جدول والد و فرزند و نیز تعیین کلید اصلی و خارجی نمایان می شود که مطابق شکل آن را انجام دهید.
مرحله سوم: ایجاد کلاس Entitity Framework برای کار با داده هابرای کار با بانک اطلاعات مذکور، می خواهیم یک کلاس Entitity Framework در پوشه Models ایجاد کنیم؛ برای این کار دو روش وجود دارد:
روش اول استفاده از ویژوال استودیو است؛ بدین منظور بر روی پوشه Models کلیک راست کرده و با انتخاب Add>New Item از قسمت Data یک Entitity Framework با نام PremierLeague.edmx ایجاد کنید (شکل بعد)

در صفحه بعد گزینه From Database را انتخاب کنید؛ در پنجره بعدی برروی دکمه New Connection کلیک کرده و در پنجره بعدی با انتخاب Microsoft SQL Server Database File و کلیک دکمه Browse فایل دیتابیس خود (PremierLeagueDB.mdb) را انتخاب کنید. (البته در این پنجره شما می توانید بانک اطلاعات SQL Server یا با گزینش از دیگر بانک های اطلاعاتی مانند اکسس استفاده کنید). با این کار رشته اتصال ساخته شده و در فایل Web.config ذخیره می شود.

با کلیک دکمه Next به پنجره بعدی رفته و صبر کنید تا لیستی از اشیای دیتابیس نشان داده شود؛ جعبه انتخاب Tables را انتخاب کنید (شکل ذیل)

پس از کلیک بر روی دکمه Finish کلاس های مربوط به جدول های بانک اطلاعات ساخته شده و آماده استفاده است (شکل ذیل):

روش دوم: استفاده از کد نویسی است؛ در این روش با استفاده از کمی کد نویسی می توانیم کلاس های مورد نظر خویش را بنویسیم. از آنجا که این روش کنترل بیشتری به ما می دهد و نیز به خاطر جنبه آموزشی داشتن، ما در اینجا از این روش استفاده می کنیم.
پس بر روی این پوشه کلیک راست کرده و با انتخاب Add> Class یک کلاس با نام PremierLeagueDB.cs ایجاد کنید. در اینجا چند نکته را مد نظر داشته باشید:
اول این که: کلاس شما باید از DbContext مشتق شده باشد (ارث ببرد):

public class PremierLeagueDB : DbContext
{
}

دوم این که: فضانام های ذیل اگر وجود ندارد، به آن بیافزایید:

using System.Collections.Generic;
using System.ComponentModel.DataAnnotations;
using System.Data.Entity;
using System.Data.Entity.ModelConfiguration.Conventions;

اکنون کلاس مربوط به تیم را این گونه بنویسید:

public class Team
{
   [Key]
   public int TeamID { get; set; }
   public string TeamName { get; set; }
   public DateTime RegisterDate { get; set; }
   public virtual ICollection Player { get; set; }
}

سطر اخیر برای ایجاد ارتباط یک-به-چند میان کلاس Team و Player می باشد.
نکته: برای تایپ سریع تر در ویژوال استودیو، کلمه prop را نوشته و دوبار کلید Tab را فشار دهید.
اکنون کلاس مربوط به بازیکنان را این گونه بنویسید:

public class Player
 {
    [Key]
    public int PlyerID { get; set; }
    public int TeamID { get; set; }
    public string FullName { get; set; }
    public int Age { get; set; }
    public DateTime EnrollDate { get; set; }
    public virtual Team Team { get; set; }
 }

در اینجا نیز سطر اخیر برای ایجاد ارتباط میان دو کلاس است.
حال کلاس PremierLeagueDB خود را اینگونه اصلاح کنید:

public class PremierLeagueDB : DbContext
{
  public DbSet Teams { get; set; }
  public DbSet Players { get; set; }
  protected override void OnModelCreating(DbModelBuilder modelBuilder)
  {
    modelBuilder.Conventions.Remove();
  }
}

اعتبارسنجی داده ها با Data Annotationsبرای اعتبارسنجی و بررسی صحت داده های ورودی، در MVC از الگوی Data Annotations استفاده می شود. در این روش، هنگام ایجاد یک Property، یک یا چند برچسب Attribute به آن اضافه می کنیم که نشان دهد این فیلد الزامی است و Null نباید باشد، نوع داده و محدوده مقادیر فیلد و دیگر مشخصات آن را کنترل می کنیم. در این جا به چند مورد ضروری اشاره می کنیم:
Required: این برچسب مشخص می کند که فیلد الزامی است و نمی تواند مقدار تهی داشته باشد؛ همچنین می توان یک پیام خطای دلخواه را تعیین کرد. مثال:

[Required(ErrorMessage = "نام تیم الزامی است")]
public string TeamName { get; set; }

StringLength: برای تعیین طول رشته. به طور مثال نام کامل بازیکن نباید از 50 کاراکتر بیشتر باشد:

[StringLength(50, ErrorMessage = "نام بازیکن نباید بیش از 50 کاراکتر باشد")] 
public string FullName { get; set; }

RegularExpression: برای اعتبارسنجی فیلد با استفاده از عبارات با قاعده. به طور مثال می توان صحت ایمیل را این گونه اعتبارسنجی کرد:

[RegularExpression(@"[A-Za-z0-9._%+-]+@[A-Za-z0-9.-]+\.[A-Za-z]{2,4}"),
    ErrorMessage = "ایمیل معتبر نیست")]
public string Email { get; set; }

Range: برای تعیین محدوده مقادیر مجاز برای یک فیلد؛ به طور مثال سن بازیکن باید بین 16 تا 38 سال باشد:

[Range(16,38)]
public int Age { get; set; }

DataType: برای تعیین نوع داده فیلد؛ به طور مثال، فیلد تاریخ استخدام بازیکن باید از نوع Date باشد:

[DataType(DataType.Date,ErrorMessage = "فرمت تاریخ صحیح نمی باشد")]
public DateTime EnrollDate { get; set; }

شما می توانید با آنچه آموختید، دو کلاس Team و Player را برای اعتبارسنجی داده های ورودی، اصلاح نمایید.
اکنون بهتر است پروژه خود Build کنید.
مرحله چهارم: ایجاد Controllerهاتا کنون ما کلاس های Model خود را (که به نوعی لایه Data Access است) ایجاد کردیم. این کلاس ها همه نیازهای ما را برای کار با پایگاه داده مان برآورده می کند.
حال می خواهیم کنترلرهای مورد نیاز را ایجاد کنیم. بدین منظور بر روی پوشه Controller کلیک راست کرده و گزینه Add>Controller را انتخاب کرده و در پنجره بعدی نام آن را HomeController گذاشته و Template آن را نیز Empy template انتخاب کنید (در مورد این Templateها بعدا توضیح خواهم داد).

بر روی دکمه Add کلیک کنید تا یک کنترلر که شامل یک متد با نام Index() است، ایجاد شود. کد داخل این کنترلر این گونه است:

public class HomeController : Controller
{
  //
  // GET: /Home/
  public ActionResult Index()
  {
     return View();
  }
}

متدهایی که در کنترلرها می نویسیم، غالبا شیئ از نوع ActionResult بر می گرداند که به برنامه می گوید باید کاری انجام داده و نتیجه را بر گرداند. البته شما می توانید چیزهای دیگری از این متدها بخواهید؛ به طور مثال، متد بالا را این گونه می توانید بنویسید:

public string Index()
{
   return "Hello, Welcome to MVC!";
}

به هر حال، شما فعلا این سطر را قبل از return view() اضافه کنید:

ViewBag.Message = "به سایت لیگ برتر خوش آمدید!";

متد مذکور یک View بر می گرداند که باید آن را ایجاد کنیم؛ بدین منظور بر روی متد Index() کلیک راست کرده و گزینه Add View را انتخاب کنید. در پنجره Add View نام ویو، دستور زبان (که می تواند Razer یا ASPX باشد) و نیز گزینه Use a layout را مشخص می کنید.

در مورد دستور زبان Razer در قسمت بعدی توضیح خواهم داد.
اما Layout در واقع همان MasterPage در صفحات ASP.NET کلاسیک است. بدین معنی که ما قسمت های مشترک صفحات (مانند هیدر، فوتر، منو و...) را در داخل فایل Layout قرار می دهیم. هنگام ایجاد یک پروژه، پوشه ای با نام Shared همراه با یک فایل _Layout.cshtml ایجاد می شود. همچنین در فایل _ViewStrart.cshtml مشخص می کند که Layout پیش فرض، کدام است. بنا بر این لازم نیست در پنجره Add View با کلیک دکمه ... فایل Layout را انتخاب کنید؛ کافی است جعبه انتخاب Use a layout انتخاب شده باشد.
برای فهم بهتر Layout شکل ذیل را نگاه کنید:

به هر حال، با این کار، یک View ساده با نام Index ایجاد می شود. بهتر است برای تست، عبارت 

Index

را با

@ViewBag.Message

جایگزین کنید. این سطر همان پیام را که در کنترلر در متغیر ViewBag.Message ذخیره کرده بودیم، نمایش می دهد.
مرحله پنجم: قالب گرافیک سایتقالب گرافیکی این سایت ساده است؛ مقدار دستورهای css در فایل Site.css که در پوشه Content قرار دارد، نوشته ایم؛ شما می توانید قالب دلخواه خود را طراحی کنید؛ دستوراتی که من نوشته ام این گونه است:

body
{
  padding: 0;
  margin: 0;
  direction: rtl;
  background-color: #e6e7e9;
  font-family: Tahoma;
  font-size: 10pt;
  line-height: 100%;
}
/* Styles for main DIV  --------------------------- */
.main
{
  width: 800px;
  margin: 0 auto;
  margin-top: 20px;
  margin-bottom: 20px;
  border-radius: 10px;
  background: #ffffff;
  border: 1px solid #b4bbc3;
}
/* Styles for HEADER --------------------------- */
.header
{
  background: #d4d7df;
  padding: 10px;
  border-radius: 9px 9px 0 0;
}
/* Styles for MENU  ---------------------------*/
.menubg
{
  border-top: 1px solid #646777;
  border-bottom: 1px solid #646777;
}
.menu
{
  width: 800px;
  height: 20px;
  margin: 0;
  padding: 0;
  background: #646777;
  border-top: 1px solid #ffffff;
  border-bottom: 1px solid #ffffff;
  list-style: none;
  display: block;
}
.menu li
{
  float: right;
  border-left: 1px solid #336666;
  padding: 3px 0px;
}
.menu li a
{
  padding: 3px 16px;
  border-left: 1px solid #dddddd;
  color: #d4d7df;
  text-decoration: none;
}
.menu li a:hover
{
  background-color: #000033;
}
/* Styles for CONTENT DIV --------------------------- */
.content
{
  padding: 20px;
}
/* Styles for TABLE (CSS3) --------------------------- */
th
{
  font-weight: bold;
  background-color: #dadada;
}
div.AltRow
{
  border:1px solid #dadada;
}
div.AltRow tr:nth-child(odd)
{
  background-color: #ffffff;
}
div.AltRow tr:nth-child(even)
{
  background-color: #efefef;
}
div.AltRow tr:hover
{
  background-color: #dadada;
}
/* Styles for validation helpers  ---------------------------*/
.field-validation-error
{
  color: #ff0000;
}
.field-validation-valid
{
  display: none;
}
.input-validation-error
{
  border: 1px solid #ff0000;
  background-color: #ffeeee;
}
.validation-summary-errors
{
  font-weight: bold;
  color: #ff0000;
}
.validation-summary-valid
{
  display: none;
}

اکنون فایل _Layout.cshtml را باز کرده و آن را مشابه ذیل اصلاح کنید:

  
  
  
  
  
  


  

    

      
    
    

    

      
صفحه اول 
      
تیم ها 
      
بازیکنان 
    
    
    

      @RenderBody()
    
  

این کد، شامل کدهای HTML و مقداری کد Razer است که در بخش بعدی به آن می پردازیم. انشاء الله.
تا اینجای کار قدم های اولیه را برداشته ایم و پروژه ما آماده است برای کار با داده ها و بانک اطلاعات. بد نیست پروژه را تست کنید تا شکل مشابه ذیل را مشاهده کنید: