⚠️ نمایش Alert حرفه ‌ای در Blazor با SweetAlert2

اگر در پروژه Blazor Server به‌جای alert ساده مرورگر، یک پیام زیبا و حرفه ‌ای میخای، SweetAlert2 یکی از گزینه ‌های خیلی خوبه 😍

با IJSRuntime می تونیم متد JavaScript مربوط به Swal.fire رو از داخل سی شارپ به راحتی اجرا کنیم

⏺ در این مثال:
✅ پیام موفقیت نمایش داده میشه
🔘 دکمه تأیید و لغو داریم
🔸 رنگ دکمه ‌ها قابل تنظیمه
📝 متن و عنوان Alert از داخل سی شارپ ارسال میشه


📌 بخش اصلی کد:

await js.InvokeVoidAsync("Swal.fire", options);

و تنظیمات Alert هم به ‌صورت یک object در #C ساخته شده:

var options = new
{
title = "موفقیت",
text = "اطلاعات با موفقیت ذخیره شد",
icon = "success",
confirmButtonText = "باشه",
cancelButtonText = "لغو",
showCancelButton = true
};

🌟برای استفاده کافیه روی رویداد کلیک دکمه تابع رو متصل کنید:

<button @onclick="showAlert" class="btn btn-danger">Show Alert</button>

کد کامل:

@page "/show" 
@rendermode InteractiveServer 
@inject IJSRuntime js 

<script src="https://cdn.jsdelivr.net/npm/sweetalert2@11.11.0/dist/sweetalert2.all.min.js"></script> 
<link href="https://cdn.jsdelivr.net/npm/sweetalert2@11.11.0/dist/sweetalert2.min.css" rel="stylesheet"> 

<title>Show Alert In Blazor Server</title>

<button @onclick="showAlert" class="btn btn-danger">Show Alert</button> 


@code { 

public async Task showAlert() { 

var options = new { 
title = "موفقیت", 
text = "اطلاعات با موفقیت ذخیره شد", 
icon = "success", 
confirmButtonText = "باشه", 
cancelButtonText = "لغو", 
showCancelButton = true, 
confirmButtonColor = "#3085d6", 
cancelButtonColor = "#d33" 
}; 

await js.InvokeVoidAsync("Swal.fire", options); 

 } 
}

💡 این روش زمانی خیلی کاربردیه که بخوای بعد از ثبت، حذف، ویرایش یا انجام یک عملیات به کاربر پیام مناسب نمایش بدی


#️⃣ #سی_شارپ #برنامه_نویسی #blazor

➖➖➖➖➖➖➖➖
⏺ @cactuswebteam | کاکتوس وب