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

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

در مقاله قبل ، پیش نیازهای راه اندازی فروشگاه آنلاین با MVC – EntityFramework Code first و نیز چگونگی ایجاد پروژه ASP.NET MVC را یاد گرفتید

در این مقاله با ایجاد اکشن و کنترولر و ویو در خدمتتان هستیم .

ایجاد Controller :

به این منظور روی فولدر Controller راست کلیک کرده و Add > Controller را زده و نام آنرا HomeController قرار می دهیم . اگر Resharper را نصب کرده باشیم دستورات داخل کنترولر Home بصورت زیر می باشد :

کنترولر Home 

کنترولر بعدی که ایجاد می کنیم StoreController می باشد که مانند HomeController ساخته می شود .

 

ایجاد Action :

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

public ActionResult Index()

کار اکشن ایندکس نمایش محصولات بصورت رندوم می باشد .

در همین کنترولر (Store) اکشن دیگری بنام Browse داریم که فعلا بصورت زیر تعریف می کنیم :

public ActionResult Browse(string id)

        {

            return View();

        }

کار این اکشن نمایش محصولات یک دسته خاص است .

اکشن بعدی که مشخصات محصول را نمایش می دهد Details می باشد که بصورت زیر تعریف می شود :

public ActionResult Details(int id)

        {

            return View();

        }

به اکشن های فوق ، در مقالات بعدی ، دستورات دیگری اضافه خواهیم کرد .

 

ایجاد View :

اکنون می خواهیم به هر یک از اکشن های فوق یک View نسبت دهیم . ابتدا باید فایل Layout را تعریف کنیم (که عملکردش مانند MasterPage در ASP.NET webform می باشد) بنابراین روی فولدر Views راست کلیک کرده و یک زیرفولدر بنام Shared می سازیم و روی این فولدر راست کلیک کرده و Add > View را انتخاب می کنیم و مانند تصویر زیر تنظیماتش را انجام می دهیم :

layout-file

 

با توجه به اینکه ما میخواهیم از فریم ورک بوت استرپ برای طراحی قالب این فروشگاه استفاده کنیم ، نیاز داریم که نوگت jQuery و نیز Bootstrap را نصب کنیم .

نصب Bootstrap و Jquery :

روی فولدر References پروژه خود راست کلیک کرده و Manage NuGet Package را انتخاب می کنیم .

نکته : دقت کنید که ابتدا باید جی کوئری را نصب کنیم و سپس بوت استرپ .

پس در پنجره باز شده عبارت jquery را سرچ کرده و اولین گزینه یافت شده را Install می کنیم .

سپس عبارت bootstrap را جستجو کرده و اولین گزینه را install می کنیم .

در مقاله بعد با ایجاد Layout برای پروژه آشنا می شویم . با ما باشید …blush


تاریخ انتشار :۲۸ دی ۱۳۹۴



دیدگاه ها :