آموزش ساخت فروشگاه اینترنتی با ASP.NET MVC – بخش۲

 آموزش قدم به قدم ایجاد فروشگاه آنلاین با MVC – بخش دوم 

Online Shop by MVC – Step by Step Tutorial – Part2

سلام دوستان، در بخش اول از آموزش فروشگاه اینترنتی با MVC نرم افزارهای موردنیاز را معرفی و نصب کردیم. سپس یک پروژه mvc بهمراه سورس کنترل Git ایجاد کردیم و Controller ، Action و View لازم را تعریف کردیم و Layout موردنظر را طراحی کردیم و در نهایت مدل های لازم و رشته اتصال به دیتابیس را تعریف کردیم. با بخش دوم از این آموزش در خدمت شما هستیم.

این بخش از مقالات آموزشی “طراحی فروشگاه آنلاین با ASP.NET-MVC” شامل سرفصل های زیر است:

• نمایش محصولات به کاربر
  تعریف کلاس StoreService.cs و آپدیت اکشن Index
• نمایش محصولات یک فهرست
  تابع DisplayProductsOf و تکمیل اکشن Browse
• طراحی Browse View
  تکمیل اکشن Details
• طراحی Details View
  افزودن فیلد های Price و Image و پیاده سازی سبد خرید (Shopping Cart)
• ایجاد کلاس ShoppingCart
  تابع Add و تابع Remove

نمایش محصولات به کاربر :

برای دسترسی به اطلاعات دیتابیس ، می توان در اکشن مربوطه ، بطور مستقیم ، از StoreContext که در مقالات قبل نوشتیم ، استفاده کنیم . ولی ما در این مقاله قصد داریم برای تعامل با دیتابیس ، از سرویس استفاده کنیم . بنابراین در روت پروژه ، یک فولدر بنام Services بسازید و در آن یک کلاس بنام StoreService.cs ایجاد کنید .

تعریف کلاس StoreService.cs:

دستورات زیر را در کلاس StoreService.cs می نویسیم :

public class StoreService { 
 private readonly StoreContext _db; 
 public StoreService() : this(new StoreContext()){} 
 public StoreService(StoreContext context) { _db = context; } 
 public IEnumerable GetCategories() { 
  return _db.Categories.OrderBy(c => c.Name).ToArray(); 
 } 
}

توضیح : ابتدا از کلاس StoreContext یک شئ ساختیم و با پارامتر ورودی این کلاس آنرا مقداردهی می کنیم . سپس تابع GetCategories را برای دریافت فهرست محصولات از دیتابیس تعریف کرده ایم .

حال باید تغییراتی در StoreController ایجاد کنیم . دستورات زیر را به ابتدای کنترولر اضافه کنید :

private readonly StoreService _store; 
public StoreController() : this(new StoreService()) { } 
public StoreController(StoreService service) { _store = service; }

در دستورات فوق ، از کلاس StoreService که قبلا نوشتیم یک شئ ساختیم و آنرا با پارامتر ورودی سازنده کنترولر مقداردهی کردیم .

آپدیت اکشن Index:

اکشن Index را نیز بصورت زیر تغییر می دهیم :

public ActionResult Index() { 
 var categories = _store.GetCategories(); 
 return View(categories); 
}

با اجرای Index View از کنترولر Store ، خروجی زیر را مشاهده خواهیم کرد :

نمایش محصولات یک فهرست :

تابع DisplayProductsOf:

برای اینکه با کلیک روی لینکهای تصویر فوق ، محصولات آن دسته نمایش داده شود ، تابعی بنام DisplayProductsOf در Service می نویسیم :

public IEnumerable DisplayProductsOf(string category) { 
 return _db.Products.Where(p => p.Category.Name == category).OrderBy(p => p.Name).ToArray(); 
}

توضیح : این تابع رشته ای بنام فهرست را میگیرد و محصولاتی که زیرمجموعه این دسته هستند را بعنوان خروجی باز میگرداند .

تکمیل اکشن Browse:

حال نوبت آنست که اکشن Browse در StoreController را تکمیل کنیم :

public ActionResult Browse(string id) { var products = _store.DisplayProductsOf(id); 
 if(!products.Any()) { 
  return HttpNotFound(); 
 } 
 return View(products); 
}

تا اینجای مقاله، اکشن نمایش category را نوشتیم و توانستیم در خروجی پروژه ، عناوین فهرست محصولات را ببینیم . در بخش بعد، Browse View را ایجاد خواهیم کرد و اکشن Details را تکمیل می کنیم .

طراحی Browse View :

برای نمایش محصولات یک دسته ، باید تغییراتی در ویوی Browse اعمال کنیم . دستورات این ویو بصورت زیر می باشد :

@model IEnumerable
@{
string currentCategory = Model.First().Name;
ViewBag.Title = "Browse " + currentCategory;
}
<h2>Browse Products of <b> @currentCategory</b></h2>
<div class="category">
 <ul class="list-unstyled" id="category-list">	
  @foreach (var product in Model) {
  <li class="col-xs-4 col-sm-2 container">
   <code><a href="@Url.Action("><img alt="@product.Name" src="~/Images/Sample_Product.png" /> </a></code>
  </li>
  }
 </ul>
</div>

توضیح : ابتدا ، لیستی از محصولات را بعنوان مدل این View تعریف کرده ایم و سپس عنوان صفحه را متناسب با نام فهرست ، در نظر گرفته ایم . در یک لیست افقی ، برای هر محصول ، یک باکس طراحی شده که شامل تصویر محصول ، لینک مشخصات محصول و نام محصول است . خروجی بصورت زیر می شود :

تکمیل اکشن Details :

برای نمایش جزئیات یک محصول ، اکشن Details را ایجاد کردیم و برای استفاده از این اکشن ، در کلاس StoreService ، تابع زیر را می نویسیم :

public Product ProductDetail(int id) { 
 return _db.Products.Include("Category").Where(p => p.ProductId == id).SingleOrDefault(); 
}

سپس اکشن Details را بصورت زیر تکمیل می کنیم :

public ActionResult Details(int? id) { 
 if (!id.HasValue) { 
  return HttpNotFound(); 
 } 
 var product = _store.ProductDetail(id.Value); 
 if(product == null) { 
  return HttpNotFound(); 
 } 
 return View(product); 
}

توضیح : اکشن Details پارامتر id  را بعنوان ورودی می گیرد و سپس به تابع ProductDetail از کلاس StoreService میفرستد .

در این تابع ، اگر محصولی با این id یافت شد که اطلاعاتش به اکشن ارسال می شود و سپس اکشن به view متناظرش میفرستد . و اگر محصولی با id ارسالی یافت نشد صفحه HttpNotFound نمایش داده می شود .

تا اینجای مقاله، browse view را طراحی کردیم و نیز اکشن Details را کامل کردیم . در بخش بعد میخواهیم Details View را تکمیل کنیم و فیلدهای Price و Image را به جدول محصولات اضافه کنیم .

طراحی Details View :

در این مرحله باید View متناظر اکشن Details را طراحی کنیم . هنگامی که روی محصول در تصویر بالا ، کلیک می کنیم ، به صفحه مشخصات محصول (Details) هدایت خواهیم شد . در این مرحله ، میخواهیم کدهای لازم برای ویوی Details را بنویسیم :

@model AspNetStore.Models.Product
@{
ViewBag.Title = @Model.Name + "Details";
}
<h2>Details of @Model.Name</h2>
<hr />
<div>
<img alt="@Model.Name" src="~/Images/Sample_Product.png" />
</div>
<div id="product_detail">
<p>
<b>Name : </b> @Model.Name
</p>
<p>
<b>Category : </b> @Model.Category.Name
</p>
<p>
<button class="btn btn-success">Add to Cart</button>
</p>
</div>

توضیح : ابتدا جدول محصول را بعنوان مدل به این view ارسال کرده ایم و سپس عنوان صفحه را تعیین کردیم و در نهایت در div با id=product_detail مشخصات محصول را بیان کرده ایم . خروجی بصورت تصویر زیر خواهد شد :

افزودن فیلد های Price و Image :

در این مرحله می خواهیم دو فیلد ضروری قیمت و تصویر محصول را به مدل Product اضافه کنیم . اگر بطور مستقیم تغییرات را در مدل محصول اعمال کنیم و پروژه را اجرا کنیم ، اطلاعات و رکوردهایی که از قبل در دیتابیس موجود می باشد ، پاک می شوند . برای جلوگیری از این فاجعه ! باید بصورت زیر عمل کنیم .

استفاده از Migration :

به منوی Tools > NuGet Package Manager بروید و  Package Manager Console را اجرا کنید . در خط فرمان دستور enable-migrations را تایپ کنید . پس از انجام عملیات توسط نوگت ، با پیغام زیر مواجه خواهید شد :

Code First Migrations enabled for project AspNetStore

 در مرحله بعد ، کلاس product را باز کرده و تغییرات زیر را در آن اعمال کنید (دو فیلد زیر را به آن بیافزایید) :

public decimal Price { get; set; }
public string ImageUrl { get; set; }

سپس دوباره به کنسول نوگت باز گردید و دستور add-migration UpdateProduct را تایپ کنید و Enter را بزنید . دقت کنید که UpdateProduct نام دلخواه می باشد .

در نهایت دستور update-database را در خط فرمان کنسول تایپ کرده و اینتر را بزنید .

کنسول نوگت پس از اجرای این دستورات به شکل زیر خواهد بود :

پس از انجام عملیات فوق ، در نرم افزار SqlServer ، ستونهای جدول product به شکل زیر خواهند بود :

» مطالعه مقاله کاملی راجع به Migration در Entity Framework Code-First

دوستان ، تا بدین جای مقاله، طراحی DetailsView را انجام دادیم و سپس دو فیلد قیمت و تصویر محصول را به جدول محصولات اضافه کردیم . و در نهایت Migration انجام دادیم . در این بخش میخواهیم ویوی محصولات را برای نمایش دو فیلد جدید تغییر دهیم و نیز در ادامه ، شروع به نوشتن کدهای سبدخرید کنیم .

تغییرات Views :

هم اکنون نیاز است تغییراتی در ویوهای موجود اعمال کنیم تا قیمت و تصویر محصول را نمایش دهند . به ویوی Details رفته و تصویر و قیمت محصول را بصورت زیر تعریف کنید :

Price : @Html.DisplayFor(m => m.Price)

حالا ویوی Browse را باز کنید و تصویر را بصورت زیر تعریف کنید :

ورود دیتا به فیلدهای قیمت و تصویر :

نرم افزار SqlServer را باز کرده و New Query را بزنید . دستور زیر را در خط فرمان آن بنویسید :

update Products set ImageUrl = '~/Images/Sample_Product.png'

برای تغییر مقدار فیلد قیمت محصولات ، روی جدول محصولات راست کلیک کنید و سپس Edit را بزنید و در اینجا قیمتهای دلخواه خود را وارد کنید .

پیاده سازی سبد خرید (Shopping Cart) :

به منظور شروع پیاده سازی سبدخرید ، روی فولدر Models راست کلیک کنید و یک کلاس بنام CartItem.cs به آن اضافه کنید . Property های زیر را در این کلاس تعریف کنید :

public class CartItem {
 [Key]
 public int CartItemId { get; set; }

 [Required]
 public string CartId { get; set; }

 public int ProductId { get; set; }

 public int Count { get; set; }

 [DataType(DataType.DateTime)]
 public DateTime DateCreated { get; set; }
 
 public virtual Product product { get; set; }
}

آپدیت کلاس StoreContext.cs:

در مرحله بعد ، برای اضافه شدن این مدل به دیتابیس ما بعنوان یک جدول ، دستور زیر را در کلاس StoreContext.cs واقع در فولدر Data اضافه کنید :

public DbSet CartItems { get; set; }

افزودن جدول CartItems به دیتابیس از طریق Migration:

بدلیل اینکه تغییراتی در جداول و مدلهای دیتابیس رخ داده است ، باید مجددا از Migration استفاده کنیم تا جدول CartItems به دیتابیس ما اضافه شود .

کنسول NuGet را اجرا کرده و ابتدا دستور add-migration AddCartItem را بنویسید و اینتر کنید . سپس دستور آپدیت دیتابیس (update-database) را اجرا کنید . اکنون با مراجعه به دیتابیس مشاهده می کنیم که جدول CartItems ایجاد شده است .

در بخش قبل ، view را مطابق با فیلدهای جدید قیمت و تصویر محصول ، تغییر دادیم و این فیلدها را مقدار دهی اولیه کردیم . در این بخش میخواهیم کلاس سبدخرید را ادامه دهیم و توابع Add و Remove را پیاده سازی خواهیم کرد …

 ایجاد کلاس ShoppingCart :

در فولدر Services که قبلا ایجاد کردیم یک کلاس تعریف کنید بنام ShoppingCart.cs . تمام عملیات درج و حذف و ویرایش آیتمهای سبدخرید ، در این کلاس تعریف می شوند .

ابتدا دو متغیر global در سطح کلاس بصورت زیر تعریف می کنیم :

private readonly StoreContext _db; 
private readonly string _cartId;

سپس سازنده کلاس را بصورت زیر تعریف میکنیم :

public ShoppingCart(HttpContextBase context) : this(context, new StoreContext()) { } 
public ShoppingCart(HttpContextBase httpContext , StoreContext storeContext) { 
 _db = storeContext; _cartId = GetCartId(httpContext); 
}

تابع Add :

اولین تابعی که می خواهیم به کلاس سبدخرید اضافه کنیم Add می باشد .بدنه این تابع را به شکل زیر تعریف می کنیم :

public void Add(int id) { 
 var product = _db.Products.SingleOrDefault(p => p.ProductId == id); 
 if(product == null) { 
  // TODO : Exception 
  return; 
 } 
 var cartItem = _db.CartItems .SingleOrDefault(c => c.CartId == _cartId && c.ProductId == id ); 
 if(cartItem != null) { cartItem.Count ++; } 
 else { cartItem = new Models.CartItem(){ 
  ProductId = id, CartId = _cartId, Count = 1 , DateCreated = DateTime.Now, 
 }; 
  _db.CartItems.Add(cartItem); } _db.SaveChanges(); 
 }

توضیح : تابع Add ، id محصول را بعنوان پارامتر ورودی می گیرد . در شرط if اول ، بررسی می کند که اگر محصولی با این id در جدول محصولات موجود نباشد ، return میکند وگرنه به ادامه تابع می رود . در دستورات بعدی ، بررسی می شود که اگر سبد خرید از قبل ایجاد شده است ، تعداد آن محصول را یکی اضافه می کند و اگر سبد خرید جدید می باشد ، تعداد محصول را برابر عدد یک قرار می دهد و نیز productId محصول را برابر id و DateCreated را برابر زمان حال حاضر تعیین می کند . در نهایت این محصول را بعنوان یک رکورد از سبد خرید ثبت می کند و دیتابیس را آپدیت می کند .

تابع Remove :

تابع حذف دارای پارامتر ورودی int و خروجی int می باشد . پارامتر ورودی برای اینست که productId را می گیرد و آنرا حذف می کند . پارامتر خروجی به این دلیل بصورت عددی تعریف شده که ممکن است از محصول با id=productId چند آیتم در سبد خرید وجود داشته باشد و ما میخواهیم با فراخوانی تابع Remove ، فقط یکی از آنها را حذف کنیم . تعدادی که از آن محصول باقی می ماند را بصورت پارامتر خروجی این تابع در نظر گرفتیم .

public int Remove(int productId) { 
 var cartItem = _db.CartItems .SingleOrDefault(c => c.CartId == _cartId && c.ProductId == productId); var ItemCount = 0; 
 if(cartItem == null) { return ItemCount; } if (cartItem.Count > 1) { cartItem.Count–; ItemCount = cartItem.Count; } 
 else { _db.CartItems.Remove(cartItem); } 
 _db.SaveChanges(); return ItemCount; 
}

توضیح : مقدار خروجی این تابع ItemCount است . ابتدا مقدار پیش فرض صفر را دارد و سپس در شرط if بررسی می شود که اگر آیتمی در سبدخرید موجود نباشد ، عدد صفر را بعنوان خروجی برمیگرداند . اگر از آن محصول خاص در سبد خرید بیشتر از یک عدد موجود باشد یکی از تعداد آن کم می کند و آنرا return می کند . و در قسمت else اگر از آن محصول یک عدد در سبد خرید موجود باشد ، آن رکورد را از جدول cartItems حذف کرده و در نهایت دیتابیس را آپدیت می کند .

»»» مطالعه بخش سوم آموزش پیاده سازی وب سایت فروشگاهی توسط ASP.NET MVC5