Quartz 5

24. UI Enhancements - Part 2

4 min read

স্বাগতম! আমরা এখন আপনার কোর্সের Section 20 (Filters)-এর সর্বশেষ প্র্যাকটিক্যাল লেকচার— “UI Enhancements - Part 2” (লেকচার ৩০৬)-এ আছি।

গত লেকচারে আমরা মূলত Index ভিউ এবং Layout ভিউয়ের ডিজাইন আপডেট করেছিলাম। আজকের লেকচারে আমরা বাকি পেজগুলো (যেমন: Create, Edit, Delete এবং Excel Upload) আপডেট করব এবং ফিল্টার ক্লাসে একটি ছোট্ট বাগ (Bug) ফিক্স করব, যাতে পেজ লোড হওয়ার সাথে সাথে টেবিলের ডিফল্ট সর্টিং আইকনটি ঠিকঠাক দেখায়। চলুন দেখে নিই!

📝 Quick Revision Summary

ভবিষ্যতে দ্রুত রিভিশন দেওয়ার জন্য আজকের লেকচারের মূল কাজগুলো নিচে দেওয়া হলো:

  • Buttons CSS Update (Index.cshtml): টেবিলের ডানপাশে থাকা Edit এবং Delete লিংকগুলোতে যথাক্রমে button-blue-back এবং button-red-back CSS ক্লাস বসানো হয়েছে।
  • Breadcrumbs Addition: Index পেজের মতো Create, Edit, Delete এবং Upload from Excel পেজেও Breadcrumbs (যেমন: Contacts > Persons > Create) অ্যাড করা হয়েছে।
  • Form Container Update: ফর্মগুলোকে সুন্দর সাদা বাক্সে রাখার জন্য center-box ক্লাসের বদলে form-container ক্লাস ব্যবহার করা হয়েছে।
  • Bug Fix in Filter (PersonsListActionFilter): পেজ প্রথমে লোড হওয়ার সময় (যখন কোনো Sort প্যারামিটার থাকে না), তখন ডিফল্ট সর্টিং আইকন দেখানোর জন্য ফিল্টারের OnActionExecuted মেথডে else ব্লক যুক্ত করা হয়েছে।

🔍 Comprehensive Breakdown

১. Updating Edit & Delete Buttons [Priority: 8/10]

Index.cshtml পেজে টেবিলের প্রতি রো-এর শেষে থাকা Edit এবং Delete লিংকগুলোকে সাধারণ টেক্সট থেকে বাটনে কনভার্ট করা হয়েছে:

<a href="/Persons/Edit/@person.PersonID" class="button-link button-blue-back">Edit</a>
 
<a href="/Persons/Delete/@person.PersonID" class="button-link button-red-back ml">Delete</a>

এখানে ml (Margin-Left) ক্লাসটি দুটি বাটনের মাঝে সামান্য ফাঁকা জায়গা তৈরি করে।

২. Updating CRUD Views (Create, Edit, Delete, Upload) [Priority: 9/10]

বাকি সবগুলো পেজে প্রায় একই ধরনের পরিবর্তন আনা হয়েছে। লেকচারার Index পেজ থেকে Breadcrumbs-এর কোডটি কপি করে অন্য পেজগুলোতে পেস্ট করেছেন এবং পেজের নাম অনুযায়ী সামান্য পরিবর্তন করেছেন।

Create View (Create.cshtml) Example:

<div class="flex">
    <div class="flex-1 text-grey">
        <span>Contacts</span>
        <i class="fa-solid fa-caret-right"></i>
        <span>Persons</span>
        <i class="fa-solid fa-caret-right"></i>
        <span>Create</span> </div>
</div>
 
<div class="form-container">
    <a href="/Persons/Index" class="link-hover">Back to Persons List</a>
    <h2 class="text-large">Create Person</h2> </div>

💡 Pro Tip from Lecturer: লেকচারার একটি দারুণ সাজেশন দিয়েছেন। যেহেতু Breadcrumb-এর কোডটি সব পেজেই প্রায় এক, তাই আপনি চাইলে এটিকে একটি Partial View (যেমন _Breadcrumbs.cshtml) বানিয়ে নিতে পারেন। পেজের নাম (যেমন “Create” বা “Edit”) ViewBag দিয়ে পাস করে কোড ডুপ্লিকেশন কমানো যায়।

৩. Fixing the Sorting Icon Bug via Action Filter [Priority: 10/10]

The Problem: ইউজার যখন প্রথমবার /Persons/Index পেজে ঢোকে, তখন URL-এ কোনো sortBy বা sortOrder প্যারামিটার থাকে না। ফলে, পেজটি “Person Name” কলাম অনুযায়ী সর্ট হয়ে আসলেও, কলামের নামের পাশে আপ/ডাউন অ্যারো আইকনটি দেখাচ্ছিল না। The Cause: আমাদের PersonsListActionFilter-এ আমরা শুধু তখনই ViewBag আপডেট করছিলাম যখন রিকোয়েস্টের সাথে প্যারামিটার থাকে। else কন্ডিশনে কোনো ডিফল্ট ভ্যালু সেট করা ছিল না।

The Solution: PersonsListActionFilter.cs ফাইলে OnActionExecuted মেথডে (যেখানে আমরা HttpContext.Items থেকে প্যারামিটার রিড করছিলাম), সেখানে else ব্লক যুক্ত করা হয়েছে:

// In PersonsListActionFilter.cs -> OnActionExecuted()
 
// ১. Sort By Parameter Check
if (parameters.ContainsKey("sortBy"))
{
    personsController.ViewData["CurrentSortBy"] = Convert.ToString(parameters["sortBy"]);
}
else
{
    // যদি URL-এ sortBy না থাকে, তবে ডিফল্ট হিসেবে 'PersonName' সেট করা হচ্ছে
    personsController.ViewData["CurrentSortBy"] = nameof(PersonResponse.PersonName);
}
 
// ২. Sort Order Parameter Check
if (parameters.ContainsKey("sortOrder"))
{
    personsController.ViewData["CurrentSortOrder"] = Convert.ToString(parameters["sortOrder"]);
}
else
{
    // যদি URL-এ sortOrder না থাকে, তবে ডিফল্ট হিসেবে 'ASC' সেট করা হচ্ছে
    personsController.ViewData["CurrentSortOrder"] = nameof(SortOrderOptions.ASC);
}

ফলাফল: এখন ইউজার প্রথমবার পেজে ঢুকলেও ফিল্টারটি else ব্লকে গিয়ে ডিফল্ট ভ্যালুগুলো ViewData-তে সেট করে দেবে, ফলে View-তে “Person Name” কলামের পাশে ঠিকঠাক আইকন দেখাবে।

৪. Re-enabling Client-side Validations [Priority: 8/10]

আগের লেকচারগুলোতে ফিল্টারের শর্ট-সার্কিটিং (Short-circuiting) চেক করার জন্য লেকচারার Create.cshtml এবং Edit.cshtml পেজের নিচের দিক থেকে ক্লায়েন্ট-সাইড ভ্যালিডেশনের স্ক্রিপ্টগুলো (_ValidationScriptsPartial) কমেন্ট করে রেখেছিলেন। এখন যেহেতু সব টেস্টিং শেষ, তাই সেগুলোকে আবার আনকমেন্ট (Uncomment) করে দেওয়া হয়েছে, যাতে ফর্ম সাবমিট করার আগেই ব্রাউজারে ভ্যালিডেশন এররগুলো ধরা পড়ে।

🚀 Conclusion of the Section

এই লেকচারের মাধ্যমেই আমাদের ফিল্টারের প্র্যাকটিক্যাল প্রয়োগ এবং UI আপডেটের কাজ শেষ হলো। এই সেকশনে আপনি सीखেছেন:

  • 5 ধরণের ফিল্টার (Authorization, Resource, Action, Exception, Result) এবং তাদের কাজ।
  • ফিল্টার পাইপলাইনের আর্কিটেকচার এবং শর্ট-সার্কিটিং।
  • IOrderedFilter দিয়ে কাস্টম সিরিয়াল মেইনটেইন করা।
  • IFilterFactory দিয়ে ক্লিন কোড লেখা এবং Dependency Injection ব্যবহার করা।

আপনার কোর্স Outline অনুযায়ী পরবর্তী লেকচারে হয়তো আমরা “Configure Services Extension” নিয়ে আলোচনা করব। আপনি রেডি হলে জানাবেন!

Graph View

Backlinks