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

فروشگاه آنلاین با 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 تایپ کنید :

<nav class="navbar navbar-default navbar-fixed-top">

        <div class="container-fluid">

            <div class="navbar-header">

                <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false">

                    <span class="sr-only">Toggle navigation</span>

                    <span class="icon-bar"></span>

                    <span class="icon-bar"></span>

                    <span class="icon-bar"></span>

                </button>

                @Html.ActionLink("AspNet Store", "Index", "Home", null, new { @class = "navbar-brand" })

            </div>

            <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">

                <ul class="nav navbar-nav">

                    <li class="active">@Html.ActionLink("Home", "Index", "Home")</li>

                </ul>   

            </div>

        </div>

    </nav>

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

  • در هنگام اسکرول ، به بالای صفحه می چسبد (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


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



دیدگاه ها :