استفاده از Sweet Alert برای نمایش پیغام گرافیکی در Asp.net Core

مشخصات سوال کننده :

کاربر : Mortezahkalate امتیاز کاربر : 0 رتبه کاربر : 7059

دسته بندی : جاوا اسکریپت Asp.net Mvc Asp.net Core SweetAlert

نظر ویرایش گزارش نشان

به این سوال امتیاز بدهید 1

تعداد بازدید این سوال : 3424

هوش مصنوعی

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

برای استفاده از Sweet Alert در پروژه ASP.NET Core خود، مراحل زیر را دنبال کنید:

1. ابتدا باید کتابخانه Sweet Alert را به پروژه خود اضافه کنید. می توانید از CDN استفاده کنید. به فایل _Layout.cshtml خود رفته و لینک های زیر را در قسمت <head> اضافه کنید:

2. در کنترلر خود، بعد از انجام عملیات مورد نظر (مثلاً ذخیره سازی در پایگاه داده)، می توانید یک پیام را به View ارسال کنید. برای این کار می توانید از TempData استفاده کنید:


public IActionResult SaveData(MyModel model)
{
    // عملیات ذخیره سازی

    TempData["message"] = "عملیات با موفقیت انجام شد!";
    return RedirectToAction("Index");
}

3. سپس در View خود، می توانید کد جاوااسکریپت زیر را برای بررسی وجود پیام و نمایش آن با Sweet Alert اضافه کنید:

این کد در زمان بارگزاری صفحه بررسی می کند که آیا پیامی در TempData وجود دارد یا خیر و در صورت وجود، آن را با Sweet Alert نمایش می دهد.

به این پاسخ امتیاز بدهید 0

امتیاز: - رتبه: -

نظر ویرایش گزارش

پاسخ دهنده : saedbfd 02:16 1401/05/05

نمایش پیغام در وب توسط جاوا اسکریپت انجام میشه و جاوااسکریپت هم سمت کلاینت هست. یعنی ارتباطی با کنترلر نداره. برای استفاده از Sweet Alert مراحل زیر رو انجام بدید:

ابتدا باید این پلاگین رو دانلود کنید. (لینک دانلود Sweet Alert)
بعد از دانلود پلاگین اون رو در پوشه wwwroot --> lib از پروژه قرار بدید.
خب حالا در کنترلر Home و ویو Index قرار بگیرید. در بالای ویو باید فایل های css و در پایین هم فایل های جاوا اسکریپت مربوط به پلاگین رو اضافه کنید.

یک تگ Button در داخل تگ div قرار میدید و id اون رو برابر با btnsweet بذارید.
یک تگ div هم با id برابر با divmsg قرار بدید.
خب حالا میخوایم وقتی روی دکمه کلیک شد اطلاعات به سمت سرور بره و بعد از انجام عملیات در سرور یک پیغام نمایش داده بشه و همچنین بعد از اینکه پیغام هم نمایش داده شد یه سری عملیات انجام بدیم. برای ارسال اطلاعات به سمت سرور از Ajax باید استفاده کنید.

در انتهای ویوی شما باید به این شکل باشه :

<link href="~/lib/sweetalert/sweetalert2.min.css" rel="stylesheet" />

<div class="container">
    <button id="btnsweet" class="btn">
        Click Me ...
    </button>

    <div class="alert" id="divmsg">

    </div>
</div>

@section Scripts{

    <script src="~/lib/sweetalert/sweetalert2.min.js"></script>

    <script>
    $("#btnsweet").on('click', function (e) {
        e.preventDefault();
        $.ajax({
            type: 'POST',
            url: '@Url.Action("InsertDB", "Home")',
        }).done(function (res) {
            
            if (res.status === 'ok') {
                swal({
                    title: "ثبت اطلاعات!!",
                    text: "اطلاعات ثبت شد",
                    type: 'success',
                    showCancelButton: false,
                    allowOutsideClick: false,
                    confirmButtonColor: "green",
                    confirmButtonText: "باشه"
                }).then(function () {
                    $("#divmsg").text('عالی بود');
                });
            }
        });
    });
    </script>
}

سورس پروژه هم براتون میذارم . کافیه فقط پروژه رو ران کنید و روی دکمه کلیک کنید.

دانلود سورس

به این پاسخ امتیاز بدهید 2

امتیاز: 1664 رتبه: 1

نظر ویرایش گزارش

1 نظر

Mortezahkalate : خیلی ممنونم

امتیاز کاربر : 0 رتبه کاربر : 7059 تاریخ ثبت : 04:06 1401/05/06

حذف

آخرین سوالات ثبت ‌شده

سوالات مرتبط

آموزش های پرطرفدار

برای ارسال پاسخ لطفا وارد حساب کاربری خود شوید. ورود

استفاده از Sweet Alert برای نمایش پیغام گرافیکی در Asp.net Core

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

آموزش ساخت اتوماسیون اداری تحت وب

آموزش ساخت سیستم فروش و انبارداری وب

آموزش ساخت سیستم حقوق و دستمزد وب با سینکفیوژن

آموزش ساخت سیستم آزمونگیر آنلاین