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

در مقاله قبل ، کنترولر اولیه و نیز اکشن Browse و Layout View را ایجاد کردیم . در این مقاله می خواهیم Layout را برای فروشگاه آماده کنیم .

طراحی Layout :

در این مرحله ، باید کدهای بوت استرپی موردنظر را در فایل Layout بنویسیم . ابتدا در تگ head کدهای زیر را می نویسیم :

<head>

    <meta name="viewport" content="width=device-width" />

    <title>@ViewBag.Title – AspNet Store</title>

    <link href="~/Content/bootstrap.min.css" rel="stylesheet" />

    <link href="~/Content/Custom.css" rel="stylesheet" />

    <script src="~/Scripts/jquery-2.2.0.min.js"></script>  

</head>

توضیح : اولین دستور (متا تگ) مربوط به ریسپانسیو بودن وب سایت می باشد . دستور دوم نیز عنوان وب سایت را مشخص می کند . در خط سوم استایل بوت استرپ را اضافه کردیم و در خط چهارم استایلی که خودمان می خواهیم به وب سایت اضافه کنیم را اضافه کردیم . و در نهایت در خط آخر نیز کتابخانه جی کوئری را رفرنس دادیم .

اکنون می خواهیم یک منو به صفحه اضافه کنیم . دستورات زیر را در تگ body تایپ کنید :

 
    
                                

توضیح : توسط این دستورات ، منویی تعریف شده است که ویژگیهای زیر را دارد :

  • در هنگام اسکرول ، به بالای صفحه می چسبد (fixed-top)
  • در دستگاه های کوچک مانند موبایل بجای منو ، یک button نمایش داده می شود که با فشردن آن ، منو بصورت آبشاری به کاربر نمایش داده می شود .
  • دارای Navbar-Brand است یعنی لوگو و یا نام سایت را در کنار منو نشان می دهد که در اینجا توسط ActionLink به اکشن ایندکس از کنترولر Home لینک داده ایم .
  • لینکهای منو فعلا یکی است که به همین صفحه اصلی سایت اشاره دارد .

نکته : برای کسب اطلاعات بیشتر در زمینه منوی بوت استرپ ، به وب سایت getBootStrap مراجعه کنید .

 

ایجاد فایل ViewStart :

روش هوشمندانه برای تعریف Layout برای View های پروژه ، تعریف Layout در فایلیست بنام ViewStart . بنابراین روی فولدر Views راست کلیک کرده و Add > View را می زنیم . سپس بصورت شکل زیر مشخصات آنرا تعریف کرده و Add می کنیم :

فایل ViewStart فایل 

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

@{

    Layout = @"~/Views/Shared/_Layout.cshtml";

}

از این پس ، فقط کافیست در هنگام افزودن view به یک اکشن ، تیک گزینه use a layout page را بزنیم ولی در باکس مربوطه چیزی ننویسیم . خودش بطور اتوماتیک از طریق فایل ViewStart ، فایل Layout را می بیند .

در مرحله بعد ، باید برای اکشن Index از کنترولر Home و اکشن های Index , Browse , Details ، یک View بسازیم. برای اینکار ، روی نام اکشن موردنظر راست کلیک کرده و Add > View را میزنیم و فقط تیک use layout را زده و Add میکنیم .

خب دوستان عزیز ، در مقاله بعد Model ها و نیز رشته اتصال به دیتابیس را خواهیم ساخت . همراه ما باشید …wink


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



دیدگاه ها :