Display Sweet Alert message after record Insert in ASP.Net Core MVC

Last Reply one month ago By dharmendr

Posted one month ago

hi guys,

I'm learn how to use sweet alert in ASP.NET CORE MVC, data successfully saved in database but why the message information successfully saved not appear.

Where it the mistake in this code. Any help could be appreciate.

this is the DokterController.cs

namespace AdminLTEMvc.Controllers
{
    public class DokterController : Controller
    {        
        public IActionResult TambahData(DokterModel dokterModel)
        {
            if (ModelState.IsValid)
            {
                using (SqlConnection con = new SqlConnection(_configuration.GetConnectionString("db_klinik")))
                {
                    using (SqlCommand cmd = new SqlCommand("Insert Into Dokter (Nama_Dokter,Alamat,Jenis_Kelamin,Spesialisasi,Keahlian) Values ('" + dokterModel.Nama_Dokter + "','" + dokterModel.Alamat + "','" + dokterModel.Jenis_Kelamin + "','" + dokterModel.Spesialisasi + "','" + dokterModel.Keahlian + "')", con))
                    {
                        con.Open();
                        cmd.Connection = con;
                        cmd.CommandType = CommandType.Text;
                        cmd.ExecuteNonQuery();
                        //show message for data successfuly saved.
                        TempData["pesan"] = "Data Berhasil disimpan...";
                        return RedirectToAction("Index", "Dokter");
                    }
                }
            }
            else
            {
                return View(dokterModel);
            }
        }

this the TambahData.cshtml

@addTagHelper*, Microsoft.AspNetCore.Mvc.TagHelpers
@model AdminLTEMvc.Models.DokterModel

@{
    Layout = "~/Views/Shared/AdminLayout.cshtml";
}
<!DOCTYPE html>

<html>
<head>
    <meta name="viewport" content="width=device-width" />
    <title>Tambah Data Dokter</title>
    <script src="~/plugins/jquery/jquery.min.js"></script>
    <script src="~/lib/jquery-validation/dist/jquery.validate.min.js"></script>
    <script src="~/lib/jquery-validation-unobtrusive/jquery.validate.unobtrusive.min.js"></script>
    <link href="~/dist/css/adminlte.min.css" rel="stylesheet" />
    <script src="~/plugins/bootstrap/js/bootstrap.min.js"></script>
    <script src="~/plugins/sweetalert2/sweetalert2.js"></script>
    <link href="~/plugins/sweetalert2/sweetalert2.css" rel="stylesheet" />
    <script type="text/javascript">
        var Pesan = "@((string)ViewBag.pesan)";
           if (strvalue !== null && strvalue !== '')
           {
               swal("Good job!",Pesan, "success")
        };
    </script>
</head>
<body>
    <!-- Main content -->
    <section class="content">
        <div class="container-fluid">
            <!-- Horizontal Form -->
            <div class="card card-green">
                <div class="card-header">
                    <h3 class="card-title">Tambah Data Dokter</h3>
                </div>
                <!-- /.card-header -->
                <!-- form start -->
                <form class="form-horizontal" asp-action="TambahData">
                        <div class="form-group row">
                            <label asp-for="Nama_Dokter" class="col-sm-2 col-form-label">Nama Dokter</label>
                            <div class="col-sm-10">
                                <input asp-for="Nama_Dokter" id="Nama_Dokter" class="form-control" placeholder="Nama Dokter">
                                <span asp-validation-for="Nama_Dokter" class="text-danger"></span>
                            </div>
                        </div>
                        <div class="form-group row">
                            <label asp-for="Alamat" class="col-sm-2 col-form-label">Alamat</label>
                            <div class="col-sm-10">
                                <textarea asp-for="Alamat" id="Alamat" class="form-control" rows="4" placeholder="Alamat"></textarea>
                                <span asp-validation-for="Alamat" class="text-danger"></span>
                            </div>
                        </div>
                        <div class="form-group row">
                            <label asp-for="Jenis_Kelamin" class="col-sm-2 col-form-label"> Jenis Kelamin</label>
                            <div class="col-sm-10">
                                @Html.RadioButtonFor(model => model.Jenis_Kelamin, "Laki-Laki") <span>Laki-Laki</span>
                                @Html.RadioButtonFor(model => model.Jenis_Kelamin, "Perempuan") <span>Perempuan</span>
                                <br />
                                <span asp-validation-for="Jenis_Kelamin" id="Jenis_Kelamin" class="text-danger"></span>
                            </div>
                        </div>
                        <div class="form-group row">
                            <label asp-for="Spesialisasi" class="col-sm-2 col-form-label">Spesialisasi</label>
                            <div class="col-sm-10">
                                <input asp-for="Spesialisasi" id="Spesialisasi" class="form-control" placeholder="Spesialisasi">
                                <span asp-validation-for="Spesialisasi" class="text-danger"></span>
                            </div>
                        </div>
                        <div class="form-group row">
                            <label asp-for="Keahlian" class="col-sm-2 col-form-label">Keahlian</label>
                            <div class="col-sm-10">
                                <textarea asp-for="Keahlian" id="Keahlian" class="form-control" rows="4" placeholder="Keahlian"></textarea>
                                <span asp-validation-for="Keahlian" class="text-danger"></span>
                            </div>
                        </div>
                        <div class="form-group row">
                            <label class="col-sm-2 col-form-label"></label>
                            <div class="col-sm-10">
                                <button type="submit" class="btn btn-success"> Save Data</button>
                            </div>
                        </div>
                </form>
            </div>
            <!-- /.card -->
            <div>
                <a asp-action="Index" class="btn btn-success"><i class="fa fa-arrow-back"> </i> Back to List </a>
            </div>
        </div>
    </section>

this the Index.cshtml 

@*
    For more information on enabling MVC for empty projects, visit https://go.microsoft.com/fwlink/?LinkID=397860
*@
@*@model AdminLTEMvc.Models.DokterModel*@
@{
    Layout = "~/Views/Shared/AdminLayout.cshtml";
}
@model System.Data.DataTable
<link href="~/plugins/fontawesome-free/css/all.css" rel="stylesheet" />
<!-- Main content -->
<section class="content">
    <div class="container-fluid">
        <div>
            <a asp-action="TambahData"><i class="fa fa-plus-square btn btn-success"> Tambah Data</i></a>
        </div>
    </div>
</section>

 

Posted one month ago

Hi trisetia302,

Check this example. Now please take its reference and correct your code.

Controller

public class HomeController : Controller
{
    public IActionResult Index()
    {
        return View();
    }

    [HttpGet]
    public IActionResult TambahData()
    {
        return View();
    }

    [HttpPost]
    public IActionResult TambahData(string dokterModel)
    {
        if (ModelState.IsValid)
        {
            TempData["pesan"] = "Data Berhasil disimpan...";
            return RedirectToAction("Index", "Home");
        }
        else
        {
            return View();
        }
    }
}

View

Index

@addTagHelper*, Microsoft.AspNetCore.Mvc.TagHelpers
@{
    Layout = null;
}

<!DOCTYPE html>

<html>
<head>
    <meta name="viewport" content="width=device-width" />
    <title>Index</title>
    <link media="screen" rel="stylesheet" href="https://cdn.jsdelivr.net/sweetalert2/6.3.8/sweetalert2.min.css" />
    <link media="screen" rel="stylesheet" href='https://cdn.jsdelivr.net/sweetalert2/6.3.8/sweetalert2.css' />
    <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/bluebird/3.3.5/bluebird.min.js"></script>
    <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
    <script type="text/javascript" src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" />
    <script type="text/javascript" src="https://cdn.jsdelivr.net/sweetalert2/6.3.8/sweetalert2.min.js"></script>
</head>
<body class="container">
    <form>
        <a asp-action="TambahData"><i class="fa fa-plus-square btn btn-success"> Tambah Data</i></a>
    </form>
    @if (TempData["pesan"] != null)
    {
        <script type="text/javascript">
            window.onload = function () {
                swal("Good job!", '@TempData["pesan"]', "success");
            };
        </script>
    }
</body>
</html>

TambahData

@addTagHelper*, Microsoft.AspNetCore.Mvc.TagHelpers
@{
    Layout = null;
}

<!DOCTYPE html>

<html>
<head>
    <meta name="viewport" content="width=device-width" />
    <title>TambahData</title>
</head>
<body class="container">
    <form method="post" asp-action="TambahData" asp-controller="Home">
        <input name="dokterModel" />
        <button type="submit" class="btn btn-success"> Save Data</button>
    </form>
</body>
</html>

Screenshot