نمایش ساختار درختی در asp.net core 8 razor pages و bootstrap 5.3.3

پاسخ هوش مصنوعی

برای نمایش ساختار درختی در ASP.NET Core 8 با استفاده از Razor Pages و Bootstrap 5.3.3، می توانید مراحل زیر را دنبال کنید:

ابتدا یک صفحه Razor (برای مثال، TreeView.cshtml) ایجاد کنید:

@page
@model YourNamespace.Pages.TreeViewModel
@{
    ViewData["Title"] = "درخت دسته بندی";
}


    
@ViewData["Title"]
    

        @foreach (var category in Model.Categories)
        {
            

                
                @category.text
            
        }
    
    ذخیره

سپس مدلی برای کنترلر خود تعریف کنید:

using Microsoft.AspNetCore.Mvc;
using Microsoft.AspNetCore.Mvc.RazorPages;

namespace YourNamespace.Pages
{
    public class TreeViewModel : PageModel
    {
        private readonly AppDbContext _context;

        public TreeViewModel(AppDbContext context)
        {
            _context = context;
        }

        public List Categories { get; set; }

        public void OnGet()
        {
            Categories = _context.Categories.Select(c => new TreeViewCategory
            {
                id = c.Id,
                text = c.Name,
                parentId = c.ParentId,
                selected = c.IsSelected // Assuming you have a property to check if selected
            }).ToList();
        }

        public IActionResult OnPostSave(int[] selectedCategories)
        {
            // ذخیره سازی منطق به این صورت اضافه میشود
            // مانند درج در دیتابیس یا بروزرسانی

            return RedirectToPage(); // بازگشت به صفحه
        }
    }
}

در فایل Startup.cs (یا Program.cs در ASP.NET Core 6 و بالاتر) می توانید DbContext را تنظیم کنید:

services.AddDbContext(options =>
{
    options.UseSqlServer(Configuration.GetConnectionString("DefaultConnection"));
});

نهایتا، برای ذخیره انتخاب ها، باید یک JavaScript ساده ایجاد کنید:

document.getElementById('saveBtn').addEventListener('click', function () {
    const checkboxes = document.querySelectorAll('input[name="selectedCategories"]:checked');
    const selectedIds = Array.from(checkboxes).map(chk => chk.value);

    fetch('/YourPageOnPost', {
        method: 'POST',
        headers: {
            'Content-Type': 'application/json'
        },
        body: JSON.stringify(selectedIds)
    }).then(response => {
        if (response.ok) {
            alert('موارد انتخاب شده ذخیره شد.');
        }
    });
});