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

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

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

در این مقاله میخواهیم ویوی Browse را ایجاد کنیم (هنگامی که روی لینک یک فهرست کلیک می شود وارد محصولات آن دسته شویم) و اکشن Details را تکمیل کنیم .

 

طراحی Browse View :

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

@model IEnumerable<AspNetStore.Models.Product>

@{

    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">

                <a href="@Url.Action("Details", new {id=product.ProductId})">

                    <img alt="@product.Name" src="~/Images/Sample_Product.png" />

                    <h5 class="control-label">@product.Name</h5>

                </a>

            </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 نمایش داده می شود .

در مقاله بعد ، Details View را تکمیل خواهیم کرد و فیلدهای Price و Image را نیز به جدول Products اضافه میکنیم . با ما باشید …laugh

 


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



دیدگاه ها :