এএসপি ডট নেট এমভিসি-স্টাইলস অ্যান্ড লেআউট (ASP.NET MVC - Styles and Layout)
লেখাঃ মীর তাউহীদুল ইসলাম ।
ওয়েব ডেভেলপার, ওডেস্ক
কেমন আছেন সবাই? অনেকদিন পর আবার আপনাদের সাথে দেখা । আজ আমি আপনাদের সাথে আলোচনা করবো এএসপি ডট নেট এমভিসি-স্টাইলস অ্যান্ড লেআউট নিয়ে।
এএসপি ডট নেট এমভিসি (ASP.NET MVC) শিখতে,আমরা একটি ইন্টারনেট অ্যাপ্লিকেশন তৈরি করতেছি।
তৃতীয় পার্ট: স্টাইল এবং সুন্দর শৈলী যোগ করা।
লেআউট যোগ করাঃ
Layout.cshtml নামক ফাইলটি অ্যাপ্লিকেশনের প্রত্যেকটি পেইজে লেআউট উপস্থাপন করে।এটি ভিউস(দেখা) ফোল্ডারের ভিতরে শেয়ার্ড ফোল্ডারে অবস্থিত।
এখন ফাইলটি ওপেন করতে হবে এবং এর ভিতরে থাকা বিষয়বস্তু রদবদল করতে হবে যা নিম্নোক্ত কোডের মাধ্যমে দেখানো হলঃ
DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>@ViewBag.Title</title>
css")" rel="stylesheet" type="text/css" />
<script src="@Url.Content("~/Scripts/jquery-1.5.1.min.js")"></script>
<script src="@Url.Content("~/Scripts/modernizr-1.7.min.js")"></script>
</head>
<body>
<ul id="menu">
<li>@Html.ActionLink("Home", "Index", "Home")</li>
<li>@Html.ActionLink("Movies", "Index", "Movies")</li>
<li>@Html.ActionLink("About", "About", "Home")</li>
</ul>
<section id="main">
@RenderBody()
Copyright W3schools 2012. All Rights Reserved.
</section>
</body>
</html>
এইচটিএমএল সাহায্যকারীঃ/HTML Helpers
উপরের কোডটিতে এইচটিএমএল সাহায্যকারী গুলো এইচটিএমএল এর আউটপুট টিকে পরিবর্তন করার জন্য ব্যাবহার করা হয়েছে।
@Url.Content() -URL- এ কন্টেন্ট এখানে সন্নিবেশিত করা হবে।
@Html.ActionLink() -এইচটিএমএল লিংক এখানে সন্নিবেশ করা হবে।
রেজর সিনট্যাক্স(Razor Syntax)
উপরের কোডটিতে যে কোডগুলো লাল রং দ্বারা চিহ্নিত করা হয়েছে তাদের মধ্যে সি শার্প(C#)এবং রেজর মারকাপ ব্যাবহার করা হয়েছে।
@ViewBag.Title – পেজের শিরোনাম এখানে সন্নিবেশিত করা হবে।
@RenderBody()- পেজের কন্টেন্ট এখানে অনুষ্ঠিত হবে।
নোটঃ আমরা রেজর মারকাপ সম্পর্কে জানতে সি-শার্প এবং ভিজুয়াল বেসিক এর জন্য আমাদের রেজরের টউটোরিয়াল দেখতে পারি।
স্টাইল যোগ করাঃ
অ্যাপ্লিকেশনের জন্য যে স্টাইল-সিট রয়েছে তার নাম সাইট ডট সিএসএস(Site.css)।এটি কন্টেন্ট ফোল্ডারে থাকে।
এখন সাইট ডট সিএসএস(Site.css) ফাইলটিকে ওপেন করি এবং এর কন্টেন্ট গুলো রদবদল করিঃ
body
{
font: "Trebuchet MS", Verdana, sans-serif;
background-color: #5c87b2;
color: #696969;
}
h1
{
border-bottom: 3px solid #cc9900;
font: Georgia, serif;
color: #996600;
}
#main
{
padding: 20px;
background-color: #ffffff;
border-radius: 0 4px 4px 4px;
}
a
{
color: #034af3;
}
/* Menu Styles ------------------------------*/
ul#menu
{
padding: 0px;
position: relative;
margin: 0;
}
ul#menu li
{
display: inline;
}
ul#menu li a
{
background-color: #e8eef4;
padding: 10px 20px;
text-decoration: none;
line-height: 2.8em;
/*CSS3 properties*/
border-radius: 4px 4px 0 0;
}
ul#menu li a:hover
{
background-color: #ffffff;
}
/* Forms Styles ------------------------------*/
fieldset
{
padding-left: 12px;
}
fieldset label
{
display: block;
padding: 4px;
}
input[type="text"], input[type="password"]
{
width: 300px;
}
input[type="submit"]
{
padding: 4px;
}
/* Data Styles ------------------------------*/
table.data
{
background-color:#ffffff;
border:1px solid #c3c3c3;
border-collapse:collapse;
width:100%;
}
table.data th
{
background-color:#e8eef4;
border:1px solid #c3c3c3;
padding:3px;
}
table.data td
{
border:1px solid #c3c3c3;
padding:3px;
}
The _ViewStart File
Shared folder এর _ViewStart file এ নিচের লাইনটি থাকে যা (লাইনটি) সব ভিউ ফাইল এর সাথে যুক্ত হয়। এই লাইনটি remove করলে এই লাইনটি আপনাকে সব ভিউ ফাইল এ যোগ করতে হবে।
@{Layout = "~/Views/Shared/_Layout.cshtml";}
আশাকরি আমরা সবাই উপরের কোড টুকু বুঝতে পেরেছি।
আজ আর নয়।এপর্যন্তই থাক।এর পরে আবার হাজির হবো অন্য কিছু নিয়ে।সে পর্যন্ত ভাল থাকবেন।আর এ বিষয়ে আরও জানতে যেতে পারেন এই
http://Bangla.SaLearningSchool.com
