لایه های طراحی

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

در واقع در این مقاله کمی بیشتر در مورد ریسپاسنیو کردن برای دیواس ها توضیح میدهد تا یک نسخه دیگری از وب سایت طراحی کنید.که در هنگام لود با تبلت و یا موبال طرح دیگری را نمایش دهد.

طراحی وب واکنش‌گرا (به انگلیسی: Responsive web design) (سرواژه:RWD) یک روش طراحی وب است که هدف آن نمایش مطلوب صفحه در طیف گسترده‌ای از دستگاه‌ها از تلفن‌های همراه تا نمایشگر کامپیوترهای رومیزی است.

ایجاد یک اپلیکیشن لایه های طراحی با استفاده از MVC

۱. به منوی File -> New -> Project می رویم.

لایه های طراحی

۲. Web -> ASP.NET Web Application .NET Framework را انتخاب می کنیم.

یک نام دلخواه به آن می دهیم. در اینجا نام MobileOrBrowser را انتخاب کردیم. محل ذخیره پروژه را مشخص کرده و روی دکمه OK کلیک می کنیم. پنجره جدیدی باز خواهد شد.

لایه های طراحی

۳. MVC را انتخاب کرده و OK می کنیم.

با این کار پنجره جدید دیگری باز می شود، اگر بخواهیم پروژه خود را روی Azure میزبانی کنیم، باید اطلاعات موردنیاز مربوط به اشتراک Azure را پر کنیم. در این مرحله فقط روی Cancel کلیک می کنیم.

لایه های طراحی

۴. فولدر Views -> Shared -> cshtml را باز می کنیم. به طور پیش فرض، این صفحه چند خطی کد دارد.

لایه های طراحی

حالا Layout دیگری اضافه می کنیم.

لایه های طراحی

نام آن را –MobileLayout می گذاریم و تیک مربوط به گزینه ایجاد partial view را می زنیم و سپس روی گزینه Add کلیک می کنیم.

لایه های طراحی

کدهای پیش فرض _Layout.cshtml را در این فایل کپی می کنیم، سپس تغیرات لازم را انجام می دهیم.
در فایل _ViewStart.cshtml، ما باید چند خط کد اضافه کنیم که تشخیص بدهیم که وب سایت در حالت Device اجرا شده یا Browser.

@ {  
    if (!Request.Browser.IsMobileDevice) {  
        Layout = "~/Views/Shared/_Layout.cshtml";  
    } else {  
        Layout = "~/Views/Shared/_MobileLayout.cshtml";  
    }  
}   

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

@ {  
    if (!Request.Browser.IsMobileDevice) { < div class = "jumbotron" > < h1 > Browser View < /h1> < p class = "lead" > This is browser view. < /p> < /div>  
    } else { < div class = "jumbotron" > < h1 > Mobile View < /h1> < p class = "lead" > This is mobile view. < /p> < /div>  
    }  
}  

برنامه را اجرا کرده و خروجی زیر را مشاهده می کنیم:

لایه های طراحی

زمانی که صفحه را refresh کنیم، سپس Mobile View را خواهیم داشت:

لایه های طراحی

 

 

 

زهره سلطانیان

نوشته‌های مرتبط

دیدگاه‌ها

*
*

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