Introduction To BootBox JavaScript Library In ASP.NET MVC

Introduction

What Is Bootbox In Asp.net Mvc?

Bootbox.js is a small JavaScript library which allows you to create programmatic dialog boxes, using Bootstrap modals, creating, managing or removing any of the required DOM elements or JS event handlers.

Bootbox.js is designed to make using Bootstrap modals easier.

Description

Note the order of the script references

Since Bootbox is a wrapper around Bootstrap's modal functionality, you need to include the libraries in order:

1. jQuery
2. Bootstrap
3. Bootbox

For getting Bootbox script file reference Visit My Article

http://www.c-sharpcorner.com/article/google-map-location-coordinates-using-bootbox-in-asp-net-mvc/

Steps To Be Followed

Step1

Create a Mvc 5 application named “SatyaGoogleMapBootstrapMVC”.

Step2

Create a controller class file named “HomeController.cs”.

Code Ref

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.Mvc;

namespace SatyaGoogleMapBootstrapMVC.Controllers
{
    public class HomeController : Controller
    {
        public ActionResult BootBox()
        {
            return View();
        }
    }
}

Code Description

Here I created a controller action method named “BootBox()”.

public ActionResult BootBox()
        {
            return View();
        }

 

Step3

Add a Bootbox Javascript library of version v4.4.0. Named “bootbox.min.js”. This file I added to show alert pop up instead of traditional javascript alert box.

Also it is bootstrap supporting and multiplatform view support.

Step4

Create a view named “BootBox.cshtml”.

Code Ref

@{
    ViewBag.Title = "Satyaprakash BootBox Intro";
}

<title>@ViewBag.Title</title>

<h2 style="background-color: Yellow;color: Blue; text-align: center; font-style: oblique">Satyaprakash's BootBox Intro Using MVC and BOOTSTRAP</h2>

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>


<script src="https://cdnjs.cloudflare.com/ajax/libs/bootbox.js/4.4.0/bootbox.min.js">
</script>

<script>
    bootbox.prompt({
        title: "This is a prompt with a textarea!",
        inputType: 'textarea',
        callback: function (result) {
            bootbox.alert(result);
        }
    });
</script>

<footer>
    <p style="background-color: Yellow; font-weight: bold; color:blue; text-align: center; font-style: oblique">© @DateTime.Now.ToLocalTime()</p> @*Add Date Time*@
</footer>

Code Description

To support bootstrap related support added below links.

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

To show BootBox alert popup added this file path as described earlier.

<script src="https://cdnjs.cloudflare.com/ajax/libs/bootbox.js/4.4.0/bootbox.min.js">
</script>

 OR/

<script src="bootbox.min.js"></script>

Instead of that I can use also below CDN link Wrappers for JavaScript alert(), confirm() and other flexible dialogs using the Bootstrap framework. CDN for web related libraries to speed up your websites!

• https://cdnjs.cloudflare.com/ajax/libs/bootbox.js/4.4.0/bootbox.min.js
• https://cdnjs.cloudflare.com/ajax/libs/bootbox.js/4.4.0/bootbox.js 

I added bootbox related script to prompt a text area and user what ever data will put that will show using bootbox alert.

<script>
    bootbox.prompt({
        title: "This is a prompt with a textarea!",
        inputType: 'textarea',
        callback: function (result) {
            bootbox.alert(result);
        }
    });
</script>

 For prompt

bootbox.prompt

For Alert

bootbox.alert

For Text Area

title: "This is a prompt with a textarea!",
inputType: 'textarea',

I use callback function to get the result from text area.

A callback handles the user's selection. The callback function is passed a value of true or false, depending on which button the user pressed. Any code that depends on the user's selection must be placed in the callback function.

Prompt

A dialog prompts for user input. Pressing the ESC key or clicking close dismisses the dialog and invokes the callback as if the user had clicked the cancel button.

Prompt dialogs require a callback function.

A dialog prompts for user input. Pressing the ESC key or clicking close dismisses the dialog and invokes the callback as if the user had clicked the cancel button.

Prompt dialogs require a callback function.

All Bootstrap modals, unlike native alerts, confirms, or prompts, generate non-blocking events. Keep that in mind when using the prompt() dialog, as it is not a drop-in replacement for native prompt dialogs. Any code that depends on the user's input must be placed in the callback function.

Prompt requires the title option (when using the options object) and disallows the message option.

Prompt Dialog Options

Prompt dialogs are (by default) single-line text inputs. You can modify the type of prompt Bootbox generates using the prompt-only options below.

• Name - value , Description : You can set the initial value of the prompt using the value option.
• Name - inputType , Description : Changes the type of input generated for the prompt dialog. Valid values for inputType are: text (default), textarea, email, select, checkbox, date, time, number, and password.
• Name - inputOptions , Description : If you specify select or checkbox as the input type, you must also supply an array of valid values in the format of : {text: '', value: '', group: '' }

group is an optional property for populating the <select>; if specified, <optgroup> elements will be generated for each group value found in the inputOptions array.

Example 1

bootbox.confirm({
        message: "This is a confirm with custom button text and color! Do you like it?",
        buttons: {
            confirm: {
                label: 'Yes',
                className: 'btn-success'
            },
            cancel: {
                label: 'No',
                className: 'btn-danger'
            }
        },
        callback: function (result) {
            bootbox.alert('This was logged in the callback: ' + result);
        }
    });

URL IS - http://localhost:57237/Home/BootBox

 

OUTPUT 1

This Will Show you Yes /No Button and after click It will show you True / False.

Desktop View

 

 

 

 

 

Mobile View

Example 2

bootbox.prompt({
        title: "This is a prompt with a password input!",
        inputType: 'password',
        callback: function (result) {
            bootbox.alert(result);
        }
    });

OUTPUT 2

This will show you a password textbox.

 

Example 3

var dialog = bootbox.dialog({
        title: 'A custom dialog with init',
        message: '<p><i class="fa fa-spin fa-spinner"></i> Loading...</p>'
    });
    dialog.init(function () {
        setTimeout(function () {
            dialog.find('.bootbox-body').html('I was loaded after the dialog was shown!');
        }, 3000);
    });

OUTPUT 3

This will show you the dialog with loading and after a certain time span it will show you text.

 

 

 

Example 4

bootbox.alert({
        message: "This is the small alert!",
        size: 'small'
    });

OUTPUT 4

This will show you small alert box.

 

Example 5

bootbox.confirm({
      title: "Destroy planet?",
      message: "Do you want to activate the Deathstar now? This cannot be undone.",
      buttons: {
          cancel: {
              label: '<i class="fa fa-times"></i> Cancel'
          },
          confirm: {
              label: '<i class="fa fa-check"></i> Confirm'
          }
      },
      callback: function (result) {
          bootbox.alert('This was logged in the callback: ' + result);
      }
  });

OUTPUT 5

This will show you confirm dialog box and it will show true / false after click on buttons.

 

Example 6

bootbox.prompt({
        title: "This is a prompt with a set of checkbox inputs!",
        inputType: 'checkbox',
        inputOptions: [
            {
                text: 'Choice One',
                value: '1',
            },
            {
                text: 'Choice Two',
                value: '2',
            },
            {
                text: 'Choice Three',
                value: '3',
            }
        ],
        callback: function (result) {
            bootbox.alert(result);
        }
    });

OUTPUT 6

It will show you checkboxes inside Bootbox prompt.

 

Example 7

bootbox.prompt({
        title: "This is a prompt with a number input!",
        inputType: 'number',
        callback: function (result) {
            bootbox.alert(result);
        }
    });

OUTPUT 7

It will show you input-only support for numbers. After putting a number then click button it will show the input number by user.

 

Example 8

bootbox.alert({
        size: "small",
        title: "My Name",
        message: "Satyaprakash Samantaray",
        callback: function (result) { bootbox.alert(result); }
    });

OUTPUT 8

It will show you the message with title.

 

Example 9

bootbox.alert("My Nick Name Is : <b style='color:red'>KULU</b>")

OUTPUT 9

This will show with customized alert text.

 

Example 10

bootbox.dialog({ message: '<div class="text-center"><i class="fa fa-refresh fa-spin" style="color:green;"></i> Loading...</div>' })

OUTPUT 10

It will show loading with dialog.

 

Gif For Better Idea

Code Ref

bootbox.prompt({
      title: "Write Your Name",
      placeholder:"Type Here....",
      inputType: 'text',
      callback: function (result) {
          bootbox.alert(result);
      }
  });

 

 

 

Summary

1. What is BootBox?
2. How to implement in Mvc.
3. Compare Normal javascript and BootBox Javascript Alert PopUp.
4. Get bootbox reference CDN link.