Quartz 5

2. Views

6 min read

স্বাগতম! আজকের লেকচারে আমরা ASP.NET Core-এ Views কীভাবে কাজ করে এবং কীভাবে একটি বেসিক View তৈরি করতে হয়, তা নিয়ে বিস্তারিত আলোচনা করব।

চলুন শুরুতেই পুরো লেকচারের একটি সংক্ষিপ্ত সামারি দেখে নিই।

flowchart TD

    C[Controller Action]

    C --> VD[ViewData]
    C --> VB[ViewBag]
    C --> M[Strongly Typed Model]

    VD --> V[View]
    VB --> V
    M --> V

    subgraph View_Files
        VI[_ViewImports.cshtml]
        VS[_ViewStart.cshtml]
        V[Main View]
    end

    VI --> V
    VS --> V

    V --> LV[Layout View]

    subgraph Layout_System
        LV --> SEC[RenderSection]
        LV --> BODY[RenderBody]
    end

    BODY --> PV[Partial View]
    BODY --> VC[View Component]

    VD --> PV
    M --> PV

    VD --> VC
    M --> VC
    PARAM[Parameters] --> VC

    VC --> VCR[ViewComponentResult]
    PV --> PVR[PartialViewResult]

    subgraph Reusability
        SH[Shared Folder]
    end

    SH --> LV
    SH --> PV
    SH --> VC

    subgraph Advanced
        DLV[Dynamic Layout]
        NLV[Nested Layout]
        MM[Multiple Models]
    end

    V --> DLV
    LV --> NLV
    M --> MM

📝 লেকচার সামারি (Quick Revision List)

  • View-এর কাজ: View মূলত ওয়েব পেইজ যা presentation logic বা design logic ধারণ করে।
  • Execution Flow: একটি View-এর C-sharp কোড server-side-এ এক্সিকিউট হয় এবং HTML কোড client-side (Browser)-এ এক্সিকিউট হয়।
  • Controller-এর দায়িত্ব: Controller নিজে কোনো আউটপুট জেনারেট করে না। এটি ViewModel অবজেক্ট তৈরি করে ডাটা প্রস্তুত করে এবং উপযুক্ত View-কে কল করে ডাটা পাস করে।
  • Configuration: program.cs ফাইলে MVC এনাবল করার জন্য AddControllersWithViews() সার্ভিসটি অ্যাড করতে হয়।
  • View রিটার্ন করা: Controller-এর Action Method থেকে return View(); কল করার মাধ্যমে ViewResult জেনারেট করা হয়।
  • Default Naming Convention: ASP.NET Core স্বয়ংক্রিয়ভাবে View ফাইলটি Views/{ControllerName}/{ActionMethodName}.cshtml পাথে খোঁজে।
  • File Extension: View ফাইলের এক্সটেনশন হলো .cshtml (যেখানে ‘cs’ মানে C-sharp এবং ‘html’ মানে HTML)।

📖 Comprehensive Breakdown (বিস্তারিত বিশ্লেষণ)

১. View এবং এর Execution Flow (Importance: 10/10)

View হলো আপনার অ্যাপ্লিকেশনের সেই অংশ যা ইউজার স্ক্রিনে দেখতে পান। এটি HTML এবং C-sharp কোডের একটি সংমিশ্রণ (যাকে Razor syntax বলা হয়)।

কেন এটি গুরুত্বপূর্ণ (The “Why”): HTML হলো static, এটি কোনো লজিক বা ডাইনামিক ডাটা প্রসেস করতে পারে না। C-sharp সার্ভার থেকে ডাইনামিক ডাটা আনে। View এই দুটিকে মিলিয়ে একটি ডাইনামিক ওয়েব পেইজ তৈরি করে।

কীভাবে কাজ করে:

  1. প্রথমে Server-side-এ View-এর ভেতরের C-sharp কোডগুলো এক্সিকিউট হয় এবং ডাইনামিক ডাটাগুলো HTML-এ কনভার্ট হয়।
  2. এরপর সম্পূর্ণ plain HTML কোড Browser-এর কাছে Response হিসেবে পাঠানো হয়।
  3. Browser শুধু HTML, CSS এবং JavaScript বোঝে। তাই Browser এই HTML রিসিভ করে ইউজারকে একটি সুন্দর ওয়েব পেইজ প্রদর্শন করে।

২. Controller এবং ViewModel-এর ভূমিকা (Importance: 9/10)

Controller হলো অ্যাপ্লিকেশনের ব্রেইন। রিকুয়েস্ট আসলে Controller ঠিক করে কোন View দেখাতে হবে।

The “Why” - Controller কীভাবে কাজ করে: ধরে নিন, আপনার একটি displayMode নামের Route Parameter আছে। যদি এর ভ্যালু summary হয়, Controller একটি নির্দিষ্ট View দেখাবে, আর যদি detailed হয়, তবে অন্য একটি View দেখাবে। Controller ডাটাবেস থেকে ডাটা এনে একটি ViewModel (যেমন: EmployeeViewModel) তৈরি করে এবং সেই অবজেক্টটি View-এর কাছে পাঠিয়ে দেয়। View সেই ViewModel থেকে প্রপার্টিগুলো পড়ে HTML-এ বসিয়ে দেয়।

৩. MVC Environment Setup (Importance: 8/10)

একটি Empty ASP.NET Core প্রজেক্টে Views নিয়ে কাজ করার জন্য program.cs ফাইলে কিছু কনফিগারেশন করতে হয়।

Code Implementation:

var builder = WebApplication.CreateBuilder(args);
 
// Controllers এবং Views-কে Services হিসেবে অ্যাড করা হচ্ছে
builder.Services.AddControllersWithViews(); 
 
var app = builder.Build();
 
// Static files (CSS, JS, Images) সার্ভ করার জন্য wwwroot ফোল্ডার এনাবল করা
app.UseStaticFiles(); 
 
app.UseRouting();
 
// Controller-এর রাউটিং ম্যাপ করা
app.MapDefaultControllerRoute(); 
 
app.Run();

৪. Controller-এ View রিটার্ন করা (Importance: 10/10)

Controller-এর Action Method থেকে View দেখানোর জন্য ViewResult অবজেক্ট রিটার্ন করতে হয়।

Code Implementation:

public class HomeController : Controller
{
    [Route("home")]
    public IActionResult Index()
    {
        // Manual বা lengthy পদ্ধতি (সচরাচর ব্যবহার হয় না)
        // return new ViewResult() { ViewName = "abc" };
 
        // Shortcut এবং বহুল ব্যবহৃত পদ্ধতি
        return View(); 
    }
}

এখানে return View(); দিলে এটি ডিফল্টভাবে Action Method-এর নামেই (যেমন: Index) View ফাইল খুঁজবে। আপনি চাইলে নির্দিষ্ট নামও দিতে পারেন: return View(“abc”);।

৫. Default View Location Convention (Importance: 10/10)

আপনি চাইলেই যেকোনো ফোল্ডারে View ফাইল রাখতে পারবেন না। ASP.NET Core একটি নির্দিষ্ট Convention বা নিয়ম মেনে চলে।

The Rule:

  1. প্রোজেক্টের রুটে একটি Views ফোল্ডার থাকতে হবে।
  2. তার ভেতরে Controller-এর নামের (Controller শব্দটি ছাড়া) একটি সাব-ফোল্ডার থাকতে হবে। (যেমন: HomeController-এর জন্য ফোল্ডারের নাম হবে Home)।
  3. সেই সাব-ফোল্ডারের ভেতরে Action Method-এর নামে .cshtml ফাইল থাকতে হবে। (যেমন: Index.cshtml)।
  4. যদি এই পাথে ফাইল না পাওয়া যায়, তবে এটি Views/Shared ফোল্ডারে খুঁজবে।

Directory Structure:

Project Root
 ├── Controllers
 │    └── HomeController.cs
 ├── Views
 │    ├── Home
 │    │    └── Index.cshtml  <-- Default location for Index action
 │    └── Shared
 ├── wwwroot

৬. .cshtml ফাইলে HTML স্ট্রাকচার (Importance: 7/10)

একটি .cshtml ফাইল (Razor View) মূলত একটি HTML পেইজ। লেকচারে দেখানো বেসিক HTML স্ট্রাকচার নিচে দেওয়া হলো:

Code Implementation:

<!-- Views/Home/Index.cshtml -->
<html>
<head>
    <title>Welcome to ASP.NET Core</title>
    <!-- utf-8 এনকোডিং সেট করা হচ্ছে যাতে সব ধরণের ক্যারেক্টার সাপোর্ট করে -->
    <meta charset="utf-8" />
</head>
<body>
    <h1>Welcome</h1>
</body>
</html>

৭. Debugging এবং Browser Network Tab (Importance: 6/10)

লেকচারে ডিবগিংয়ের একটি সুন্দর শর্টকাট দেখানো হয়েছে।

  • Visual Studio/Browser Shortcut: ব্রাউজারে রান করার পর Ctrl + Shift + I চাপলে Developer Tools-এর Network Tab ওপেন হবে।
  • এখানে আপনি দেখতে পাবেন Request URL, Status এবং Content-Type (যা text/html হিসেবে থাকে)।
  • Browser Link: Visual Studio-এর একটি ফিচার হলো “Browser Link”, যার কারণে ডেভেলপমেন্ট মোডে .cshtml ফাইলে কিছু পরিবর্তন করলে ব্রাউজার অটো রিফ্রেশ হয়। এর জন্য Response-এ অটোমেটিক কিছু জাভাস্ক্রিপ্ট ইনজেক্ট হয়, যা প্রোডাকশন এনভায়রনমেন্টে থাকে না।

🚀 .NET 10 Updates & Modern Approach

MVC (Model-View-Controller) প্যাটার্নটি গতানুগতিক Server-rendered ওয়েব অ্যাপ্লিকেশন তৈরি করার জন্য এখনো বহুল ব্যবহৃত। তবে .NET 10-এ ওয়েব ডেভেলপমেন্ট আরও আধুনিক হয়েছে।

যদি আপনার অ্যাপ্লিকেশনের UI (View) React, Angular বা Vue.js দিয়ে তৈরি হয়, তবে আপনার সম্পূর্ণ MVC দরকার নেই। সেক্ষত্রে Minimal APIs ব্যবহার করা সবচেয়ে আপডেটেড প্রসেস, যা অনেক বেশি ফাস্ট এবং লাইটওয়েট।

Modern .NET 10 Minimal API Example (No HTML View rendering on Server):

var builder = WebApplication.CreateBuilder(args);
var app = builder.Build();
 
// Controller বা View ফোল্ডারের ঝামেলা ছাড়াই সরাসরি ডাটা রিটার্ন
app.MapGet("/home/data", () => 
{
    var viewModel = new { Name = "Hasib", Role = "Developer" };
    return Results.Json(viewModel); // UI-এর (Angular/React) জন্য JSON ডাটা
});
 
app.Run();

যাইহোক, যদি আপনাকে HTML Server থেকেই রেন্ডার করতে হয় (যেমন এই লেকচারে দেখানো হয়েছে), তবে MVC Views বা Razor Pages-ই হলো সঠিক এবং স্ট্যান্ডার্ড পদ্ধতি।

⭐ Best Practices (Views & MVC)

  1. Keep Views Clean (Logic-less Views): View-এর ভেতরে কখনোই ডাটাবেস কোয়েরি বা জটিল C-sharp লজিক লিখবেন না (যেমন: if-else এর বিশাল ব্লক)। যাবতীয় ডাটা প্রসেসিং Controller এবং Business Model-এ করে, View-তে শুধু লুপ চালিয়ে ডাটা প্রদর্শন করুন।
  2. Use Strongly Typed Views: View-তে ডাটা রিসিভ করার জন্য সবসময় নির্দিষ্ট ViewModel ক্লাস ব্যবহার করুন। এতে Compile-time টাইপ চেকিং পাওয়া যায়।
@model EmployeeViewModel
 
<h1>@Model.Name</h1> <!-- Type-safe approach -->
  1. Follow the Naming Convention: ASP.NET Core-এর ডিফল্ট Views/{ControllerName}/{ActionName}.cshtml কনভেনশন কঠোরভাবে মেনে চলুন। ম্যানুয়ালি View-এর নাম পাস করলে (return View(“CustomName”)) ভবিষ্যতে প্রজেক্ট বড় হলে কনফিউশন তৈরি হয়।

Graph View

Backlinks