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

- دسته بندی: آموزش فروشگاه آنلاین با MVC
- تاریخ انتشار: ۱۳۹۴/۱۱/۰۲
- تعداد کامنت: 0 ارسال دیدگاه
- به اشتراک گذاری:
آموزش قدم به قدم ایجاد فروشگاه آنلاین با 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