ASP.Net MVC এবং ASP.Net Core MVC অ্যাপ্লিকেশনগুলোতে Layouts এবং Partials ব্যবহৃত হয় সাধারণভাবে পুনঃব্যবহারযোগ্য UI অংশ তৈরি করার জন্য। এই দুটি কনসেপ্ট অ্যাপ্লিকেশনের ভিউ লেয়ারের কাঠামোকে আরও পরিষ্কার এবং পুনঃব্যবহারযোগ্য করে তোলে। এখানে আমরা বিস্তারিতভাবে Layouts এবং Partials এর কাজ এবং ব্যবহারের পদ্ধতি আলোচনা করব।
Layouts
Layouts একটি সাধারণ পেজ কাঠামো বা টেমপ্লেট হিসেবে কাজ করে, যা সমস্ত পেজে পুনরায় ব্যবহার করা হয়। এটি একটি common structure প্রদান করে, যেমন: হেডার, ফুটার, ন্যাভিগেশন বার, যা একাধিক ভিউ বা পেজে ব্যবহৃত হতে পারে।
Layout ব্যবহার করার সুবিধা:
- কোড পুনঃব্যবহার: হেডার, ফুটার, নেভিগেশন বার একাধিক পেজে একবার ব্যবহার করলেই হয়।
- কনসিস্টেন্সি: সব পেজে একই লেআউট ব্যবহারের ফলে কনসিস্টেন্ট ইউজার ইন্টারফেস প্রদান করা যায়।
Layout সেটআপ
_Layout.cshtml ফাইল তৈরি:
- সাধারণত,
Views/Shared/_Layout.cshtmlনামক ফাইলটি Shared ফোল্ডারে রাখা হয় এবং এটি অ্যাপ্লিকেশনের মূল লেআউট হিসেবে কাজ করে। - এখানে সাধারণত HTML, CSS, এবং JavaScript কোড থাকে যা প্রতিটি পেজে ব্যবহৃত হয় (যেমন: হেডার, ফুটার, সাইডবার)।
উদাহরণ (প্রাথমিক _Layout.cshtml):
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>@ViewData["Title"]</title> <link rel="stylesheet" href="~/css/site.css" /> </head> <body> <header> <nav> <ul> <li><a href="/">Home</a></li> <li><a href="/About">About</a></li> <li><a href="/Contact">Contact</a></li> </ul> </nav> </header> <main> @RenderBody() </main> <footer> <p>© @DateTime.Now.Year - My ASP.Net Application</p> </footer> </body> </html>- সাধারণত,
Layout ব্যবহার করা:
- প্রতিটি ভিউতে লেআউট ব্যবহার করতে,
@Layoutডিরেকটিভ ব্যবহার করতে হয়। সাধারণত, এটি ভিউ ফাইলের শীর্ষে ব্যবহার করা হয়।
উদাহরণ:
@layout "_Layout.cshtml"- যদি আপনি ASP.Net Core MVC ব্যবহার করেন, তাহলে এটি সাধারনভাবে
Views/_ViewStart.cshtmlফাইলে ডিফাইন করা হয়:
@{ Layout = "_Layout"; }- প্রতিটি ভিউতে লেআউট ব্যবহার করতে,
- RenderBody():
- লেআউট ফাইলে
@RenderBody()ডিরেকটিভের মাধ্যমে মূল কনটেন্ট (যে ভিউটি ব্যবহার হচ্ছে) সেটি ইনজেক্ট করা হয়। প্রতিটি ভিউ RenderBody থেকে নিজের কন্টেন্ট পাঠায়।
- লেআউট ফাইলে
Partials
Partials হল ছোট ভিউ অংশ যা কোনও নির্দিষ্ট UI ফিচার বা উপাদান পুনঃব্যবহারযোগ্য করতে ব্যবহৃত হয়। পার্শিয়াল ভিউগুলি সাধারণত একাধিক স্থানে ব্যবহার করা হয়। উদাহরণস্বরূপ, একটি product list বা login form একটি পার্শিয়াল ভিউ হতে পারে, যা অনেক পেজে ব্যবহার করা হবে।
Partial ব্যবহার করার সুবিধা:
- কোড পুনঃব্যবহার: একাধিক ভিউতে একই UI কম্পোনেন্ট ব্যবহারের জন্য পার্শিয়াল ভিউ ব্যবহার করা হয়।
- অধিক সংগঠিত কোড: ছোট ছোট অংশে ভিউ ভাগ করে কোডের পরিস্কারতা এবং রক্ষণাবেক্ষণ সহজ করা হয়।
Partial তৈরি ও ব্যবহার
Partial ভিউ তৈরি করা:
- সাধারণত, পার্শিয়াল ভিউগুলি
Views/Sharedফোল্ডারে রাখা হয়। এগুলি .cshtml ফাইল হয়।
উদাহরণ:
_ProductList.cshtmlনামে একটি পার্শিয়াল ভিউ তৈরি করা।@model IEnumerable<MyApp.Models.Product> <div class="product-list"> @foreach (var product in Model) { <div class="product-item"> <h3>@product.Name</h3> <p>@product.Description</p> <span>@product.Price</span> </div> } </div>- সাধারণত, পার্শিয়াল ভিউগুলি
Partial ভিউ ব্যবহার করা:
- আপনি যে ভিউতে পার্শিয়াল ভিউ ব্যবহার করতে চান, সেখানে @Html.Partial() বা @await Html.PartialAsync() ডিরেকটিভ ব্যবহার করতে হবে।
উদাহরণ:
@Html.Partial("_ProductList", Model.Products)- @Html.Partial() সাধারণত সিঙ্ক্রোনাস পার্শিয়াল রেন্ডারিং জন্য ব্যবহৃত হয়, তবে @await Html.PartialAsync() অ্যাসিঙ্ক্রোনাস পার্শিয়াল রেন্ডারিং এর জন্য ব্যবহৃত হয় (যখন ডেটা লোড হতে পারে)।
উদাহরণ (Asynchronous):
@await Html.PartialAsync("_ProductList", Model.Products)
Layout এবং Partial এর পার্থক্য
| বৈশিষ্ট্য | Layout | Partial |
|---|---|---|
| ব্যবহার | সমস্ত পেজে সাধারণ কাঠামো প্রদান | নির্দিষ্ট UI অংশ পুনঃব্যবহার |
| কোড বিভাজন | সাধারণ পেজ কাঠামো (হেডার, ফুটার, সাইডবার) | ছোট ভিউ অংশ (ফর্ম, প্রোডাক্ট লিস্ট) |
| কোড পুনঃব্যবহার | একাধিক পেজে লেআউট পুনঃব্যবহার করা হয় | পার্শিয়াল ভিউ একাধিক স্থানে ব্যবহার করা হয় |
| প্রধান কাজ | পুরো পেজের কাঠামো সেট করা | ছোট অংশে UI উপাদান প্রদর্শন |
সারাংশ
- Layouts মূলত অ্যাপ্লিকেশনের পুরো পেজের কাঠামো নির্ধারণ করে, যেখানে আপনার অ্যাপ্লিকেশনের সাধারণ উপাদানগুলো যেমন হেডার, ফুটার, নেভিগেশন বার থাকে।
- Partials ছোট, পুনঃব্যবহারযোগ্য ভিউ অংশ হিসেবে কাজ করে, যেগুলি একাধিক পেজে ব্যবহার করা যায়।
এই দুটি কনসেপ্ট ব্যবহার করে আপনি আপনার ASP.Net প্রজেক্টের UI কে আরো পরিষ্কার, সংগঠিত এবং পুনঃব্যবহারযোগ্য করে তুলতে পারবেন।
Read more
