ভিউ (Views)

Microsoft Technologies - এএসপি ডট নেট এমভিসি (ASP.Net MVC)
277
277

ASP.Net MVC-তে ভিউ (Views) একটি গুরুত্বপূর্ণ অংশ, যেগুলি ব্যবহারকারীর কাছে ডেটা প্রদর্শন করার জন্য ব্যবহৃত হয়। ভিউ হল ইউআই (UI) এর অংশ, যা HTML, CSS, JavaScript ইত্যাদির মাধ্যমে অ্যাপ্লিকেশনের ডেটা উপস্থাপন করে। ভিউ কন্ট্রোলারের কাছ থেকে ডেটা গ্রহণ করে এবং তা ব্যবহারকারীর সামনে প্রদর্শন করে।


ভিউ-এর ভূমিকা

ভিউ কন্ট্রোলারের থেকে প্রাপ্ত ডেটা এবং অ্যাকশন ফলাফল (Action Result) ব্যবহার করে উপস্থাপন করা হয়। সাধারণভাবে, ভিউ HTML পেজগুলির মতো দেখায়, তবে এটি ডাইনামিক ডেটা (যেমন ডাটাবেস থেকে রিট্রাইভ করা ডেটা) ব্যবহার করতে সক্ষম।

ভিউ কেবলমাত্র ব্যবহারকারীর কাছে তথ্য প্রদর্শন করে এবং এতে কোনো ব্যবসায়িক লজিক বা ডেটা ম্যানিপুলেশন থাকে না। এই বিভাজনটি অ্যাপ্লিকেশনটিকে আরও পরিষ্কার এবং মডুলার করে তোলে।


Razor View Engine পরিচিতি

ASP.Net MVC-তে Razor View Engine ব্যবহার করা হয়, যা HTML কোডের সাথে C# কোড একত্রিত করতে সক্ষম। Razor সিনট্যাক্স ব্যবহার করে, আপনি খুব সহজে ডেটা প্রদর্শন করতে পারেন, এবং এটি HTML এবং C# কোডকে আরও সহজ এবং পরিষ্কারভাবে সংহত করে। Razor ভিউর একটি প্রধান সুবিধা হলো এটি আরও কম কোডের মাধ্যমে ডাইনামিক কন্টেন্ট প্রদর্শন করতে সক্ষম।

Razor সিনট্যাক্সের কিছু উদাহরণ:

@model IEnumerable<MyApp.Models.Product>

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

এখানে, @model নির্দেশ করে যে ভিউটি Product মডেলের ডেটা নিবে এবং এটি একটি তালিকা হিসেবে রেন্ডার করবে।


Layouts, Sections, এবং Partial Views

Layouts

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

@{
    Layout = "_Layout";
}

এখানে, _Layout একটি লেআউট ফাইলের নাম, যেটি পুরো অ্যাপ্লিকেশন জুড়ে পুনঃব্যবহৃত হবে।

Sections

Sections আপনাকে লেআউট ফাইলের নির্দিষ্ট স্থানে কনটেন্ট ইনজেক্ট করার সুযোগ দেয়। এটি বিভিন্ন ভিউয়ের জন্য আলাদা কনটেন্ট তৈরি করতে ব্যবহৃত হয়।

@{
    ViewBag.Title = "Home Page";
}

@section Sidebar {
    <div class="sidebar">
        <h3>Sidebar Content</h3>
    </div>
}

এখানে, Sidebar সেকশনটি @section দিয়ে ডিফাইন করা হয়েছে এবং এটি লেআউটে প্রদর্শিত হবে, যেখানে এটি রেন্ডার করার জন্য প্রস্তুত রয়েছে।

Partial Views

Partial Views হলো ছোট ভিউ, যা অন্য ভিউতে অন্তর্ভুক্ত করা যায়। এটি কোনো নির্দিষ্ট UI অংশ বা উপাদান দেখাতে ব্যবহৃত হয়, যেমন একটি ফর্ম, টেবিল ইত্যাদি।

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

এখানে, _ProductList একটি partial view, যা মূল ভিউতে রেন্ডার করা হবে এবং পণ্য তালিকা দেখাবে।


HTML Helper ব্যবহার করে ফর্ম তৈরি

ASP.Net MVC-তে ফর্ম তৈরি করার জন্য HTML Helper ব্যবহার করা হয়, যা HTML ট্যাগ তৈরি করতে সাহায্য করে। উদাহরণস্বরূপ:

@using (Html.BeginForm("Create", "Product"))
{
    @Html.LabelFor(model => model.Name)
    @Html.TextBoxFor(model => model.Name)
    @Html.LabelFor(model => model.Price)
    @Html.TextBoxFor(model => model.Price)
    <input type="submit" value="Create" />
}

এখানে Html.BeginForm ব্যবহার করে একটি ফর্ম তৈরি করা হয়েছে এবং LabelFor, TextBoxFor ব্যবহার করে ইনপুট ফিল্ডগুলিও তৈরি করা হয়েছে।


ডেটা টেমপ্লেট এবং বন্ডিং (Data Templates and Binding)

ডেটা টেমপ্লেট এবং বন্ডিং-এর মাধ্যমে আপনি ডেটা উপস্থাপন করতে পারেন এবং ফর্ম ডেটার সাথে যুক্ত করতে পারেন। Model Binding এবং Strongly Typed Views ব্যবহার করলে ভিউ ডেটা সঠিকভাবে রেন্ডার করা সহজ হয়।

@model MyApp.Models.Product

@Html.DisplayFor(model => model.Name)
@Html.DisplayFor(model => model.Price)

এখানে, DisplayFor ব্যবহার করে মডেল ডেটার উপস্থাপন করা হয়েছে। Model Binding এর মাধ্যমে, ভিউয়ের জন্য প্রাপ্ত ডেটা মডেলের সাথে সঠিকভাবে বাউন্ড (Bound) হবে।


সারমর্ম

ভিউ (Views) হল ASP.Net MVC অ্যাপ্লিকেশনের UI অংশ, যা ডেটা উপস্থাপন করে এবং ব্যবহারকারীর সাথে যোগাযোগ স্থাপন করে। Razor View Engine এর মাধ্যমে HTML এবং C# কোড একত্রিত করা সম্ভব, যা ভিউকে আরও গতিশীল এবং কার্যকর করে তোলে। Layouts, Sections, এবং Partial Views ব্যবহার করে ভিউয়ের কাঠামো এবং কন্টেন্ট শেয়ার করা সহজ হয়, এবং HTML Helper ব্যবহার করে ফর্ম এবং অন্যান্য UI উপাদান তৈরি করা হয়।

common.content_added_by

ভিউয়ের ভূমিকা

206
206

ASP.Net MVC অ্যাপ্লিকেশনে, ভিউ হলো সেই উপাদান যা ব্যবহারকারীর কাছে ডেটা প্রদর্শন করে এবং ইন্টারফেসের সাথে যোগাযোগ স্থাপন করে। এটি মূলত HTML, CSS, এবং JavaScript এর মাধ্যমে ওয়েব পেজের দৃশ্যমান অংশ তৈরি করে। ভিউয়ের কাজ হলো ব্যবহারকারীর অনুরোধের ভিত্তিতে ডেটা প্রদর্শন করা এবং একটি সুসংগঠিত ও ব্যবহার-বান্ধব UI (User Interface) প্রদান করা।


ভিউয়ের মূল ভূমিকা

1. ডেটা উপস্থাপন করা
ভিউয়ের প্রধান কাজ হলো ডেটা উপস্থাপন করা। কন্ট্রোলার থেকে প্রাপ্ত ডেটাকে ভিউ গ্রহণ করে এবং HTML বা অন্যান্য উপস্থাপনার মাধ্যমে ব্যবহারকারীর কাছে প্রদর্শন করে। উদাহরণস্বরূপ, যদি একটি ব্লগ অ্যাপ্লিকেশন তৈরি করা হয়, তবে ব্লগের পোস্টগুলি ভিউতে HTML ফর্ম্যাটে প্রদর্শিত হবে।

2. ব্যবহারকারীর সাথে ইন্টারঅ্যাকশন করা
ভিউ ব্যবহারকারীর ইনপুট গ্রহণ করে এবং তা কন্ট্রোলারে পাঠিয়ে দেয়। উদাহরণস্বরূপ, একটি ফর্মের মাধ্যমে ব্যবহারকারী ডেটা ইনপুট করার পর তা কন্ট্রোলারে পাঠানো হয়, যেখানে প্রসেসিং সম্পন্ন হয়। ভিউ ব্যবহৃত ফর্ম এবং কন্ট্রোলগুলি তৈরি করতে সহায়ক।

3. UI কাস্টমাইজেশন এবং স্টাইলিং
ভিউতে HTML, CSS এবং JavaScript এর মাধ্যমে UI কাস্টমাইজেশন করা যায়। এটি ব্যবহারকারীকে একটি সুন্দর এবং স্বাচ্ছন্দ্যপূর্ণ অভিজ্ঞতা প্রদান করতে সাহায্য করে।

4. মডেল ডেটার উপস্থাপন
ভিউ মডেল থেকে ডেটা সংগ্রহ করে এবং সেটি ব্যবহারকারীর জন্য উপস্থাপন করে। মডেল-বাইন্ডিং এর মাধ্যমে কন্ট্রোলার থেকে ডেটা গ্রহণ করা হয় এবং ভিউতে প্রদর্শিত হয়। ভিউ সাধারণত এক বা একাধিক মডেল থেকে ডেটা নিয়ে কাজ করে।


Razor View Engine

ASP.Net MVC-তে ভিউ তৈরির জন্য Razor View Engine ব্যবহৃত হয়। Razor হলো একটি সিম্পল সিঙ্কট্যাক্স যা HTML এবং C# কোডকে একত্রিত করে এবং ডাইনামিকভাবে ভিউ তৈরি করতে সাহায্য করে। Razor খুবই লাইটওয়েট এবং ব্যবহার করতে সহজ।

Razor এর উদাহরণ:

@model IEnumerable<Product>

<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 ডিরেকটিভ ব্যবহার করে ভিউটি একটি মডেল টাইপের ডেটা গ্রহণ করে এবং সেই ডেটা প্রদর্শন করে। Razor সিনট্যাক্স ব্যবহার করে সহজে C# কোড এবং HTML একত্রিত করা যায়।


ভিউয়ের অন্যান্য বৈশিষ্ট্য

1. লেআউট এবং সেকশন
ভিউ তে লেআউট ব্যবহার করা যায়, যা পুরো অ্যাপ্লিকেশনের জন্য একটি কমন ডিজাইন বা কাঠামো প্রদান করে। ভিউয়ের মধ্যে section ব্যবহার করে আপনি নির্দিষ্ট অংশে ডেটা বা কনটেন্ট ইনজেক্ট করতে পারেন, যেমন পেজের হেডার বা ফুটার।

2. পার্শিয়াল ভিউ (Partial View)
একটি ভিউয়ের অংশকে পার্শিয়াল ভিউ হিসেবে পুনঃব্যবহার করা যায়। এটি একটি ছোট ভিউ যা মূল ভিউয়ের মধ্যে অন্তর্ভুক্ত করা যায়। এটি কোড পুনর্ব্যবহারের জন্য সুবিধাজনক।

3. HTML Helper ব্যবহার
ভিউতে ফর্ম তৈরি, লিঙ্ক, টেক্সটবক্স ইত্যাদি তৈরি করতে HTML Helper মেথড ব্যবহার করা যায়। এটি কাস্টম HTML তৈরি করার পরিবর্তে স্বয়ংক্রিয়ভাবে HTML ট্যাগ তৈরি করতে সহায়ক।

উদাহরণ:

@Html.TextBoxFor(model => model.Name)
@Html.DropDownListFor(model => model.Category, Model.Categories)

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


ভিউয়ের সাথে অন্যান্য কম্পোনেন্টের সম্পর্ক

কন্ট্রোলার এবং মডেল থেকে ডেটা সংগ্রহ
কন্ট্রোলার মেথডে মডেল ডেটা প্রসেস করা হয় এবং সেই ডেটা ভিউতে পাঠানো হয়। ভিউ কেবল ডেটা প্রদর্শন করে, তবে ডেটার কোন পরিবর্তন বা লজিকাল অপারেশন কন্ট্রোলারের মাধ্যমে পরিচালিত হয়।

UI এবং ব্যাকএন্ডের মধ্যে পার্থক্য
ভিউ শুধুমাত্র UI উপাদান এবং উপস্থাপনা সম্পর্কিত কাজ করে, যেখানে ব্যাকএন্ড লজিক কন্ট্রোলার এবং মডেল দ্বারা সম্পন্ন হয়। এই ধরনের বিভাজন কোডের রক্ষণাবেক্ষণ এবং পরীক্ষার কাজ সহজ করে তোলে।


উপসংহার

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

common.content_added_by

Razor View Engine পরিচিতি

220
220

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


Razor View Engine এর বৈশিষ্ট্য

সহজ সিনট্যাক্স
Razor-এর কোড সিনট্যাক্স সহজ এবং পড়তে সুবিধাজনক। এটি কম কোড দিয়ে ডায়নামিক কন্টেন্ট তৈরি করতে সাহায্য করে।

HTML এবং C# এর মিশ্রণ
Razor View Engine আপনাকে HTML এবং C# কোড একত্রে ব্যবহার করার সুবিধা দেয়, যা একটি কার্যকরী এবং ক্লিন কোডবেস তৈরি করে।

বিকল্প View Engine
Razor View Engine ASPX View Engine এর তুলনায় অনেক দ্রুত এবং লাইটওয়েট। এটি আধুনিক ওয়েব অ্যাপ্লিকেশনের জন্য আরও কার্যকরী।

অটো HTML এস্কেপিং
Razor ডিফল্টভাবে HTML এস্কেপিং করে, যা অ্যাপ্লিকেশনকে XSS (Cross-Site Scripting) এর মতো নিরাপত্তা ঝুঁকি থেকে রক্ষা করে।

Strongly-Typed Views
Razor Strongly-Typed Views সমর্থন করে, যেখানে মডেল ক্লাসের প্রোপার্টি সরাসরি অ্যাক্সেস করা যায়। এটি টাইপিং এর সময় ত্রুটি এড়াতে সহায়ক।


Razor সিনট্যাক্স পরিচিতি

Razor সিনট্যাক্স খুবই সহজ এবং @ চিহ্ন ব্যবহার করে C# কোড শুরু হয়। নিচে Razor-এর কিছু সাধারণ উদাহরণ দেওয়া হলো।

HTML এবং C# এর মিশ্রণ

<h1>Welcome, @ViewBag.UserName!</h1>

এখানে, @ViewBag.UserName ডায়নামিক ডেটা দেখানোর জন্য ব্যবহার করা হয়েছে।

লুপ এবং শর্তাবলী

<ul>
    @foreach (var item in Model.Items)
    {
        <li>@item.Name</li>
    }
</ul>

এখানে, একটি foreach লুপ ব্যবহার করে মডেলের ডেটা লিস্ট আকারে দেখানো হয়েছে।

শর্ত ভিত্তিক কোড

@if (Model.IsAdmin)
{
    <p>Welcome, Admin!</p>
}
else
{
    <p>Welcome, User!</p>
}

এখানে, if-else শর্ত ব্যবহার করে ডায়নামিক কন্টেন্ট প্রদর্শন করা হয়েছে।


Razor Layouts এবং Sections

Razor Layouts ব্যবহার করে আপনি আপনার অ্যাপ্লিকেশনের জন্য একটি কমন টেমপ্লেট তৈরি করতে পারেন, যেখানে প্রতিটি পেজের কমন অংশগুলো থাকে।

Layout তৈরি

<!DOCTYPE html>
<html>
<head>
    <title>@ViewBag.Title</title>
</head>
<body>
    <header>
        <h1>My Website</h1>
    </header>
    <div>
        @RenderBody()
    </div>
</body>
</html>

Section ব্যবহার

@section Scripts {
    <script>
        console.log("This is a custom script for this page.");
    </script>
}

Razor এবং ASPX View Engine এর তুলনা

বৈশিষ্ট্যRazor View EngineASPX View Engine
সিনট্যাক্স@ ব্যবহার করে C# কোড লেখার সুবিধা<%= %> বা <%: %> ব্যবহার করা হয়
পঠনযোগ্যতাসহজ এবং ক্লিন কোডতুলনামূলকভাবে জটিল
পারফরম্যান্সলাইটওয়েট এবং দ্রুততুলনামূলকভাবে ধীর
ডেভেলপমেন্ট টাইমদ্রুতবেশি সময়সাপেক্ষ

Razor View Engine এর সুবিধা

  • ক্লিন এবং সহজ সিনট্যাক্স।
  • HTML এবং C# কোড মিশ্রণে আধুনিক পদ্ধতি।
  • উন্নত নিরাপত্তা এবং XSS প্রতিরোধ।
  • ASP.Net MVC এবং ASP.Net Core-এর সাথে ভালো ইন্টিগ্রেশন।
  • Strongly-Typed Views এর মাধ্যমে টাইপ সেফ কোডিং।

সারমর্ম

Razor View Engine ASP.Net MVC এবং ASP.Net Core MVC অ্যাপ্লিকেশন ডেভেলপমেন্টে একটি গুরুত্বপূর্ণ ভূমিকা পালন করে। এটি সহজ, কার্যকর এবং নিরাপদ পদ্ধতিতে ডায়নামিক কন্টেন্ট তৈরি করতে সাহায্য করে। Razor-এর ব্যবহার ওয়েব ডেভেলপমেন্টের সময় কমায় এবং কোড আরও রিডেবল এবং মেইনটেইনেবল করে।

common.content_added_by

Layouts, Sections, এবং Partial Views

238
238

ASP.Net MVC-তে Layouts, Sections, এবং Partial Views হলো গুরুত্বপূর্ণ কনসেপ্ট যা ওয়েব অ্যাপ্লিকেশনের UI তৈরি করার সময় ব্যবহার করা হয়। এগুলি আপনাকে অ্যাপ্লিকেশনগুলির পুনঃব্যবহারযোগ্য এবং কাঠামোগত কোড তৈরি করতে সাহায্য করে, ফলে উন্নত পারফরম্যান্স এবং সহজ রক্ষণাবেক্ষণ নিশ্চিত হয়।


Layouts

Layouts হল একটি ধরনের "শ্রেণীভুক্ত" টেমপ্লেট যা অ্যাপ্লিকেশনের বিভিন্ন পৃষ্ঠার জন্য সাধারণ ইউআই উপাদান যেমন হেডার, ফুটার, সাইডবার ইত্যাদি তৈরি করে। এটি অ্যাপ্লিকেশনের প্রতিটি পৃষ্ঠার জন্য এককভাবে ব্যবহৃত হয়, তাই বার বার একই কোড লেখার প্রয়োজন হয় না। সাধারণভাবে, Layout একটি HTML টেমপ্লেট হিসেবে কাজ করে, যেখানে কন্টেন্টকে ভিউ (View) হিসেবে অন্তর্ভুক্ত করা হয়।

Layout তৈরি করা

Layout ফাইলটি সাধারণত _Layout.cshtml নামে Views/Shared ফোল্ডারে সংরক্ষণ করা হয়। উদাহরণস্বরূপ:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>My Website</title>
</head>
<body>
    <header>
        <h1>Welcome to My Website</h1>
        <!-- Navigation bar here -->
    </header>

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

    <footer>
        <p>© 2024 My Website</p>
    </footer>
</body>
</html>

Layout ব্যবহার করা

কোনো ভিউতে Layout ব্যবহার করার জন্য, ভিউ ফাইলের উপরে নিচের কোডটি রাখতে হবে:

@{
    Layout = "~/Views/Shared/_Layout.cshtml";
}

এটি তখন নির্দিষ্ট Layout ফাইলটিকে ব্যবহার করবে এবং আপনার কন্টেন্ট সেই Layout এর মধ্যে রেন্ডার হবে।


Sections

Sections হল কাস্টমizable অংশ যেখানে আপনি Layout ফাইলের মধ্যে ডাইনামিক কন্টেন্ট বা নির্দিষ্ট অংশ যোগ করতে পারেন। এটি সাধারণত কন্টেন্ট যেমন স্ক্রিপ্ট বা সিএসএস ইনক্লুড করতে ব্যবহৃত হয়, যা নির্দিষ্ট পৃষ্ঠার জন্য প্রয়োজন।

Section তৈরি করা

Layout ফাইলে @RenderSection() মেথড ব্যবহার করে একটি Section নির্ধারণ করা হয়। উদাহরণ:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>My Website</title>
    @RenderSection("styles", required: false) <!-- Optional section for CSS -->
</head>
<body>
    <header>
        <h1>Welcome to My Website</h1>
    </header>

    <div>
        @RenderBody()
    </div>

    <footer>
        <p>© 2024 My Website</p>
    </footer>

    @RenderSection("scripts", required: false) <!-- Optional section for Scripts -->
</body>
</html>

Section ব্যবহার করা

আপনি কোনো ভিউতে Section ব্যবহার করতে পারেন যেখানে আপনি কাস্টম CSS বা JavaScript যোগ করতে চান:

@{
    Layout = "~/Views/Shared/_Layout.cshtml";
}

@section styles {
    <link rel="stylesheet" href="styles/custom.css" />
}

@section scripts {
    <script src="scripts/custom.js"></script>
}

এখানে styles এবং scripts নামক সেকশনগুলো Layout ফাইলে রেন্ডার হবে।


Partial Views

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

Partial View তৈরি করা

Partial View ফাইলটি Views/Shared ফোল্ডারে তৈরি করা হয়, যেমন _ProductList.cshtml। উদাহরণস্বরূপ:

@model IEnumerable<MyApp.Models.Product>

<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>

Partial View রেন্ডার করা

Partial View রেন্ডার করতে, কন্ট্রোলার থেকে Partial মেথড ব্যবহার করা হয়:

public ActionResult ProductList()
{
    var products = db.Products.ToList();
    return PartialView("_ProductList", products);  // Partial View রিটার্ন
}

এছাড়া ভিউতে @Html.Partial() অথবা @Html.RenderPartial() ব্যবহার করেও Partial View রেন্ডার করা যায়:

@Html.Partial("_ProductList", Model)

এখানে, _ProductList Partial View ফাইলটি রেন্ডার করা হচ্ছে এবং প্রয়োজনীয় মডেল ডেটা পাঠানো হচ্ছে।


সারমর্ম

Layouts, Sections, এবং Partial Views ব্যবহার করে আপনি ASP.Net MVC অ্যাপ্লিকেশনে কোডকে পুনঃব্যবহারযোগ্য, পরিষ্কার এবং আরও কার্যকরী করতে পারেন। Layouts আপনাকে একাধিক পৃষ্ঠায় সাধারণ কন্টেন্ট যুক্ত করতে সহায়ক, Sections কাস্টম অংশ তৈরি করতে সহায়ক, এবং Partial Views ছোট UI অংশগুলো রেন্ডার করতে ব্যবহৃত হয়। এগুলির সাহায্যে কোডের পুনঃব্যবহারযোগ্যতা বাড়ে এবং অ্যাপ্লিকেশনটির রক্ষণাবেক্ষণ আরও সহজ হয়।

common.content_added_by

HTML Helper ব্যবহার করে ফর্ম তৈরি

193
193

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


HTML Helper কী?

HTML Helper একটি মেথড যা HTML ট্যাগগুলির মাধ্যমে কন্ট্রোলার থেকে ভিউতে ডেটা প্রেরণ করতে ব্যবহৃত হয়। এই হেলপার ফাংশনগুলির মাধ্যমে ডেভেলপাররা সহজেই বিভিন্ন ধরনের ফর্ম কন্ট্রোল (যেমনঃ টেক্সট বক্স, রেডিও বাটন, চেকবক্স, ড্রপডাউন লিস্ট ইত্যাদি) তৈরি করতে পারেন।

HTML Helper কে সাধারাণভাবে @Html এর মাধ্যমে কল করা হয়, যা Razor ভিউ ইঞ্জিনে ব্যবহৃত হয়।


HTML Helper দিয়ে ফর্ম তৈরির উদাহরণ

ধরা যাক, আপনি একটি সিম্পল কনট্যাক্ট ফর্ম তৈরি করতে চান যেখানে ব্যবহারকারীরা তাদের নাম, ইমেইল এবং বার্তা প্রদান করতে পারবেন। এই ফর্মে কিছু সাধারণ HTML Helper ফাংশন ব্যবহার করা হবে।

1. TextBox (টেক্সট বক্স)

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

@using (Html.BeginForm())
{
    <div>
        <label for="Name">Name:</label>
        @Html.TextBox("Name")
    </div>
}

এখানে @Html.TextBox("Name") একটি ইনপুট ফিল্ড তৈরি করবে, যেখানে ব্যবহারকারী তাদের নাম প্রদান করতে পারবেন।

2. Label (লেবেল)

লেবেল তৈরি করার জন্য @Html.Label ব্যবহার করা হয়, যা টেক্সট ফিল্ড বা অন্যান্য কন্ট্রোলের জন্য ট্যাগ প্রদর্শন করতে সহায়ক।

<div>
    @Html.Label("Email")
    @Html.TextBox("Email")
</div>

এখানে @Html.Label("Email") লেবেল তৈরি করবে এবং পরবর্তী @Html.TextBox("Email") এর মাধ্যমে ইমেইল ইনপুট ফিল্ড তৈরি হবে।

3. TextArea (টেক্সট এরিয়া)

যদি আপনার ফর্মে একটি বড় টেক্সট এরিয়া (যেমন বার্তা লেখার জন্য) প্রয়োজন হয়, তবে আপনি @Html.TextArea ব্যবহার করতে পারেন।

<div>
    @Html.Label("Message")
    @Html.TextArea("Message", 4, 20)
</div>

এখানে @Html.TextArea("Message", 4, 20) একটি টেক্সট এরিয়া তৈরি করবে যার মধ্যে 4 লাইন এবং 20 কলাম থাকবে।

4. Submit Button (সাবমিট বাটন)

ফর্ম সাবমিট করার জন্য একটি বাটন ব্যবহার করা হবে। @Html.SubmitButton ব্যবহার করে সাবমিট বাটন তৈরি করা যেতে পারে।

<div>
    @Html.SubmitButton("Submit")
</div>

এটি একটি সাবমিট বাটন তৈরি করবে যা ফর্মটি সাবমিট করার জন্য ব্যবহার করা যাবে।


HTML Helper এর অন্যান্য জনপ্রিয় ফাংশন

  • @Html.DropDownList: ড্রপডাউন লিস্ট তৈরি করতে ব্যবহৃত হয়।
  • @Html.CheckBox: চেকবক্স তৈরি করতে ব্যবহৃত হয়।
  • @Html.RadioButton: রেডিও বাটন তৈরি করতে ব্যবহৃত হয়।
  • @Html.ValidationMessage: ইনপুট ফিল্ডের জন্য ভ্যালিডেশন মেসেজ দেখানোর জন্য ব্যবহৃত হয়।

উদাহরণ: পূর্ণ ফর্ম

এখন পুরো ফর্মটি তৈরি করা যাক, যেখানে নাম, ইমেইল, বার্তা এবং একটি সাবমিট বাটন থাকবে:

@using (Html.BeginForm("SubmitForm", "Home", FormMethod.Post))
{
    <div>
        <label for="Name">Name:</label>
        @Html.TextBox("Name")
    </div>

    <div>
        <label for="Email">Email:</label>
        @Html.TextBox("Email")
    </div>

    <div>
        <label for="Message">Message:</label>
        @Html.TextArea("Message", 4, 50)
    </div>

    <div>
        @Html.SubmitButton("Submit")
    </div>
}

এটি একটি সিম্পল কনট্যাক্ট ফর্ম তৈরি করবে যেখানে ব্যবহারকারী নাম, ইমেইল এবং বার্তা প্রদান করতে পারবেন এবং সাবমিট বাটনের মাধ্যমে ফর্মটি সাবমিট করতে পারবেন।


সারমর্ম

ASP.Net MVC-তে HTML Helper ব্যবহার করে ফর্ম তৈরি করা অনেক সহজ এবং পরিষ্কার। HTML Helper ফাংশনগুলি সঠিক HTML ট্যাগ এবং উপাদান তৈরি করতে সহায়ক, যা কোড রক্ষণাবেক্ষণ এবং পুনঃব্যবহারযোগ্যতা নিশ্চিত করে। এটি ডেভেলপারদের দ্রুত এবং কার্যকরভাবে ফর্ম তৈরি করতে সাহায্য করে।

common.content_added_by
টপ রেটেড অ্যাপ

স্যাট অ্যাকাডেমী অ্যাপ

আমাদের অল-ইন-ওয়ান মোবাইল অ্যাপের মাধ্যমে সীমাহীন শেখার সুযোগ উপভোগ করুন।

ভিডিও
লাইভ ক্লাস
এক্সাম
ডাউনলোড করুন
Promotion