Sweet Alert in MVC5 ~ MiTechDev.com

Monday, 25 April 2016

Sweet Alert in MVC5

22:53:00 Posted by raviteja swayampu , 1 comment
sweet alert in mvc
Sweet Alert:
Sweet alert is a beautiful replacement for java script alert message box.It adds styles to the alert messages make alert look great.And also we can customize the alert with custom icons and custom styles etc.It is more user friendly and user experience very good.All this can be achieved by less code.
The following is normal java script alert in browser.

it looks normal to us.But sweet alert look like below with customizable styles.


That's why we in many of the websites to drag the user attention many of developers use this sweet alert.Now i am going to teach you how to integrate this sweet alert in out MVC application.

Sweet Alert in MVC 5

As like previous i going to explain this in step by step manner.
Step 1:

Create MVC application

1.Open Visual studio.
2.Goto File Menu-->New-->Project-->Select ASP.NET Webproject.
3.Give name as SweetAlertExample and click ok button.

creating-new-project-in-mvc5

4.In after clicking on Ok button another project wizard will opened like below.Select Empty template and check the MVC checkbox to add the default folders for MVC application.And click ok to add those to project.


Step 2:

Create a Controller


1.Right click Controllers folder-->Add-->Controller and name it as HomeController.cs

2.Right click on Index Action method and add Index View and click on Add.


Step 3:

Installing Sweet Alert in MVC

We can install sweet alert in mvc application in two ways
    Using package manager console:
    Goto Menubar-->Tools-->Nuget Package Manager-->Package Manager Console.And use                     following command to install Sweet alert.
     Install-Package SweetAlert
      folder structure look like below
 
    By downlading and adding folder to the project:
    You can directly add folders to the solution by downlaoding from following link.

Note : Add Bootstrap to project using either nuget package manager or using CDN.
Step 4:
Replace Index view code with below code.
@{
    ViewBag.Title = "Sweet Alert Example";
}
<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">
<link href="~/Content/Bootstrap.min.css" rel="stylesheet" />
 <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>
Step 5: 
Add following Script to Index page
 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");
    };

1.Also add styles in index page

.wrapper {
        height: 300px;
        width: 500px;
        margin-top: 150px;
        margin-left: 350px;
        text-align:center;
    }

Finally run the application Press F5.


A sample Success alert will come like this...


Download source code from here Download.

Conclusion:
I hope this article is understandable for every reader.If you recommend any modifications please let me know to improve the user readability.


1 comment: