SweetAlert Popup

 SweetAlert Examples.

http://t4t5.github.io/sweetalert/

http://www.mitechdev.com/2016/04/sweet-alert-in-mvc5.html

 SweetAlert css and min files
 https://drive.google.com/open?id=0BxVxkP4yab6PYlFTbVl4dmNoU28

bundles.Add(new Bundle("~/bundles/sweetAlertCss")

      .Include("~/Content/bootstrap.min.css")

      .Include("~/Content/sweetalert/sweet-alert.css")

               );

bundles.Add(new ScriptBundle("~/bundles/sweetAlertJS")

               .Include("~/Content/sweetalert/sweet-alert.js")

               .Include("~/Scripts/jquery-{version}.js")

               );

 
eg.1  INDEX.cshtml

@*<script src="http://tristanedwards.me/u/SweetAlert//lib/sweet-alert.js"></script>

<link rel="stylesheet" type="text/css" href="http://tristanedwards.me/u/SweetAlert//lib/sweet-alert.css">*@

@Styles.Render("~/bundles/sweetAlertCss")

@Scripts.Render("~/bundles/sweetAlertJS")

<style type="text/css">

    .wrapper {

        height: 300px;

        width: 500px;

        margin-top: 150px;

        margin-left: 350px;

        text-align: center;

    }

</style>

<div class="wrapper panel panel-primary">

    <div class="panel-heading">Sweet Alert Demonstration</div>

    <div class="panel-body">

        <p>It makes sweet alerts!</p>

        <p>Default icons got a little goofy, but whatever....</p>

        <p>

            <button id="test-1" class="btn btn-info btn-lg">Basic</button>

            <button id="test-2" class="btn btn-success btn-lg">Success</button>

            <button id="test-3" class="btn btn-primary btn-lg">Fancy</button>

            <button id="test-4" class="btn btn-danger btn-lg">Error</button>

        <p><a class="btn btn-link" href="http://www.mitechdev.com" target="blank">http://www.mitechdev.com</a>

        <p>&nbsp;</p>

    </div>

</div>

<script type="text/javascript">

    document.querySelector('#test-1').onclick = function () {

        swal("Here's a message!");

    };

    document.querySelector('#test-2').onclick = function () {

        swal("Good job!", "You clicked the button!", "success")

    };

    document.querySelector('button#test-3').onclick = function () {

        swal({

            title: "Are you sure?",

            text: "Your will not be able to recover this imaginary file!",

            type: "warning",

            showCancelButton: true, confirmButtonColor: "#DD6B55", confirmButtonText: "Yes, delete it!"

        });

    };

    document.querySelector('button#test-4').onclick = function () {

        swal("Oops...", "Something went wrong!", "error");

    };

</script>

 


eg.2 SweetAlert.cshtml  

@{

    ViewBag.Title = "SweetAlert";

    Layout = null;

}

@Styles.Render("~/bundles/sweetAlertCss")

@Scripts.Render("~/bundles/sweetAlertJS")

<h2>SweetAlert</h2>

<div style="align-items:center">

    @Html.TextBox("Amount")

    <p>

        @Html.ActionLink("Enter Amount","SweetAlert",null, new { @id="btnAmount"})

    </p>

</div>

<script type="text/javascript">

    //document.querySelector('#btnAmount').onclick = function () {

    //    swal("Here's a message!");

    //};

    $(function () {

        $("#btnAmount").click(function (e) {

            e.preventDefault();

            console.log("amount is=" + $("#Amount").val());

            var postdata = { amt: $("#Amount").val() };

            $.post("/SweetMy/SweetAlert", postdata, function (data, textstatus, xqr) {

                console.log("type of data= " +  typeof(data))

                if ((data != null) && (data != "")) {

                    swal(data.msg, "success")

                }

                else {

                    swal("Not saved", data.msg, "error")

                }

            });

        });

    });

</script>

public ActionResult SweetAlert()

        {

            return View();

        }

  [HttpPost]

  public ActionResult SweetAlert(double? amt)

       {

         if (amt != null)

         {

          if (amt < 100)

            {

             return Json(new { msg = "Less than 100" }, JsonRequestBehavior.AllowGet);

            }

          else

            {

             return Json(new { msg = "Not Less than 100" }, JsonRequestBehavior.AllowGet);

            }

         }

        else 

         {

          return Json(new { msg = "Please enter the amount" }, JsonRequestBehavior.AllowGet);

         }

       }

Posted in: BootStrap,JQUERY,POP-UPs