راهنمای بازگرداندن JSON با وب سرویس در ASP.NET و jQuery

آیا تا به حال به این فکر کرده‌اید که وب‌سایت‌های مدرن چگونه داده‌ها را بدون بارگذاری مجدد کل صفحه نمایش می‌دهند؟ 🤔 پاسخ در ارتباط پویا بین کلاینت و سرور نهفته است. یکی از قدرتمندترین روش‌ها برای این کار، بازگرداندن JSON با وب سرویس در ASP.NET و فراخوانی آن با jQuery است. در گذشته، توسعه‌دهندگان از وب‌سرویس‌های ASMX برای این منظور استفاده می‌کردند. اما امروزه با ظهور ASP.NET Core، استفاده از Web API به استانداردی طلایی تبدیل شده است. این روش نه‌تنها مدرن‌تر و سریع‌تر است، بلکه امنیت و انعطاف‌پذیری بسیار بیشتری را فراهم می‌کند. در این راهنمای جامع، ما به شما نشان می‌دهیم چگونه یک وب‌سرویس مدرن با ASP.NET Core Web API بسازید و سپس با استفاده از jQuery Ajax، داده‌ها را به صورت JSON دریافت و در صفحه خود نمایش دهید. بیایید شروع کنیم! 🚀

چرا بازگرداندن JSON از وب‌سرویس اهمیت دارد؟

استفاده از این تکنیک مزایای قابل توجهی برای پروژه‌های شما به همراه دارد. در واقع، این رویکرد زیربنای بسیاری از اپلیکیشن‌های تحت وب مدرن است. در ادامه به مهم‌ترین مزیت‌های آن اشاره می‌کنیم:

✅ ساخت برنامه‌های تک‌صفحه‌ای (SPA): با دریافت داده‌ها به صورت JSON، می‌توانید محتوای صفحه را بدون رفرش کامل تغییر دهید. این اساس کار فریم‌ورک‌هایی مانند React، Angular و Vue است.
⚡️ افزایش سرعت و بهبود تجربه کاربری (UX): تنها داده‌های ضروری بین سرور و کلاینت منتقل می‌شوند. این کار حجم ترافیک را کاهش داده و سرعت بارگذاری را به شدت بالا می‌برد.
🔧 جداسازی منطق سرور و کلاینت: تیم‌های فرانت‌اند و بک‌اند می‌توانند به صورت مستقل کار کنند. وب‌سرویس (API) مانند یک قرارداد بین این دو تیم عمل می‌کند.
📱 پشتیبانی از پلتفرم‌های مختلف: یک وب‌سرویس واحد می‌تواند به اپلیکیشن وب، اپلیکیشن موبایل (اندروید و iOS) و سایر سرویس‌ها داده ارسال کند.

پیش‌نیازهای شروع کار

قبل از شروع، اطمینان حاصل کنید که ابزارهای زیر را نصب کرده‌اید:

Visual Studio 2022 یا نسخه‌های جدیدتر
NET 6.0 SDK. یا نسخه‌های بالاتر
دانش اولیه از زبان C# و jQuery

گام اول: ساخت وب‌سرویس با ASP.NET Core Web API

در این بخش، یک API ساده برای مدیریت اطلاعات خودروها می‌سازیم. این API لیستی از خودروها را در قالب JSON به ما برمی‌گرداند.

۱. ایجاد پروژه جدید

ابتدا Visual Studio را باز کنید و یک پروژه جدید از نوع ASP.NET Core Web API بسازید. نام پروژه را CarApiService بگذارید.

۲. ساخت مدل (Model)

مدل، ساختار داده‌های ما را تعریف می‌کند. یک کلاس جدید به نام Car.cs ایجاد کرده و کدهای زیر را در آن قرار دهید.

csharp

public class Car
{
    public int Id { get; set; }
    public string Make { get; set; }
    public string Model { get; set; }
    public int Year { get; set; }
    public int Doors { get; set; }
    public string Colour { get; set; }
    public float Price { get; set; }
}

۳. ساخت کنترلر (Controller)

کنترلر وظیفه مدیریت درخواست‌ها و ارسال پاسخ‌ها را بر عهده دارد. یک کنترلر جدید از نوع API Controller – Empty بسازید و نام آن را CarsController.cs بگذارید. سپس کدهای زیر را جایگزین محتوای آن کنید.

csharp

using Microsoft.AspNetCore.Mvc;
using System.Collections.Generic;
using System.Linq;

[Route("api/[controller]")]
[ApiController]
public class CarsController : ControllerBase
{
    private static readonly List<Car> Cars = new List<Car>
    {
        new Car{Id=1, Make="Audi",Model="A4",Year=1995,Doors=4,Colour="Red",Price=2995f},
        new Car{Id=2, Make="Ford",Model="Focus",Year=2002,Doors=5,Colour="Black",Price=3250f},
        new Car{Id=3, Make="BMW",Model="5 Series",Year=2006,Doors=4,Colour="Grey",Price=24950f},
        new Car{Id=4, Make="Renault",Model="Laguna",Year=2000,Doors=5,Colour="Red",Price=3995f},
        new Car{Id=5, Make="Mini",Model="Cooper",Year=2005,Doors=2,Colour="Grey",Price=9850f}
    };

    // GET: api/Cars
    [HttpGet]
    public ActionResult<IEnumerable<Car>> GetAllCars()
    {
        return Ok(Cars);
    }

    // GET: api/Cars/ByDoors/4
    [HttpGet("ByDoors/{doors}")]
    public ActionResult<IEnumerable<Car>> GetCarsByDoors(int doors)
    {
        var filteredCars = Cars.Where(c => c.Doors == doors).ToList();

        if (!filteredCars.Any())
        {
            return NotFound("هیچ خودرویی با این تعداد در یافت نشد.");
        }
        
        return Ok(filteredCars);
    }
}

نکته: در یک پروژه واقعی، داده‌ها از دیتابیس خوانده می‌شوند. اما برای سادگی، ما از یک لیست ثابت استفاده کرده‌ایم.

گام دوم: فراخوانی وب‌سرویس با jQuery Ajax

حالا که وب‌سرویس ما آماده است، زمان آن رسیده که با استفاده از jQuery آن را فراخوانی کنیم. یک فایل index.html ساده در پروژه خود ایجاد کنید.

۱. آماده‌سازی صفحه HTML

کد HTML زیر را برای نمایش داده‌ها در صفحه قرار دهید. ما یک دکمه برای دریافت همه خودروها، یک دراپ‌داون برای فیلتر بر اساس تعداد در و یک div برای نمایش نتایج داریم.

<!DOCTYPE html>
<html>
<head>
    <title>Cars API Consumer</title>
</head>
<body>

    <h2>دریافت اطلاعات خودروها با jQuery و ASP.NET Core</h2>

    <button id="btnGetAllCars">دریافت همه خودروها</button>
    
    <hr>
    
    <div>
        <label for="ddlDoors">فیلتر بر اساس تعداد در:</label>
        <select id="ddlDoors">
            <option value="2">2 در</option>
            <option value="4">4 در</option>
            <option value="5">5 در</option>
        </select>
        <button id="btnGetByDoors">فیلتر کن</button>
    </div>

    <div id="output" style="margin-top: 20px;"></div>

    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
    <script src="app.js"></script> <!-- کد جی‌کوئری ما در این فایل خواهد بود -->
</body>
</html>

۲. نوشتن کدهای jQuery Ajax

یک فایل جدید به نام app.js بسازید و کدهای جاوااسکریپت زیر را در آن قرار دهید.

$(document).ready(function () {

    const apiUrl = 'https://localhost:7123/api/Cars'; // آدرس API خود را جایگزین کنید

    // رویداد کلیک برای دریافت همه خودروها
    $('#btnGetAllCars').click(function () {
        $.ajax({
            url: apiUrl,
            type: 'GET',
            dataType: 'json',
            success: function (cars) {
                displayCars(cars);
            },
            error: function () {
                $('#output').html('<p>خطا در دریافت اطلاعات.</p>');
            }
        });
    });

    // رویداد کلیک برای فیلتر کردن خودروها
    $('#btnGetByDoors').click(function () {
        const doors = $('#ddlDoors').val();
        $.ajax({
            url: `${apiUrl}/ByDoors/${doors}`,
            type: 'GET',
            dataType: 'json',
            success: function (cars) {
                displayCars(cars);
            },
            error: function (jqXHR) {
                $('#output').html(`<p>خطا: ${jqXHR.responseText}</p>`);
            }
        });
    });

    // تابعی برای نمایش داده‌ها در صفحه
    function displayCars(cars) {
        const outputDiv = $('#output');
        outputDiv.empty(); // پاک کردن نتایج قبلی

        if (cars.length === 0) {
            outputDiv.html('<p>هیچ خودرویی برای نمایش وجود ندارد.</p>');
            return;
        }

        const carList = $('<ul></ul>');
        $.each(cars, function (index, car) {
            carList.append(
                `<li>
                    <strong>${car.make} ${car.model} (${car.year})</strong><br>
                    رنگ: ${car.colour}, تعداد در: ${car.doors}, قیمت: ${car.price}
                </li>`
            );
        });
        outputDiv.append(carList);
    }
});

کاربردهای عملی این تکنیک در دنیای واقعی

دانش بازگرداندن JSON و استفاده از آن با Ajax، یک مهارت کلیدی برای هر توسعه‌دهنده وب است. در ادامه چند کاربرد واقعی آن را مشاهده می‌کنید:

📊 داشبوردهای مدیریتی: نمایش نمودارها و گزارش‌های زنده بدون نیاز به رفرش کردن صفحه.
🛒 فیلتر محصولات در فروشگاه آنلاین: اعمال فیلترهایی مانند قیمت، رنگ یا برند و نمایش نتایج به صورت آنی.
🔍 جستجوی زنده (Live Search): نمایش نتایج جستجو همزمان با تایپ کردن کاربر در کادر جستجو.
💬 سیستم‌های چت و نظرات: بارگذاری پیام‌ها و نظرات جدید به صورت خودکار و در لحظه.
🗺️ نقشه‌های تعاملی: نمایش اطلاعات نقاط مختلف روی نقشه با کلیک کردن کاربر.

ثبت‌نام برای دسترسی به API های قدرتمند

آیا می‌خواهید از API های آماده و قدرتمند ما در پروژه‌های خود استفاده کنید؟ کافی است مراحل زیر را طی کنید:

به وب‌سایت p.api.ir مراجعه کنید.
روی دکمه «ثبت‌نام» کلیک کرده و فرم مربوطه را پر کنید.
پس از تایید ایمیل، کلید API اختصاصی خود را دریافت نمایید.

جمع‌بندی

در این مقاله، ما از یک موضوع قدیمی یعنی بازگرداندن JSON با وب سرویس، به یک راهکار مدرن و کارآمد با ASP.NET Core Web API و jQuery Ajax رسیدیم. شما یاد گرفتید که چگونه یک API بسازید، آن را با متدهای مختلف گسترش دهید و در نهایت، داده‌های دریافتی را به شکلی جذاب در صفحه وب خود نمایش دهید. این مهارت به شما کمک می‌کند تا وب‌اپلیکیشن‌های سریع‌تر، پویاتر و با تجربه کاربری بهتری بسازید.

حالا نوبت شماست! آیا تجربه کار با Web API و jQuery را داشته‌اید؟ نظرات و سوالات خود را در بخش دیدگاه‌ها با ما در میان بگذارید. 💬