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

نمایش پیغام در وب توسط جاوا اسکریپت انجام میشه و جاوااسکریپت هم سمت کلاینت هست. یعنی ارتباطی با کنترلر نداره. برای استفاده از 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>
}

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

دانلود سورس