Quartz 5

6. Script Tag Helpers

4 min read

হ্যালো হাসিব! এই লেকচারটি মূলত আমাদের আগের শেখা Client-Side Validation স্ক্রিপ্টগুলোকে আরও অপটিমাইজ এবং ফেইল-সেফ (Fail-safe) করার ওপর ফোকাস করেছে। যখন আমরা থার্ড-পার্টি CDN (যেমন cdnjs) ব্যবহার করি, তখন সার্ভার ডাউন থাকার একটা ঝুঁকি থাকে। এই লেকচারে দেখানো হয়েছে কীভাবে Script Tag Helpers ব্যবহার করে CDN ফেইল করলে আমাদের নিজেদের সার্ভার (wwwroot) থেকে লোকাল স্ক্রিপ্ট লোড করা যায়। এছাড়া, স্ক্রিপ্টগুলোকে পেজের একদম শেষে লোড করার জন্য Layout Sections-এর ব্যবহারও দেখানো হয়েছে।

চলো লেকচারটির একটি কুইক সামারি দেখে নিই।

📌 Quick Summary for Revision

  • The CDN Risk: CDN লিংক ইউজ করলে ব্রাউজার ক্যাশিংয়ের সুবিধা পাওয়া যায়, কিন্তু CDN ডাউন থাকলে অ্যাপ্লিকেশন ব্রেক করতে পারে।
  • Downloading Local Copies: jquery.min.js, jquery.validate.min.js এবং jquery.validate.unobtrusive.min.js ফাইলগুলো ডাউনলোড করে প্রজেক্টের wwwroot ফোল্ডারে রাখা।
  • Script Tag Helpers (asp-fallback): asp-fallback-src এবং asp-fallback-test ব্যবহার করে একটি ফলব্যাক মেকানিজম তৈরি করা (যদি CDN কাজ না করে, তবে লোকাল ফাইল লোড হবে)।
  • Layout Sections (@section): ভিউয়ের বডি কনটেন্টের মাঝে স্ক্রিপ্ট না লিখে, সেগুলোকে @section Scripts { ... } এর ভেতর রাখা এবং _Layout.cshtml-এর বডি ট্যাগের ঠিক আগে @await RenderSectionAsync("Scripts", required: false) দিয়ে কল করা।

🚀 Comprehensive Breakdown & The “Why”

নিচে লেকচারের প্রতিটি কনসেপ্ট বিস্তারিত এবং কারণসহ এক্সপ্লেইন করা হলো:

১. Script Tag Helpers (Fallback Mechanism) [Priority: 10/10]

The “Why”: আমরা চাই ব্রাউজার প্রথমে ফাস্ট এবং ক্যাশড CDN থেকে ফাইল লোড করার ট্রাই করুক। কিন্তু যদি ইন্টারনেট বা থার্ড-পার্টি সার্ভারের প্রবলেমের কারণে CDN লিংক ফেইল করে, তাহলে যেন আমাদের ফর্মের ভ্যালিডেশন কাজ করা বন্ধ না করে। এই ব্যাকআপ প্ল্যান তৈরি করতেই asp-fallback অ্যাট্রিবিউটগুলো ব্যবহার করা হয়।

How it works:

  • asp-fallback-test="window.jQuery": এই কোডটি ব্রাউজারকে বলে, “তুমি প্রথমে CDN থেকে ফাইলটা আনো। আনার পর চেক করো উইন্ডোতে jQuery নামের কোনো অবজেক্ট আছে কি না। যদি না থাকে (undefined), তার মানে CDN কাজ করেনি।”
  • asp-fallback-src="~/jquery.min.js": “যেহেতু CDN কাজ করেনি, তাই তুমি এখন আমার প্রজেক্টের wwwroot ফোল্ডার থেকে এই লোকাল ফাইলটা লোড করো।”

Implementation (Create.cshtml):

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"
        asp-fallback-test="window.jQuery"
        asp-fallback-src="~/jquery.min.js"></script>
 
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-validate/1.19.4/jquery.validate.min.js"
        asp-fallback-test="window.jQuery.validator"
        asp-fallback-src="~/jquery.validate.min.js"></script>
 
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-validation-unobtrusive/3.2.12/jquery.validate.unobtrusive.min.js"
        asp-fallback-test="window.jQuery.validator.unobtrusive"
        asp-fallback-src="~/jquery.validate.unobtrusive.min.js"></script>

২. Layout Sections (@section) [Priority: 10/10]

The “Why”: আগের লেকচারে আমরা স্ক্রিপ্টগুলো সরাসরি Create.cshtml ফাইলের নিচে লিখেছিলাম। যেহেতু এই ফাইলটি _Layout.cshtml-এর @RenderBody() এর জায়গায় রেন্ডার হয়, তাই স্ক্রিপ্টগুলো পেজের মাঝখানে (div এর ভেতরে) চলে যাচ্ছিল। জাভাস্ক্রিপ্টের বেস্ট প্র্যাকটিস হলো পেজের সমস্ত HTML (DOM) লোড হওয়ার পর একদম শেষে (</body> ট্যাগের ঠিক আগে) স্ক্রিপ্ট লোড করা, যাতে পেজ দ্রুত ইউজারকে দেখানো যায়। এই সমস্যা সমাধানের জন্যই Layout Section ব্যবহার করা হয়।

Implementation (Create.cshtml):

@* Create.cshtml ফাইলে স্ক্রিপ্টগুলোকে একটি সেকশনের ভেতর মুড়িয়ে দেওয়া *@
@section Scripts {
    <script src="https://cdnjs..."></script>
    }

Implementation (_Layout.cshtml):

@* _Layout.cshtml ফাইলের একদম শেষে *@
<body>
    <div class="page-content">
        @RenderBody() </div>
 
    @* required: false দেওয়ার কারণ হলো, Index পেজে তো কোনো ভ্যালিডেশন স্ক্রিপ্ট নেই, তখন যেন অ্যাপ ক্র্যাশ না করে *@
    @await RenderSectionAsync("Scripts", required: false) 
</body>
</html>

🆕 .NET 10 & Modern Approaches (Library Manager - LibMan)

লেকচারে ফাইলগুলো ব্রাউজার থেকে ডাউনলোড করে ম্যানুয়ালি কপি করে wwwroot ফোল্ডারে পেস্ট করা হয়েছে। এটি অনেক পুরনো পদ্ধতি এবং ভার্সন ম্যানেজ করা খুব কঠিন। মডার্ন ASP.NET Core (এবং .NET 10)-এ ক্লায়েন্ট-সাইড লাইব্রেরি ম্যানেজ করার জন্য LibMan (Library Manager) ব্যবহার করা হয়।

Modern Workflow (Using LibMan in Visual Studio):

  1. প্রজেক্টের ওপর রাইট-ক্লিক করো -> Add -> Client-Side Library...
  2. Provider হিসেবে cdnjs সিলেক্ট করো।
  3. Library এর নাম লেখো (যেমন: jquery@3.6.0) এবং Install বাটনে ক্লিক করো। ব্যাস! ভিজ্যুয়াল স্টুডিও নিজে থেকেই সঠিক ফাইলগুলো ডাউনলোড করে wwwroot/lib/jquery/... ফোল্ডারে সেভ করে রাখবে। ম্যানুয়াল ডাউনলোডের কোনো ঝামেলা নেই।

⌨️ IDE Shortcuts

  • Inspect Element (Network Tab): Ctrl + Shift + I চেপে Developer Tools ওপেন করার পর Network ট্যাবে গেলে দেখা যায় পেজ লোড হওয়ার সময় কোন কোন স্ক্রিপ্ট বা ফাইল ডাউনলোড হচ্ছে। (স্ক্রিপ্ট ঠিকমতো লোড হচ্ছে কি না, তা চেক করার বেস্ট জায়গা এটি)।

💡 Best Practices (Script Management)

১. Partial View for Validation Scripts: এর আগের লেকচারেও বলেছিলাম, এই ৩টি স্ক্রিপ্টের এত বড় কোড প্রতিটি Create/Edit ভিউতে বারবার না লিখে, _ValidationScriptsPartial.cshtml নামের একটি Partial View বানিয়ে তার ভেতর কোডগুলো রাখা উচিত। তারপর @section Scripts { <partial name="_ValidationScriptsPartial" /> } লিখে কল করা বেস্ট প্র্যাকটিস। ২. Always place Scripts at the bottom: পারফরম্যান্স অপটিমাইজেশনের জন্য সব সময় জাভাস্ক্রিপ্ট ফাইলগুলো </body> ট্যাগের ঠিক আগে লোড করবে।

এই লেকচারের মাধ্যমে আমাদের ফর্ম সাবমিশন এবং ভ্যালিডেশন পার্টটি প্রোডাকশন-রেডি হয়ে গেল। এরপর কি আমরা Edit/Update Person পেজের কাজ শুরু করবো?

Graph View

Backlinks