فروشگاه آنلاین با MVC بخش هشتم

فروشگاه آنلاین با MVC بخش هشتم

در مقاله قبل ، 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 src="~/Images/Sample_Product.png" alt="@Model.Name" />

</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 را در خط فرمان کنسول تایپ کرده و اینتر را بزنید .

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

Migration in NuGet Console

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

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

 

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


تاریخ انتشار : ۴ بهمن ۱۳۹۴



دیدگاه ها :