4. PartialViewResult

হ্যালো হাসিব! কোর্স আউটলাইন অনুযায়ী আমরা এখন Section 10: Partial Views-এর সর্বশেষ লেকচার “PartialViewResult” (Lecture 117)-এ আছি। এই লেকচারটি অত্যন্ত গুরুত্বপূর্ণ, কারণ এখানে দেখানো হয়েছে কীভাবে Controller থেকে সরাসরি একটি Partial View রিটার্ন করে JavaScript (AJAX/Fetch API)-এর মাধ্যমে পেজ রিলোড ছাড়াই ডায়নামিক কন্টেন্ট লোড করা যায়।

চলো, পুরো প্রসেসটিকে সুন্দরভাবে ডিকোড করে ফেলি।

---

সারসংক্ষেপ (Quick Revision List)

• PartialViewResult কী: এটি Controller-এর একটি রিটার্ন টাইপ (যেমন ViewResult), যা পুরো পেজের পরিবর্তে শুধুমাত্র একটি নির্দিষ্ট Partial View-এর HTML কন্টেন্ট রিটার্ন করে।
• কেন ব্যবহার করবো: Asynchronous Request (AJAX/Fetch API)-এর মাধ্যমে ব্রাউজার রিলোড ছাড়াই সার্ভার থেকে ডাটা লোড করে পেজে দেখানোর জন্য এটি ব্যবহৃত হয় (যেমন: “Load More”, “Show Orders” বাটন)।
• Controller Setup: Action Method-এ return PartialView("_ViewName", modelObject); লিখতে হয়।
• Frontend Setup: JavaScript-এর fetch() API ব্যবহার করে ঐ Action Method-এ রিকোয়েস্ট পাঠাতে হয় এবং সার্ভার থেকে আসা রেসপন্সকে (HTML text) পেজের কোনো নির্দিষ্ট div-এ বসিয়ে দিতে হয়।

---

Comprehensive Breakdown

১. PartialViewResult-এর ধারণা এবং প্রয়োজনীয়তা [Priority: 10/10]

সাধারণত আমরা Controller থেকে return View() কল করি, যা পুরো Layout-সহ সম্পূর্ণ HTML পেজ ব্রাউজারে পাঠায়। কিন্তু ধরো, তোমার পেজে একটি “Load Programming Languages” বাটন আছে। তুমি চাও ঐ বাটনে ক্লিক করলে পেজ রিলোড না হয়ে শুধু একটুখানি কন্টেন্ট (একটি লিস্ট) সার্ভার থেকে আসবে এবং পেজে বসে যাবে।

এই কাজের জন্য Controller থেকে return PartialView() ব্যবহার করা হয়। এটি কোনো Layout লোড না করে শুধুমাত্র Partial View-এর ভেতরের কোডটুকু HTML টেক্সট হিসেবে রিটার্ন করে। ব্রাউজার (JavaScript) সেই টেক্সট রিসিভ করে পেজে ইনজেক্ট করে দেয়। একেই বলে Asynchronous Partial Loading।

২. Controller-এ Action Method তৈরি করা [Priority: 10/10]

প্রথমে HomeController-এ একটি নতুন Action Method তৈরি করতে হবে যা শুধুমাত্র ঐ Partial View-টিকে রিটার্ন করবে।

Code Implementation (Controllers/HomeController.cs):

// Route ডিফাইন করা হচ্ছে
[Route("programming-languages")]
public IActionResult ProgrammingLanguages()
{
    // ১. Model অবজেক্ট তৈরি
    var listModel = new ListModel()
    {
        ListTitle = "Programming Languages",
        ListItems = new List<string>() { "C#", "Java", "Python", "JavaScript" }
    };
 
    // ২. PartialView রিটার্ন করা (View Name এবং Model সহ)
    // Long form: return new PartialViewResult() { ViewName = "_ListPartialView", ViewData = new ViewDataDictionary(...) };
    // Short form (Recommended):
    return PartialView("_ListPartialView", listModel); 
}
 

৩. Frontend-এ Button এবং Container তৈরি করা [Priority: 9/10]

Index.cshtml-এ এমন একটি বাটন এবং ফাঁকা div বানাতে হবে, যেখানে ডাটা এসে বসবে।

Code Implementation (Views/Home/Index.cshtml):

<h2>Welcome to Home Page</h2>
 
<!-- বাটন, যেটাতে ক্লিক করলে সার্ভারে রিকোয়েস্ট যাবে -->
<button type="button" class="button button-blue" id="button-load">
    Load Programming Languages
</button>
 
<!-- কন্টেইনার, যেখানে রেসপন্স এসে বসবে -->
<div class="list-box"></div>
 

৪. JavaScript (Fetch API) দিয়ে Asynchronous Request পাঠানো [Priority: 10/10]

এবার ঐ ভিউ ফাইলের নিচেই script ট্যাগের মাধ্যমে জাভাস্ক্রিপ্ট লিখতে হবে, যা বাটনে ক্লিক করলে সার্ভারে রিকোয়েস্ট পাঠাবে।

Code Implementation (JavaScript inside Index.cshtml):

<script>
    // ১. বাটনের রেফারেন্স ধরা
    document.querySelector("#button-load").addEventListener("click", async function () {
        
        // ২. Fetch API দিয়ে সার্ভারে (Controller-এ) রিকোয়েস্ট পাঠানো
        // URL-টা ঐ Action Method-এর রাউট
        var response = await fetch("/programming-languages");
        
        // ৩. সার্ভার থেকে আসা রেসপন্সকে Plain Text (HTML) হিসেবে পড়া
        // Note: JSON হলে .json() হতো, কিন্তু Partial View HTML পাঠায়, তাই .text()
        var languagesHtml = await response.text(); 
        
        // ৪. সেই HTML-কে আমাদের নির্দিষ্ট ফাঁকা div-এর ভেতরে বসিয়ে দেওয়া
        document.querySelector(".list-box").innerHTML = languagesHtml;
    });
</script>
 

৫. Execution Flow (কীভাবে কাজ করছে?) [Priority: 9/10]

লেকচারার ব্রেকপয়েন্ট (Breakpoint) বসিয়ে পুরো ফ্লো-টা বুঝিয়েছেন:

1. ইউজার localhost:xxxx ভিজিট করলে Index মেথড কল হয় এবং পেজ লোড হয়। (তখন স্ক্রিপ্ট রান হয় না, শুধু ব্রাউজারে যায়)।
2. ইউজার যখন বাটনে ক্লিক করে, তখন JavaScript fetch("/programming-languages") ফায়ার করে।
3. রিকোয়েস্টটি HomeController-এর ProgrammingLanguages মেথডে যায়।
4. মেথডটি ডাটা রেডি করে _ListPartialView-কে পাস করে।
5. 서버 _ListPartialView-এর কোড (C# Loop) এক্সিকিউট করে সম্পূর্ণ প্লেইন HTML জেনারেট করে (যেমন: <li>C#</li>)।
6. ব্রাউজারের Network ট্যাবে একটি 200 OK রেসপন্স আসে, যার বডিতে ঐ HTML থাকে।
7. JavaScript সেই HTML-টা রিসিভ করে পেজের div-এ বসিয়ে দেয়। পেজ রিলোড ছাড়াই ডাটা লোড হয়ে যায়!

---

VS / VS Code Shortcuts (For faster debugging)

• Toggle Breakpoint: যেকোনো লাইনে কার্সর রেখে F9 চাপলে ব্রেকপয়েন্ট বসবে বা উঠবে।
• Step Over (Next Line during debug): F10
• Step Into (Go inside method): F11
• Continue (Run until next breakpoint): F5

---

Best Practices & .NET 10 Context

Best Practices for PartialViewResult:

1. Use [HttpGet] or [HttpPost]: Action Method-এর উপরে সবসময় HTTP Verb মেনশন করা উচিত (যেমন [HttpGet("programming-languages")])।
2. Error Handling in JS: Fetch API ব্যবহার করলে সবসময় try-catch ব্লক ব্যবহার করা উচিত, যাতে সার্ভার এরর (500) বা নেটওয়ার্ক এরর হলে ইউজারকে সুন্দর মেসেজ দেখানো যায়।

try {
    var response = await fetch("/programming-languages");
    if(!response.ok) throw new Error("Network issue!");
    // read text and inject...
} catch (error) {
    console.error(error);
    alert("Failed to load data.");
}
 

.NET 10 Context (.NET 10-এ PartialViewResult): ASP.NET Core 10-এও PartialViewResult-এর কনসেপ্ট পুরোপুরি এক। তবে .NET 8/9/10-এ যদি তুমি HTMX (একটি মডার্ন ফ্রন্টএন্ড লাইব্রেরি) ব্যবহার করো, তবে এই পুরো JavaScript-এর কাজটা তুমি ২ লাইনের HTML দিয়েই করে ফেলতে পারো।

যেমন, .NET 10 + HTMX দিয়ে করলে উপরের কাজটা জাভাস্ক্রিপ্ট ছাড়াই এভাবে করা যেত:

<button hx-get="/programming-languages" hx-target=".list-box">
    Load Programming Languages
</button>
<div class="list-box"></div>
 

Note: HTMX এই কোর্সের অংশ না হলেও মডার্ন .NET ডেভেলপারদের জন্য এটি জানা খুবই উপকারী।

হাসিব, Partial Views-এর এই পুরো সেকশনটি আমাদের সফলভাবে শেষ হলো! এই Asynchronous লোডিং বা পুরো সেকশন নিয়ে তোমার কি কোনো প্রশ্ন আছে, নাকি আমরা নেক্সট সেকশন “View Components” শুরু করবো?