این مقاله به صورت جامع به بررسی چگونگی ساخت یک Web API در ASP.NET Core و سپس فراخوانی و استفاده از آن در یک Razor View به کمک AJAX می‌پردازد. ما یک سناریوی عملی را دنبال خواهیم کرد: نمایش لیستی از محصولات و امکان افزودن یک محصول جدید به صورت پویا.

بخش اول: ساخت Web API در ASP.NET Core

API (Application Programming Interface) در واقع یک رابط نرم‌افزاری است که به برنامه‌های مختلف اجازه می‌دهد با یکدیگر ارتباط برقرار کنند. در ASP.NET Core، ساخت API به کمک کنترلرهای API انجام می‌شود که به طور خاص برای پاسخگویی به درخواست‌های HTTP (مانند GET, POST, PUT, DELETE) طراحی شده‌اند.

گام ۱: ایجاد پروژه ASP.NET Core MVC

ابتدا یک پروژه جدید از نوع ASP.NET Core Web App (Model-View-Controller) در ویژوال استودیو ایجاد کنید. این ساختار پایه، همه چیزهایی را که برای شروع نیاز داریم، در اختیار ما قرار می‌دهد.

گام ۲: ایجاد Model

ابتدا مدل داده‌ای خود را تعریف می‌کنیم. یک کلاس ساده به نام Product در پوشه Models ایجاد کنید:

namespace YourProjectName.Models
{
    public class Product
    {
        public int Id { get; set; }
        public string Name { get; set; }
        public double Price { get; set; }
    }
}

گام ۳: ایجاد API Controller

کنترلرهای API قلب تپنده وب‌سرویس ما هستند. برای ایجاد آن:

1. در پوشه Controllers، یک کلاس جدید به نام ProductsAPIController.cs ایجاد کنید.

2. این کلاس باید از ControllerBase ارث‌بری کند.

3. از دو Attribute کلیدی در سطح کلاس استفاده کنید:

   • [ApiController]: این ویژگی، قابلیت‌های خاص API مانند اعتبارسنجی خودکار مدل و مدیریت خطاهای استاندارد را فعال می‌کند.

   • [Route("api/[controller]")]: این ویژگی الگوی مسیریابی را برای تمام اکشن‌های این کنترلر مشخص می‌کند. [controller] به صورت خودکار با نام کنترلر (بدون پسوند Controller) جایگزین می‌شود؛ در اینجا api/products.

در این کنترلر، یک لیست ثابت از محصولات را به عنوان منبع داده موقت تعریف می‌کنیم و دو متد (Action) برای دریافت لیست محصولات و افزودن محصول جدید می‌سازیم.

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

[Route("api/[controller]")]
[ApiController]
public class ProductsAPIController : ControllerBase
{
    private static List _products = new List
    {
        new Product { Id = 1, Name = "لپتاپ", Price = 1200.00 },
        new Product { Id = 2, Name = "موس", Price = 25.50 },
        new Product { Id = 3, Name = "کیبورد", Price = 49.99 }
    };

    // GET: api/products
    [HttpGet]
    public ActionResult> GetProducts()
    {
        return Ok(_products); // بازگرداندن لیست محصولات با کد وضعیت 200 OK
    }

    // POST: api/products
    [HttpPost]
    public ActionResult PostProduct(Product product)
    {
        if (!ModelState.IsValid)
        {
            return BadRequest(ModelState); // اگر مدل معتبر نباشد، خطای 400 برمی‌گرداند
        }
        
        product.Id = _products.Max(p => p.Id) + 1; // یک ID جدید ایجاد می‌کند
        _products.Add(product);
        
        // بازگرداندن محصول ایجاد شده با کد وضعیت 201 Created
        return CreatedAtAction(nameof(GetProducts), new { id = product.Id }, product);
    }
}

نکات مهم:

• [HttpGet]: مشخص می‌کند که متد GetProducts به درخواست‌های HTTP GET پاسخ می‌دهد.

• [HttpPost]: مشخص می‌کند که متد PostProduct به درخواست‌های HTTP POST پاسخ می‌دهد.

• ActionResult: به ASP.NET Core اجازه می‌دهد تا هم نوع داده (T) و هم نتایج مختلف HTTP (مانند Ok, BadRequest, NotFound) را به صورت استاندارد بازگرداند.

• Ok() و BadRequest(): متدهایی برای تولید پاسخ‌های استاندارد HTTP هستند.

حالا API ما آماده است. اگر پروژه را اجرا کنید و به آدرس /api/products بروید، لیستی از محصولات را در قالب JSON مشاهده خواهید کرد.

بخش دوم: استفاده از API در View با AJAX

اکنون که API ما آماده است، زمان آن رسیده که از آن در یک صفحه وب استفاده کنیم. ما یک صفحه Razor View ایجاد می‌کنیم که لیست محصولات را نمایش می‌دهد و فرمی برای اضافه کردن محصول جدید دارد.

گام ۴: آماده‌سازی View

در کنترلر HomeController، یک اکشن برای نمایش صفحه محصولات ایجاد کنید:

public IActionResult Products()
{
    return View();
}

سپس در پوشه Views/Home، یک View جدید به نام Products.cshtml بسازید. محتوای اولیه این View به شکل زیر است:

@{
    ViewData["Title"] = "مدیریت محصولات";
}

@ViewData["Title"]

@section Scripts { }

گام ۵: نوشتن کدهای AJAX

ما از Fetch API که یک استاندارد مدرن جاوااسکریپت برای درخواست‌های شبکه است، استفاده خواهیم کرد. همچنین نمونه کد با jQuery AJAX نیز ارائه می‌شود که هنوز هم بسیار رایج است.

کدهای زیر را در بخش @section Scripts در فایل Products.cshtml قرار دهید.

۱. دریافت و نمایش لیست محصولات (GET Request)

ابتدا تابعی می‌نویسیم که با بارگذاری صفحه، لیست محصولات را از API دریافت کرده و در جدول نمایش دهد.

document.addEventListener('DOMContentLoaded', function () {
    loadProducts();
});

async function loadProducts() {
    try {
        const response = await fetch('/api/products');
        if (!response.ok) {
            throw new Error(`HTTP error! status: ${response.status}`);
        }
        const products = await response.json();
        
        const tableBody = document.getElementById('productsTableBody');
        tableBody.innerHTML = ''; // پاک کردن جدول قبل از افزودن داده‌های جدید
        
        products.forEach(product => {
            let row = `
                           ${product.id}
                           ${product.name}
                           ${product.price}
                       `;
            tableBody.innerHTML += row;
        });
    } catch (error) {
        console.error('Fetch Error:', error);
        document.getElementById('productsTableBody').innerHTML = 'خطا در بارگذاری داده‌ها.';
    }
}

۲. ارسال محصول جدید (POST Request)

حالا رویداد submit فرم را مدیریت می‌کنیم تا داده‌ها را به جای ارسال سنتی، با AJAX به API بفرستیم.

document.getElementById('addProductForm').addEventListener('submit', async function (event) {
    event.preventDefault(); // جلوگیری از ارسال عادی فرم و رفرش شدن صفحه

    const name = document.getElementById('productName').value;
    const price = parseFloat(document.getElementById('productPrice').value);
    const feedbackDiv = document.getElementById('form-feedback');

    const newProduct = {
        name: name,
        price: price
    };
    
    try {
        const response = await fetch('/api/products', {
            method: 'POST',
            headers: {
                'Content-Type': 'application/json'
            },
            body: JSON.stringify(newProduct)
        });

        if (response.ok) {
            feedbackDiv.innerHTML = '

'; document.getElementById('addProductForm').reset(); // ریست کردن فرم loadProducts(); // بارگذاری مجدد لیست محصولات برای نمایش محصول جدید } else { const errorData = await response.json(); // نمایش خطاهای اعتبارسنجی const errorMessages = Object.values(errorData.errors).flat().join('
'); feedbackDiv.innerHTML = `

`; } } catch (error) { console.error('Post Error:', error); feedbackDiv.innerHTML = '

'; } });

پیاده‌سازی با jQuery AJAX (روش جایگزین)

اگر پروژه شما از کتابخانه jQuery استفاده می‌کند، می‌توانید از متد $.ajax برای همین کار استفاده کنید. کد زیر جایگزین کدهای Fetch API می‌شود.

$(document).ready(function () {
    // بارگذاری اولیه محصولات
    loadProducts();

    // مدیریت ارسال فرم
    $('#addProductForm').on('submit', function (e) {
        e.preventDefault();

        const newProduct = {
            name: $('#productName').val(),
            price: parseFloat($('#productPrice').val())
        };

        $.ajax({
            url: '/api/products',
            type: 'POST',
            contentType: 'application/json',
            data: JSON.stringify(newProduct),
            success: function (data) {
                $('#form-feedback').html('

'); $('#addProductForm')[0].reset(); loadProducts(); // بارگذاری مجدد لیست }, error: function (xhr, status, error) { console.error("Error:", error); $('#form-feedback').html('

'); } }); }); }); function loadProducts() { $.ajax({ url: '/api/products', type: 'GET', success: function (products) { const tableBody = $('#productsTableBody'); tableBody.empty(); // پاک کردن جدول $.each(products, function (index, product) { let row = ` ${product.id} ${product.name} ${product.price} `; tableBody.append(row); }); }, error: function (xhr, status, error) { console.error("Error:", error); $('#productsTableBody').html('خطا در بارگذاری داده‌ها.'); } }); }

جمع‌بندی

در این مقاله، ما یک فرآیند کامل را برای ساخت یک API در ASP.NET Core و تعامل با آن از طریق یک صفحه وب با استفاده از AJAX طی کردیم. این معماری که به SPA (Single Page Application) نزدیک است، مزایای قابل توجهی دارد:

• تجربه کاربری بهتر (UX): با حذف بارگذاری مجدد صفحات، تعاملات کاربر بسیار سریع‌تر و روان‌تر می‌شود.

• کاهش بار سرور: تنها داده‌های ضروری (معمولاً در قالب JSON) بین کلاینت و سرور منتقل می‌شوند، نه کدهای HTML کامل صفحه.

• جداسازی لایه‌ها (Separation of Concerns): لایه نمایش (View) از منطق تجاری و دسترسی به داده (API) جدا می‌شود. این امر نگهداری و توسعه برنامه را آسان‌تر می‌کند.

این الگو اساس بسیاری از برنامه‌های وب مدرن است و تسلط بر آن برای هر توسعه‌دهنده ASP.NET Core ضروری است. شما می‌توانید با افزودن قابلیت‌های ویرایش و حذف به این مثال، درک خود را از تعاملات RESTful با AJAX عمیق‌تر کنید.