ASP.Net MVC-তে AJAX (Asynchronous JavaScript and XML) ব্যবহার করে পেজ রিফ্রেশ ছাড়াই ডেটা প্রক্রিয়াকরণ এবং সার্ভার থেকে ডেটা রিসপন্স পাওয়া সম্ভব। এটি ওয়েব অ্যাপ্লিকেশনকে দ্রুত এবং ইন্টারঅ্যাকটিভ করে তোলে। AJAX Action Method তৈরি করে আমরা ক্লায়েন্ট সাইড (JavaScript) এবং সার্ভার সাইড (ASP.Net MVC) মধ্যে কার্যকরী ডেটা বিনিময় করতে পারি।

AJAX Action Method কী?

AJAX Action Method হলো ASP.Net MVC কন্ট্রোলারের একটি মেথড, যা ক্লায়েন্ট থেকে একটি Asynchronous রিকোয়েস্ট গ্রহণ করে এবং JSON, Partial View, বা HTML রেসপন্স প্রদান করে। এটি সাধারণত JsonResult বা PartialViewResult রিটার্ন টাইপ ব্যবহার করে।

AJAX Action Method তৈরির ধাপ

কন্ট্রোলারে AJAX Action Method তৈরি করা:
AJAX Action Method একটি HTTP রিকোয়েস্ট প্রসেস করে এবং ডেটা বা ভিউ রিটার্ন করে। এটি সাধারণত HttpGet বা HttpPost অ্যাট্রিবিউট দিয়ে সাজানো হয়।

জাভাস্ক্রিপ্ট দিয়ে AJAX রিকোয়েস্ট পাঠানো:
AJAX রিকোয়েস্ট পাঠানোর জন্য jQuery.ajax() বা Fetch API ব্যবহার করা হয়।

উদাহরণ: একটি AJAX Action Method তৈরি

ধরা যাক আমরা একটি সিস্টেমে শিক্ষার্থীর নাম অনুসারে তাদের ডেটা সার্চ করব এবং সার্ভার থেকে ডেটা ফিরিয়ে আনব।

Step 1: কন্ট্রোলারে AJAX Action Method তৈরি করা

public class StudentController : Controller
{
    [HttpPost]
    public JsonResult SearchStudent(string name)
    {
        // শিক্ষার্থীর ডেটা সংগ্রহ
        var students = GetStudents().Where(s => s.Name.Contains(name)).ToList();
        return Json(students);
    }

    private List<Student> GetStudents()
    {
        return new List<Student>
        {
            new Student { Id = 1, Name = "Rahim", Class = "10" },
            new Student { Id = 2, Name = "Karim", Class = "9" }
        };
    }
}

Step 2: ভিউতে AJAX রিকোয়েস্ট পাঠানোর কোড

<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>

<input type="text" id="searchName" placeholder="Enter student name" />
<button id="searchBtn">Search</button>
<div id="result"></div>

<script>
    $(document).ready(function () {
        $('#searchBtn').click(function () {
            var name = $('#searchName').val();

            $.ajax({
                url: '/Student/SearchStudent',
                type: 'POST',
                data: { name: name },
                success: function (data) {
                    var resultHtml = '<ul>';
                    data.forEach(function (student) {
                        resultHtml += '<li>' + student.Name + ' - Class ' + student.Class + '</li>';
                    });
                    resultHtml += '</ul>';
                    $('#result').html(resultHtml);
                },
                error: function () {
                    alert('Error occurred while fetching data!');
                }
            });
        });
    });
</script>

JSON রেসপন্স ব্যবহার

AJAX Action Method সাধারণত JSON রেসপন্স প্রদান করে, যা জাভাস্ক্রিপ্ট দিয়ে প্রসেস করা সহজ। উদাহরণে return Json(students); ব্যবহার করে JSON ডেটা পাঠানো হয়েছে।

Partial View ব্যবহার

AJAX Action Method থেকে Partial View রিটার্ন করেও পেজের নির্দিষ্ট অংশ আপডেট করা যায়।

Partial View রিটার্ন করার উদাহরণ:

public PartialViewResult GetStudentPartial()
{
    var students = GetStudents();
    return PartialView("_StudentList", students);
}

JavaScript দিয়ে Partial View লোড করা:

$.ajax({
    url: '/Student/GetStudentPartial',
    type: 'GET',
    success: function (data) {
        $('#partialContainer').html(data);
    }
});

AJAX Action Method-এর সুবিধা

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

সারমর্ম

AJAX Action Method ASP.Net MVC অ্যাপ্লিকেশনে পেজ রিফ্রেশ ছাড়াই ডেটা লোড এবং প্রসেসিংয়ের জন্য কার্যকর। এটি ব্যবহার করে অ্যাপ্লিকেশনকে আরও দ্রুত এবং ইন্টারঅ্যাকটিভ করা যায়। JSON বা Partial View রিটার্ন টাইপ ব্যবহার করে ডেটা এবং ভিউকে সহজেই পরিচালনা করা সম্ভব।