ASP.Net MVC এবং ASP.Net Core MVC অ্যাপ্লিকেশনে ভিউ (Views) হলো ব্যবহারকারীর ইন্টারফেস (UI) অংশ, যেখানে আপনি তথ্য প্রদর্শন করেন। এই ভিউগুলি HTML কোডের মাধ্যমে ডাটা রেন্ডার করে এবং ব্যবহারকারীর সাথে ইন্টারঅ্যাক্ট করতে সাহায্য করে। HTML Helpers হলো ASP.Net এর একটি সুবিধাজনক টুল যা HTML ট্যাগ তৈরি করতে সাহায্য করে এবং কোডের পুনঃব্যবহারযোগ্যতা নিশ্চিত করে।

১. ভিউ (Views) কী?

ASP.Net MVC এবং ASP.Net Core MVC তে, ভিউ হলো সেই অংশ যা ব্যবহারকারীর ব্রাউজারে দেখানো হয়। ভিউ সাধারনত Razor টেমপ্লেট (একটি ভিন্ন ধরনের HTML) ব্যবহার করে তৈরি হয়, যা C# কোড এবং HTML কে একত্রে রেন্ডার করে।

ভিউ তৈরির জন্য Razor টেমপ্লেট ব্যবহার করা হয়:

• .cshtml ফাইল গুলি Razor ফাইল হিসেবে পরিচিত, যেখানে HTML এর মধ্যে C# কোড বা লজিক রাখা যায়।
• ভিউটি কন্ট্রোলার থেকে ডেটা গ্রহণ করে এবং তা ইউজার ইন্টারফেসে প্রদর্শন করে।

উদাহরণ:

@model MyApp.Models.Product

<h2>@Model.Name</h2>
<p>@Model.Description</p>

এখানে, @model নির্দেশিকা দিয়ে আমরা ডেটা মডেল সংজ্ঞায়িত করেছি এবং তারপরে সেই মডেলের ফিল্ডগুলি ভিউতে রেন্ডার করছি।

ভিউ ফোল্ডার স্ট্রাকচার

• Views/Shared: সমস্ত শেয়ারড ভিউ (যেমন, Header, Footer) এখানে রাখা হয়।
• Views/[ControllerName]: প্রতিটি কন্ট্রোলারের জন্য আলাদা ভিউ ফোল্ডার থাকে।

২. HTML Helpers

HTML Helpers হলো ASP.Net MVC এবং ASP.Net Core MVC এর built-in ফাংশন, যা HTML ট্যাগ তৈরি করার কাজ সহজ করে। এই Helpers সাধারণত টেক্সট বক্স, ড্রপডাউন, চেকবক্স ইত্যাদি তৈরি করতে ব্যবহৃত হয়।

HTML Helpers ব্যবহার করে আপনি ডাইনামিক HTML ট্যাগ তৈরি করতে পারেন এবং সেগুলোকে সহজে কন্ট্রোলারের ডেটার সাথে যুক্ত করতে পারেন।

HTML Helper উদাহরণ:

1. TextBox (TextBoxFor):

   @Html.TextBoxFor(model => model.Name)
   

   এটি একটি ইনপুট টেক্সট ফিল্ড তৈরি করবে যা মডেলের Name প্রপার্টির সাথে বাঁধা থাকবে।

2. DropDownList (DropDownListFor):

   @Html.DropDownListFor(model => model.Category, new SelectList(Model.Categories, "Value", "Text"))
   

   এটি একটি ড্রপডাউন লিস্ট তৈরি করবে যেখানে মডেল থেকে ক্যাটেগরি ডেটা রেন্ডার হবে।

3. CheckBox (CheckBoxFor):

   @Html.CheckBoxFor(model => model.IsActive)
   

   এটি একটি চেকবক্স তৈরি করবে যা মডেলের IsActive প্রপার্টির সাথে সংযুক্ত থাকবে।

4. Label (LabelFor):

   @Html.LabelFor(model => model.Name)
   

   এটি একটি লেবেল তৈরি করবে যা মডেলের Name প্রপার্টি নামক লেবেল তৈরি করবে।

5. Button (ButtonFor):

   @Html.Button("Submit")
   

   এটি একটি সাবমিট বাটন তৈরি করবে।

HTML Helpers এর সুবিধা:

• Less code: HTML কোডের পরিবর্তে C# কোডে HTML ট্যাগ তৈরি করতে পারে।
• Model Binding: ফর্মে ব্যবহৃত ইনপুটের মান স্বয়ংক্রিয়ভাবে মডেলের সাথে বাঁধা যায়।
• Validation: HTML Helpers ফর্মে ডেটা ভ্যালিডেশন করতে সাহায্য করে।

৩. Custom HTML Helpers

যদি প্রয়োজন হয়, তবে আপনি নিজের কাস্টম HTML Helpers তৈরি করতে পারেন, যা সাধারণ HTML ট্যাগগুলোর মধ্যে পুনঃব্যবহারযোগ্যতা এবং কাস্টম ফাংশনালিটি যোগ করতে পারে।

কাস্টম HTML Helper উদাহরণ:

public static class HtmlHelpers
{
    public static IHtmlString MyCustomButton(this HtmlHelper htmlHelper, string buttonText)
    {
        var button = new TagBuilder("button");
        button.SetInnerText(buttonText);
        return MvcHtmlString.Create(button.ToString());
    }
}

এখন আপনি এই কাস্টম হেল্পারটি ভিউতে ব্যবহার করতে পারেন:

@Html.MyCustomButton("Click Me")

এই কাস্টম HTML Helper একটি কাস্টম বাটন তৈরি করবে।

৪. Partial Views

Partial Views হলো ভিউয়ের একটি ছোট অংশ যা আপনি একাধিক জায়গায় ব্যবহার করতে পারেন। এটি কোডের পুনঃব্যবহারযোগ্যতা নিশ্চিত করে এবং ভিউয়ের পারফরম্যান্স বাড়াতে সাহায্য করে।

Partial View Example:

1. Partial View তৈরি করা: একটি নতুন Razor ফাইল তৈরি করুন, যেমন _ProductList.cshtml:

   @model IEnumerable<MyApp.Models.Product>
   <ul>
       @foreach(var product in Model)
       {
           <li>@product.Name</li>
       }
   </ul>
   

2. Partial View রেন্ডার করা: আপনার ভিউতে Partial View রেন্ডার করতে Html.Partial অথবা Html.RenderPartial ব্যবহার করুন:

   @Html.Partial("_ProductList", Model.Products)
   

এতে, _ProductList পার্শিয়াল ভিউটি সম্পূর্ণ ভিউতে রেন্ডার হবে এবং আপনি একই UI অংশ বিভিন্ন জায়গায় ব্যবহার করতে পারবেন।

সারাংশ

• ভিউ (Views) ASP.Net MVC এবং ASP.Net Core MVC অ্যাপ্লিকেশনগুলোর UI (User Interface) তৈরি করতে ব্যবহৃত হয়। Razor টেমপ্লেট ব্যবহার করে HTML এবং C# কোড একত্রে রেন্ডার করা হয়।
• HTML Helpers হল built-in ফাংশন যা ডাইনামিক HTML ট্যাগ তৈরি করে, যেমন টেক্সট বক্স, ড্রপডাউন, চেকবক্স, ইত্যাদি।
• কাস্টম HTML Helpers তৈরি করে আপনি আরও কাস্টম এবং পুনঃব্যবহারযোগ্য HTML ট্যাগ তৈরি করতে পারেন।
• Partial Views ভিউয়ের পুনঃব্যবহারযোগ্য অংশ, যা কোডের পুনঃব্যবহারযোগ্যতা এবং পারফরম্যান্স বাড়াতে সাহায্য করে।

ASP.Net MVC এবং ASP.Net Core MVC তে এই ফিচারগুলো আপনাকে আরও উন্নত এবং মডুলার ওয়েব অ্যাপ্লিকেশন তৈরি করতে সাহায্য করবে।

ASP.Net MVC (Model-View-Controller) আর্কিটেকচারে, View হলো সেই অংশ যা ব্যবহারকারীর কাছে ডাটা প্রদর্শন করে। এটি সাধারণত Razor ভিউ ইঞ্জিন ব্যবহার করে HTML এবং C# কোডের সংমিশ্রণ তৈরি করে। ASP.Net Core MVC অ্যাপ্লিকেশনে, View তৈরি এবং কনফিগার করা সহজ এবং এটি MVC এর একটি গুরুত্বপূর্ণ অংশ।

View কি?

View হলো ব্যবহারকারীর সামনে দেখানোর জন্য একটি পৃষ্ঠা বা টেমপ্লেট যা ডাইনামিক HTML তৈরি করে। এটি সাধারণত Model থেকে ডাটা নেয় এবং তা HTML এর মাধ্যমে প্রদর্শন করে। ASP.Net Core MVC-এ View সাধারণত Razor ফাইল (.cshtml) হিসেবে তৈরি হয়।

Razor ভিউ ইঞ্জিন

Razor হলো একটি সিঙ্গেল-টেমপ্লেট ইঞ্জিন যা C# কোড এবং HTML কে একসাথে ব্যবহার করার সুযোগ দেয়। Razor ফাইলের একক এক্সটেনশন হল .cshtml এবং এতে HTML, C#, এবং Razor সিনট্যাক্স ব্যবহার করা যায়।

View তৈরি করার পদক্ষেপ

১. Controller তৈরি করা

প্রথমে আপনাকে একটি Controller তৈরি করতে হবে। Controller সাধারণত অনুরোধের প্রতি প্রতিক্রিয়া হিসেবে Action মেথডের মাধ্যমে ডাটা View এ পাঠায়।

public class HomeController : Controller
{
    public IActionResult Index()
    {
        var products = new List<string> { "Product 1", "Product 2", "Product 3" };
        return View(products); // ডাটা View এ পাঠানো হচ্ছে
    }
}

এখানে, Index মেথডে একটি লিস্টের মাধ্যমে ডাটা পাঠানো হচ্ছে, যা View-এ প্রদর্শিত হবে।

২. View তৈরি করা

এখন আপনাকে Views ফোল্ডারে Home নামে একটি ফোল্ডার তৈরি করতে হবে (যেহেতু কন্ট্রোলারের নাম HomeController)। তারপর Index.cshtml নামে একটি Razor ফাইল তৈরি করুন।

/Views
    /Home
        Index.cshtml

৩. Razor View তৈরি এবং ডাটা প্রদর্শন

Index.cshtml ফাইলের মধ্যে HTML এবং Razor সিনট্যাক্স ব্যবহার করে ডাটা প্রদর্শন করা হয়।

@model IEnumerable<string> <!-- এখানে ViewModel (ইউজার ডাটা) প্রাপ্ত হচ্ছে -->

<!DOCTYPE html>
<html>
<head>
    <title>Products</title>
</head>
<body>
    <h1>Product List</h1>
    <ul>
        @foreach(var product in Model) <!-- Model এর মধ্যে পাঠানো ডাটা -->
        {
            <li>@product</li> <!-- প্রতিটি প্রোডাক্ট প্রদর্শন করা হচ্ছে -->
        }
    </ul>
</body>
</html>

এখানে, @model ডিরেকটিভের মাধ্যমে আপনি কন্ট্রোলার থেকে আসা ডাটা Model হিসেবে View এ গ্রহণ করছেন। এরপর foreach লুপ ব্যবহার করে সেই ডাটা HTML এর মধ্যে প্রদর্শন করা হচ্ছে।

View কনফিগারেশন

ASP.Net Core MVC অ্যাপ্লিকেশনে, View কনফিগারেশন সাধারণত _ViewStart.cshtml এবং _Layout.cshtml ফাইলের মাধ্যমে করা হয়। এই ফাইলগুলির মাধ্যমে আপনি View এর লেআউট, অংশ এবং সাধারণ কনফিগারেশন নির্ধারণ করতে পারেন।

১. _ViewStart.cshtml

_ViewStart.cshtml ফাইলটি আপনাকে প্রতিটি View এর জন্য সাধারণ কনফিগারেশন করতে দেয়। এটি সাধারণত Views ফোল্ডারে থাকে এবং সমস্ত ভিউ ফাইলের জন্য প্রাথমিক কনফিগারেশন নির্ধারণ করে।

@{
    Layout = "_Layout"; <!-- সকল View এর জন্য লেআউট পাতা নির্ধারণ -->
}

এখানে, Layout প্রপার্টি ব্যবহার করে একটি সাধারণ লেআউট পাতা _Layout.cshtml নির্ধারণ করা হয়েছে, যা সমস্ত ভিউয়ের জন্য একযোগভাবে ব্যবহৃত হবে।

২. _Layout.cshtml

_Layout.cshtml ফাইলটি একটি সাধারণ লেআউট ফাইল, যা সমস্ত ভিউয়ের জন্য একটি কাঠামো প্রদান করে। এখানে সাধারণত header, footer, এবং sidebars ইত্যাদি থাকে, যা বিভিন্ন ভিউতে পুনরায় ব্যবহৃত হয়।

<!DOCTYPE html>
<html>
<head>
    <title>@ViewData["Title"]</title>
</head>
<body>
    <header>
        <nav>
            <ul>
                <li><a href="/">Home</a></li>
                <li><a href="/Products">Products</a></li>
            </ul>
        </nav>
    </header>

    <main>
        @RenderBody() <!-- এখানে অন্যান্য ভিউয়ের কন্টেন্ট যুক্ত হবে -->
    </main>

    <footer>
        <p>© 2024 My ASP.Net Application</p>
    </footer>
</body>
</html>

এখানে, @RenderBody() দ্বারা ভিউয়ের কন্টেন্ট লোড করা হয়। যখন আপনি কোন View তৈরি করবেন, তখন তার কন্টেন্ট এই অংশে প্রদর্শিত হবে।

Partial Views ব্যবহার

Partial View হলো ছোট, পুনঃব্যবহারযোগ্য ভিউ যা একটি ভিউতে আংশিকভাবে ইনক্লুড করা হয়। এটি সাধারণত ছোট অংশ (যেমন একটি পণ্য লিস্ট, টেবিল, অথবা ফর্ম) প্রদর্শন করতে ব্যবহৃত হয়।

Partial View তৈরি

@model string
<div class="product">
    <p>@Model</p>
</div>

Partial View ব্যবহার

public IActionResult Index()
{
    var products = new List<string> { "Product 1", "Product 2", "Product 3" };
    return View(products);
}

@foreach (var product in Model)
{
    @Html.Partial("_ProductPartial", product) <!-- Partial View ব্যবহার করা হচ্ছে -->
}

Razor Pages vs MVC Views

Razor Pages একটি ফিচার যা ASP.Net Core-এ MVC এর থেকে আলাদা, যেখানে প্রতিটি পেজের জন্য একটি আলাদা Razor পেজ এবং পেজ মডেল থাকে। যদিও Razor Pages এবং MVC Views উভয়ই Razor ব্যবহার করে, তবে Razor Pages কিছুটা সরলীকৃত পদ্ধতিতে কাজ করে।

HTML Helpers হলো ASP.Net MVC এবং ASP.Net Core অ্যাপ্লিকেশনের মধ্যে ডাইনামিক HTML ট্যাগ তৈরির একটি সহজ উপায়। এগুলো Razor ভিউ ইঞ্জিনের মাধ্যমে ব্যবহার করা হয়, যা ডাইনামিক কন্টেন্ট সহজে জেনারেট করতে সহায়তা করে। HTML Helpers সাধারণত TextBox, DropDownList, RadioButton ইত্যাদি ইনপুট ফিল্ড তৈরির জন্য ব্যবহার করা হয়।

HTML Helpers কী?

HTML Helpers হলো C# কোড যা HTML ট্যাগ তৈরি করতে ব্যবহার করা হয়। এগুলো কোডের পুনরাবৃত্তি এড়াতে এবং অ্যাপ্লিকেশনকে আরও সংহত এবং সুসংগঠিত করতে সাহায্য করে। এগুলো Model Binding, Form Submission এবং অন্যান্য ফর্ম নিয়ন্ত্রণের জন্য সহায়ক।

এখানে কিছু সাধারণ HTML Helper এবং এগুলোর ব্যবহার দেখানো হলো।

১. TextBox (TextBoxFor)

TextBoxFor হল একটি HTML Helper যা ইনপুট ফিল্ড তৈরি করে। এটি মডেল প্রোপার্টি বা ভ্যালিডেশন এর সাথে সংযুক্ত থাকে।

উদাহরণ:

@model Product

<form>
    <div>
        <label for="Name">Product Name</label>
        @Html.TextBoxFor(model => model.Name)  <!-- TextBox তৈরি করা হচ্ছে -->
    </div>

    <div>
        <label for="Price">Price</label>
        @Html.TextBoxFor(model => model.Price)  <!-- Price জন্য TextBox -->
    </div>

    <button type="submit">Submit</button>
</form>

এখানে, TextBoxFor Name এবং Price প্রপার্টির জন্য ইনপুট ফিল্ড তৈরি করছে। Model Binding এর মাধ্যমে ডাটা সেভ বা রিটার্ন করা হয়।

২. DropDownList (DropDownListFor)

DropDownListFor HTML Helper এর মাধ্যমে ড্রপডাউন লিস্ট তৈরি করা যায়। এটি মডেল প্রোপার্টি অথবা একটি SelectList (যে তালিকা থেকে ড্রপডাউন তৈরি হবে) ব্যবহার করে ডাইনামিক ড্রপডাউন তৈরি করে।

উদাহরণ:

@model Product

<form>
    <div>
        <label for="Category">Category</label>
        @Html.DropDownListFor(model => model.CategoryId, new SelectList(Model.Categories, "Id", "Name"))  
        <!-- DropDownList তৈরি করা হচ্ছে -->
    </div>

    <button type="submit">Submit</button>
</form>

এখানে, CategoryId মডেল প্রপার্টির জন্য একটি ড্রপডাউন তৈরি করা হচ্ছে, যেখানে SelectList ব্যবহার করে ক্যাটেগরির নাম এবং আইডি ডেটা মডেল থেকে ডাইনামিকভাবে আসে।

৩. RadioButton (RadioButtonFor)

RadioButtonFor HTML Helper এর মাধ্যমে একাধিক অপশনের মধ্যে একটি নির্বাচন করতে radio button তৈরি করা যায়।

উদাহরণ:

@model User

<form>
    <div>
        <label>Gender</label><br>
        @Html.RadioButtonFor(model => model.Gender, "Male")  <!-- Male রেডিও বাটন -->
        Male
        @Html.RadioButtonFor(model => model.Gender, "Female")  <!-- Female রেডিও বাটন -->
        Female
    </div>

    <button type="submit">Submit</button>
</form>

এখানে, Gender প্রপার্টির জন্য দুটি রেডিও বাটন তৈরি করা হচ্ছে: Male এবং Female।

৪. CheckBox (CheckBoxFor)

CheckBoxFor HTML Helper ব্যবহার করে আপনি চেকবক্স তৈরি করতে পারেন, যা মডেলের বুলিয়ান প্রপার্টির মান (True/False) ধারণ করবে।

উদাহরণ:

@model User

<form>
    <div>
        <label>@Html.CheckBoxFor(model => model.IsSubscribed) Subscribe to Newsletter</label>
        <!-- চেকবক্স তৈরি হচ্ছে -->
    </div>

    <button type="submit">Submit</button>
</form>

এখানে, IsSubscribed মডেল প্রপার্টির জন্য একটি চেকবক্স তৈরি হচ্ছে, যা ইউজার সিলেক্ট করলে True, নতুবা False হবে।

৫. TextArea (TextAreaFor)

TextAreaFor HTML Helper দিয়ে আপনি বড় ধরনের টেক্সট ইনপুট ফিল্ড তৈরি করতে পারেন, যেমন ইউজার কমেন্ট বা বিবরণ ইনপুট করার জন্য।

উদাহরণ:

@model Product

<form>
    <div>
        <label for="Description">Description</label>
        @Html.TextAreaFor(model => model.Description)  <!-- TextArea তৈরি করা হচ্ছে -->
    </div>

    <button type="submit">Submit</button>
</form>

এখানে, Description প্রপার্টির জন্য একটি টেক্সটএরিয়া তৈরি হচ্ছে, যেখানে ইউজার বেশি তথ্য লিখতে পারবে।

৬. Button (Button)

Button HTML Helper ব্যবহার করে একটি সাবমিট বা সাধারণ বাটন তৈরি করা যেতে পারে।

উদাহরণ:

@Html.SubmitButton("Save")  <!-- Submit button তৈরি করা -->

এটি একটি সাধারণ সাবমিট বাটন তৈরি করবে।

HTML Helpers এর সুবিধা

1. ডাইনামিক HTML তৈরি: HTML Helpers ডাইনামিকভাবে HTML উপাদান তৈরি করে, যা কোডের পুনরাবৃত্তি কমায়।
2. Model Binding: Helpers মডেল বাইন্ডিংয়ের মাধ্যমে ফর্ম ডেটা গ্রহণ করে, যা ফর্ম সাবমিট করা সহজ করে।
3. ভাল কোড অর্গানাইজেশন: HTML Helpers কোডকে সুসংগঠিত রাখতে সাহায্য করে এবং মানসম্পন্ন কোডিং প্রাকটিস অনুসরণ করতে সহায়ক।
4. ভ্যালিডেশন: HTML Helpers সাধারণত ASP.Net MVC বা ASP.Net Core ফ্রেমওয়ার্কের ভ্যালিডেশন সিস্টেমের সাথে একীভূত হয়ে কাজ করে, যার ফলে ডেটা ইনপুটের সময় ভুল প্রবেশের ঝুঁকি কমে যায়।

সারাংশ

HTML Helpers হল ASP.Net MVC এবং ASP.Net Core অ্যাপ্লিকেশনগুলিতে ডাইনামিক HTML তৈরির জন্য একটি গুরুত্বপূর্ণ টুল। এগুলি মডেল ডেটার সাথে কাজ করে এবং বিভিন্ন ইনপুট ফিল্ড যেমন TextBox, DropDownList, RadioButton এবং CheckBox সহজে তৈরি করতে সহায়তা করে। Model Binding এবং Form Submission এর মাধ্যমে ডেটা কার্যকরভাবে প্রক্রিয়া করা যায়।

ASP.Net MVC এবং ASP.Net Core MVC অ্যাপ্লিকেশনে Partial Views এবং View Components দুইটি অত্যন্ত শক্তিশালী ফিচার, যা আপনার অ্যাপ্লিকেশনের ভিউ লজিক এবং UI রেন্ডারিংকে আরও কার্যকর ও পুনঃব্যবহারযোগ্য করতে সহায়তা করে। এগুলো একে অপরের থেকে আলাদা হলেও, দুটি উপাদানই ডাইনামিক কন্টেন্ট রেন্ডার করতে এবং কোড পুনঃব্যবহারযোগ্যতা নিশ্চিত করতে ব্যবহৃত হয়।

Partial Views

Partial View হলো একটি ছোট, পুনঃব্যবহারযোগ্য ভিউ যা অন্য ভিউয়ের মধ্যে ইনক্লুড করা যায়। এটি পুরো পেজ রেন্ডার করার পরিবর্তে, শুধু একটি নির্দিষ্ট অংশ রেন্ডার করার জন্য ব্যবহৃত হয়। Partial Views সাধারণত ছোট UI উপাদান (যেমন, ফর্ম, টেবিলের সারি, ন্যাভিগেশন বার) রেন্ডার করার জন্য উপকারী।

Partial View এর ব্যবহার

1. Partial View তৈরি করা

   প্রথমে, আপনার ভিউ ফোল্ডারে একটি Partial View তৈরি করতে হবে। এটি একটি সাধারণ .cshtml ফাইল যা আপনার UI অংশ ধারণ করে।

   উদাহরণ:

   <!-- _ProductList.cshtml -->
   @model IEnumerable<Product>
   
   <ul>
   @foreach(var product in Model)
   {
       <li>@product.Name - @product.Price</li>
   }
   </ul>
   

   এখানে, _ProductList.cshtml একটি Partial View যা Product মডেলের একটি লিস্ট রেন্ডার করে।

2. Partial View ইনক্লুড করা

   এখন, আপনি এই Partial View কে অন্য একটি ভিউয়ের মধ্যে ইনক্লুড করতে পারবেন।

   উদাহরণ:

   <!-- Index.cshtml -->
   @model IEnumerable<Product>
   
   <h2>Product List</h2>
   @Html.Partial("_ProductList", Model)
   

   এখানে, @Html.Partial() ব্যবহার করে _ProductList.cshtml নামের Partial View ইনক্লুড করা হয়েছে।

   আপনি যদি নির্দিষ্ট ডেটা না পাঠাতে চান, তবে আপনি কেবল @Html.Partial("_ProductList") ব্যবহার করতে পারেন, যদি আপনার Partial View এ কোন মডেল পাস করার প্রয়োজন না হয়।

3. Ajax ব্যবহার করে Partial View রেন্ডারিং

   আপনি Ajax এর মাধ্যমে ডাইনামিকভাবে Partial View রেন্ডার করতে পারেন, যেমন:

   $.ajax({
       url: '/Home/GetProducts',
       success: function(result) {
           $('#productListContainer').html(result);
       }
   });
   

   এখানে, HomeController থেকে AJAX কল করে পণ্য তালিকা আনা হচ্ছে এবং ডোম-এ রেন্ডার করা হচ্ছে।

View Components

View Components হলো আরও শক্তিশালী এবং নমনীয় উপাদান, যা Partial Views এর তুলনায় বেশি লজিকাল এবং ডাইনামিক। এটি আসলে একটি C# ক্লাস যা ভিউয়ের মধ্যে রেন্ডার করার জন্য ডেটা প্রক্রিয়াকরণ এবং লজিকাল কাজ সম্পাদন করতে ব্যবহৃত হয়। View Components সাধারণত একাধিক Partial View এর সমন্বয়ে একটি ডাইনামিক UI উপাদান তৈরি করে এবং ডেটা কন্ট্রোলার থেকে সরাসরি পাঠানোর পরিবর্তে, নিজস্ব লজিক প্রয়োগ করে ডেটা রেন্ডার করে।

View Component এর ব্যবহার

1. View Component তৈরি করা

   প্রথমে, একটি View Component ক্লাস তৈরি করতে হবে। এটি একটি সাধারণ C# ক্লাস যা ViewComponent থেকে ইনহেরিট করবে।

   উদাহরণ:

   public class ProductListViewComponent : ViewComponent
   {
       private readonly ApplicationDbContext _context;
   
       public ProductListViewComponent(ApplicationDbContext context)
       {
           _context = context;
       }
   
       public IViewComponentResult Invoke()
       {
           var products = _context.Products.ToList();
           return View(products);  // Return the view with products
       }
   }
   

   এখানে, ProductListViewComponent ক্লাসটি ডেটাবেস থেকে পণ্য তালিকা নিয়ে আসে এবং তা ভিউতে পাঠায়।

2. View Component এর জন্য ভিউ তৈরি করা

   View Component এর জন্য ভিউ ফাইল তৈরি করতে হয়, যেটি Views/Shared/Components/ComponentName/Default.cshtml ফোল্ডারে রাখা হয়।

   উদাহরণ:

   <!-- Views/Shared/Components/ProductList/Default.cshtml -->
   @model IEnumerable<Product>
   
   <ul>
   @foreach(var product in Model)
   {
       <li>@product.Name - @product.Price</li>
   }
   </ul>
   

3. View Component ব্যবহার করা

   এখন, আপনি আপনার ভিউয়ের মধ্যে ViewComponent রেন্ডার করতে পারেন:

   <!-- Any View (e.g., Index.cshtml) -->
   <h2>Product List</h2>
   @Component.InvokeAsync("ProductList")
   

   এখানে, @Component.InvokeAsync("ProductList") দ্বারা ProductListViewComponent ইনভোক করা হচ্ছে এবং তার Default.cshtml ভিউটি রেন্ডার করা হচ্ছে।

Partial Views এবং View Components এর মধ্যে পার্থক্য

সারাংশ

Partial Views এবং View Components দুটি গুরুত্বপূর্ণ টুল, যেগুলো ASP.Net MVC বা ASP.Net Core MVC অ্যাপ্লিকেশনগুলোর ডাইনামিক এবং পুনঃব্যবহারযোগ্য UI কম্পোনেন্ট তৈরিতে সহায়তা করে। Partial Views সাধারণ UI অংশগুলোর জন্য উপকারী, যেখানে View Components বেশি কাস্টমাইজড লজিক এবং ডাইনামিক কন্টেন্ট রেন্ডারিংয়ের জন্য ব্যবহার করা হয়।

ASP.Net এ টেমপ্লেটিং এবং কাস্টম হেল্পার তৈরি একটি শক্তিশালী পদ্ধতি, যা ডেভেলপারদের তাদের অ্যাপ্লিকেশনে ডাইনামিক কন্টেন্ট প্রজেক্ট এবং পুনরায় ব্যবহারযোগ্য কোড তৈরি করার সুযোগ দেয়। ASP.Net MVC এবং Razor Pages এর মধ্যে টেমপ্লেটিং এবং কাস্টম হেল্পার ব্যবহারের মাধ্যমে ডেভেলপাররা তাদের ভিউ ফাইলগুলোতে ডাইনামিক, সিস্টেম্যাটিক এবং পুনঃব্যবহারযোগ্য কন্টেন্ট তৈরি করতে পারে।

টেমপ্লেটিং

টেমপ্লেটিং একটি কৌশল যেখানে ডেভেলপাররা পূর্বনির্ধারিত ডিজাইন বা কাঠামো ব্যবহার করে ডাইনামিক কন্টেন্ট তৈরি করে। ASP.Net এ Razor টেমপ্লেটিং ইঞ্জিন ব্যবহার করা হয়, যা HTML এবং C# কোডের সংমিশ্রণ প্রদান করে।

Razor টেমপ্লেট ব্যবহার

Razor টেমপ্লেটের মাধ্যমে ডেভেলপাররা ডাইনামিক HTML তৈরি করতে পারে। এটি .cshtml ফাইল এক্সটেনশনে ব্যবহৃত হয়। Razor টেমপ্লেটের মধ্যে C# কোড সরাসরি HTML এর মধ্যে এমবেড করা যায়।

@model List<Product>

<h2>Product List</h2>
<table>
    <tr>
        <th>Product Name</th>
        <th>Price</th>
    </tr>
    @foreach (var product in Model)
    {
        <tr>
            <td>@product.Name</td>
            <td>@product.Price</td>
        </tr>
    }
</table>

উপরের কোডে, @model ট্যাগটি মডেল ডেটা কনফিগার করে এবং @foreach লুপের মাধ্যমে ডেটা ডাইনামিক্যালি প্রদর্শন করা হয়।

কাস্টম হেল্পার তৈরি

কাস্টম হেল্পার হলো একটি পুনঃব্যবহারযোগ্য কোড স্নিপেট যা ভিউতে বিভিন্ন টাস্ক বা ফাংশন সম্পাদন করতে ব্যবহৃত হয়। ASP.Net MVC বা Razor Pages এ কাস্টম হেল্পার তৈরি করতে, আপনি সাধারণত হেল্পার ক্লাস তৈরি করেন যা HTML আউটপুট জেনারেট করে।

কাস্টম HTML হেল্পার তৈরি

ASP.Net MVC তে কাস্টম হেল্পার তৈরির জন্য HtmlHelper ক্লাস ব্যবহার করা হয়। এখানে একটি সাধারণ উদাহরণ দেওয়া হলো, যেখানে একটি কাস্টম হেল্পার ফাংশন তৈরি করা হয়েছে।

1. Custom Helper Class তৈরি করা: কাস্টম হেল্পার ক্লাস তৈরি করতে, আপনি প্রথমে একটি Static Helper ক্লাস তৈরি করবেন।

   public static class CustomHtmlHelpers
   {
       public static IHtmlContent CustomButton(this IHtmlHelper html, string buttonText, string cssClass)
       {
           var buttonTag = new TagBuilder("button");
           buttonTag.InnerHtml.Append(buttonText);
           buttonTag.AddCssClass(cssClass);
           return buttonTag;
       }
   }
   

2. Razor ভিউতে কাস্টম হেল্পার ব্যবহার করা: এই কাস্টম হেল্পার ক্লাসটি Razor ভিউতে ব্যবহার করার জন্য, আপনাকে Razor ভিউয়ের শীর্ষে @using ডিরেকটিভ দিয়ে এই হেল্পার ক্লাসটিকে অন্তর্ভুক্ত করতে হবে।

   @using YourNamespace.Helpers
   <html>
       <body>
           <h1>Welcome to Custom Button</h1>
           @Html.CustomButton("Click Me", "btn btn-primary")
       </body>
   </html>
   

এই উদাহরণে, CustomButton হেল্পার একটি <button> HTML ট্যাগ তৈরি করবে এবং এটিকে নির্দিষ্ট buttonText এবং cssClass প্রপার্টি দিয়ে কাস্টমাইজ করবে।

ফর্ম হেল্পার তৈরি

ASP.Net MVC বা Razor Pages এ ফর্ম উপাদান তৈরি করার জন্য কাস্টম হেল্পারও তৈরি করা যায়। ফর্ম হেল্পার ব্যবহার করে আপনি কাস্টম ফর্ম কন্ট্রোল তৈরি করতে পারেন, যেমন টেক্সটবক্স, ড্রপডাউন, এবং বাটন।

কাস্টম ফর্ম হেল্পার উদাহরণ

1. CustomFormHelper ক্লাস তৈরি করা:

   public static class CustomFormHelper
   {
       public static IHtmlContent CustomTextBox(this IHtmlHelper html, string name, string placeholder)
       {
           var inputTag = new TagBuilder("input");
           inputTag.Attributes["type"] = "text";
           inputTag.Attributes["name"] = name;
           inputTag.Attributes["placeholder"] = placeholder;
           inputTag.AddCssClass("form-control");
           return inputTag;
       }
   }
   

2. Razor ভিউতে ফর্ম হেল্পার ব্যবহার করা:

   @using YourNamespace.Helpers
   
   <form>
       <label for="Username">Username:</label>
       @Html.CustomTextBox("Username", "Enter your username")
   </form>
   

এটি একটি কাস্টম টেক্সটবক্স তৈরি করবে এবং ব্যবহারকারীকে তাদের Username ইনপুট করতে সক্ষম করবে।

কাস্টম HTML হেল্পারের সুবিধা

1. পুনঃব্যবহারযোগ্যতা: একবার তৈরি করা হলে, কাস্টম হেল্পারগুলি বিভিন্ন ভিউতে পুনরায় ব্যবহার করা যায়, ফলে কোড পুনরাবৃত্তি কমে যায়।
2. কোডের সাফতা: কাস্টম হেল্পারগুলি আপনার কোডকে আরও পরিষ্কার এবং আরও পড়তে সহজ করে তোলে।
3. HTML আউটপুট কাস্টমাইজেশন: হেল্পার ফাংশনগুলির মাধ্যমে আপনি HTML আউটপুট কাস্টমাইজ করতে পারেন, যেমন CSS ক্লাস অ্যাড করা, নির্দিষ্ট অ্যাট্রিবিউট সেট করা, এবং ইভেন্ট হ্যান্ডলিং।

উপসংহার

ASP.Net এ টেমপ্লেটিং এবং কাস্টম হেল্পার তৈরি করার মাধ্যমে আপনি আপনার অ্যাপ্লিকেশনকে আরও মডুলার এবং পুনঃব্যবহারযোগ্য করতে পারেন। Razor টেমপ্লেটিং ইঞ্জিন এবং কাস্টম HTML হেল্পার ক্লাসগুলো কোডের পুনরাবৃত্তি কমাতে এবং ডাইনামিক কন্টেন্ট সহজভাবে তৈরি করতে সাহায্য করে, যা ASP.Net অ্যাপ্লিকেশনগুলির উন্নয়ন প্রক্রিয়াকে আরও সহজ এবং দক্ষ করে তোলে।

Tag Helpers হলো ASP.Net Core MVC এর একটি শক্তিশালী বৈশিষ্ট্য যা HTML ট্যাগগুলোর সাথে C# কোড যুক্ত করতে সহায়ক। এটি HTML ট্যাগগুলোর কার্যকারিতা বাড়াতে এবং টেমপ্লেট লজিককে আরও শক্তিশালী করতে ব্যবহৃত হয়। Tag Helpers Razor ভিউ টেমপ্লেটে C# কোড একত্রিত করার জন্য ব্যবহার করা হয় এবং এটি HTML সিনট্যাক্সের মতোই সহজ ও পরিষ্কার।

ASP.Net Core MVC-তে Tag Helpers ব্যবহার করার মাধ্যমে আপনি বিভিন্ন ধরনের HTML ট্যাগকে ডাইনামিক ও ইন্টারেক্টিভ করতে পারেন।

Tag Helpers কী?

Tag Helpers হল ASP.Net Core MVC এর জন্য তৈরি করা একটি সুবিধা যা HTML ট্যাগের কার্যকারিতা বাড়ানোর জন্য C# কোড ব্যবহার করতে দেয়। এটি JavaScript বা অন্যান্য ক্লায়েন্ট সাইড ফ্রেমওয়ার্কের পরিবর্তে সার্ভার সাইড থেকে HTML ট্যাগের কাজ পরিচালনা করতে ব্যবহৃত হয়।

Tag Helpers সিএসএস ক্লাস, ডেটা বাইন্ডিং, এবং অন্যান্য উপাদানগুলির সাথে সহজে কাজ করতে সক্ষম।

Tag Helpers এর সুবিধা

• স্বচ্ছতা: HTML কোডে সি# কোড ব্যবহারের জন্য এটি আরো পরিষ্কার এবং সহজ।
• নির্ভরযোগ্যতা: Tag Helpers সার্ভার সাইড থেকে HTML ট্যাগগুলির কার্যকারিতা পরিচালনা করে, যা নিরাপদ ও শক্তিশালী।
• সহজ ডেটা বাইন্ডিং: ফর্ম, ইমেজ, লিংক ইত্যাদি সহজেই ডেটা বাইন্ড করতে পারে।

Tag Helpers ব্যবহারের উদাহরণ

১. Anchor Tag Helper

Anchor Tag Helper URL তৈরি করার জন্য ব্যবহৃত হয়। এটি Razor ভিউ টেমপ্লেটে ডাইনামিক URL তৈরি করতে সাহায্য করে।

Example:

<a asp-controller="Home" asp-action="Index">Home</a>

এখানে, asp-controller এবং asp-action অ্যাট্রিবিউট দিয়ে আপনি কন্ট্রোলার এবং অ্যাকশন মেথডের নাম নির্ধারণ করছেন। এটি তখন URL তৈরি করবে, যেমন /Home/Index।

২. Form Tag Helper

Form Tag Helper ব্যবহার করে আপনি ফর্ম তৈরি করতে পারেন এবং এতে C# কোডের মাধ্যমে ডেটা বাইন্ডিং করতে পারেন।

Example:

<form asp-action="SubmitForm">
    <input type="text" name="Name" />
    <input type="email" name="Email" />
    <button type="submit">Submit</button>
</form>

এখানে, asp-action অ্যাট্রিবিউট ফর্মের জন্য নির্দিষ্ট অ্যাকশন মেথড নির্দেশ করে।

৩. Input Tag Helper

Input Tag Helper ফর্ম ইনপুট ফিল্ডগুলির সাথে ডেটা বাইন্ডিং করার জন্য ব্যবহার করা হয়।

Example:

<input asp-for="Name" class="form-control" />

এখানে, asp-for অ্যাট্রিবিউট মডেল বন্ডিংয়ের জন্য ব্যবহৃত হচ্ছে, যেখানে Name মডেল প্রপার্টি হিসেবে ব্যবহৃত হচ্ছে।

৪. Image Tag Helper

Image Tag Helper HTML <img> ট্যাগের সাথে সরাসরি ডাইনামিক পাথ সংযুক্ত করতে ব্যবহৃত হয়।

Example:

<img asp-src-absolute="~/images/logo.png" />

এটি logo.png ইমেজটি রেন্ডার করবে, যেখানে asp-src-absolute অ্যাট্রিবিউট সম্পূর্ণ পাথ নির্ধারণ করবে।

৫. Environment Tag Helper

Environment Tag Helper দিয়ে আপনি নির্দিষ্ট পরিবেশের জন্য কন্টেন্ট রেন্ডার করতে পারেন। যেমন, আপনি চান যে কোনও কনফিগারেশন অনুযায়ী কিছু ডাটা প্রদর্শিত হোক।

Example:

<environment names="Development">
    <p>This is visible in the development environment only.</p>
</environment>

এখানে, environment ট্যাগের মাধ্যমে কনফিগারেশন অনুযায়ী কন্টেন্টটি রেন্ডার হবে।

৬. Validation Tag Helper

Validation Tag Helper ব্যবহার করে ফর্ম ইনপুটের জন্য ভ্যালিডেশন মেসেজ প্রদর্শন করা যায়।

Example:

<span asp-validation-for="Name" class="text-danger"></span>

এটি Name প্রপার্টির জন্য ভ্যালিডেশন মেসেজ দেখাবে, যদি সেখানে কোনো ভুল ইনপুট থাকে।

Tag Helpers সক্রিয় করা

ASP.Net Core MVC অ্যাপ্লিকেশনেও Tag Helpers ব্যবহারের জন্য আপনাকে এগুলো সক্রিয় করতে হয়। এটি Views/Shared/_ViewImports.cshtml ফাইলে করা হয়:

@addTagHelper *, Microsoft.AspNetCore.Mvc.TagHelpers

এটি Tag Helpers কে পুরো অ্যাপ্লিকেশনে সক্রিয় করে দেয়, যাতে আপনি HTML ট্যাগগুলোর সাথে C# কোড ব্যবহার করতে পারেন।

Tag Helpers এবং HTML Helpers এর পার্থক্য

HTML Helpers এবং Tag Helpers এর মধ্যে প্রধান পার্থক্য হলো:

• HTML Helpers সাধারণত C# মেথড বা ফাংশন ব্যবহার করে HTML ট্যাগ তৈরি করে।
• Tag Helpers সরাসরি HTML ট্যাগগুলোর অ্যাট্রিবিউটের মধ্যে C# কোড ব্যবহার করে HTML ট্যাগের কার্যকারিতা বাড়ায় এবং এতে বেশি কোডিং ও পরিষ্কারতা থাকে।

সারসংক্ষেপ

Tag Helpers ASP.Net Core MVC-তে HTML ট্যাগের সাথে C# কোড যুক্ত করার একটি শক্তিশালী উপায়। এটি আপনাকে একটি পরিষ্কার, সহজ এবং পরিষ্কার সিনট্যাক্স প্রদান করে HTML টেমপ্লেটের মধ্যে ডাইনামিক ডেটা এবং কার্যকারিতা প্রয়োগ করতে। Tag Helpers সহজে ব্যবহৃত হতে পারে ফর্ম, লিংক, ইমেজ এবং অন্যান্য HTML ট্যাগের জন্য এবং এটি অ্যাপ্লিকেশন উন্নয়নের জন্য একটি শক্তিশালী টুল হিসেবে কাজ করে।