Introduction
What Is Bootbox In Asp.net Mvc?
Bootbox.js is a small JavaScript library which allows you to create programmatic dialog boxes
Use Bootstrap modals for creating, managing or removing any of the required DOM elements or JS event handlers.
Bootbox.js is designed to make using Bootstrap modals easier.
Image Reference
File reference
I attached one zip file to get “bootbox.min.js”.
Description
Here I used the Place changed event handler of the Google Autocomplete TextBox to get the selected place, its address and its location coordinates i.e. Latitude and Longitude.
To know more details about Google map , Visit My Blogs and articles.
http://www.c-sharpcorner.com/members/satyaprakash-samantaray
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 PlaceCord()
- {
- return View();
- }
- }
- }
Code Description
Here I created a controller action method named “PlaceCord()”.
- public ActionResult PlaceCord()
- {
- 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 “PlaceCord.cshtml”.
Code Ref
- @{
- ViewBag.Title = "Satyaprakash Goolge Map Coordinate";
- }
-
- <title>@ViewBag.Title</title>
-
- <h2 style="background-color: Yellow;color: Blue; text-align: center; font-style: oblique">Satyaprakash's Goolge Map Place Coordinate Using MVC and BOOTSTRAP</h2>
- <meta charset="utf-8">
- <meta name="viewport" content="width=device-width, initial-scale=1">
- <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="bootbox.min.js"></script>
-
-
- <style>
- input[type=text], select {
- width: 80%;
- padding: 12px 20px;
- margin: 10px 0;
- display: inline-block;
- border: 1px solid #ccc;
- border-radius: 4px;
- box-sizing: border-box;
-
- }
- </style>
-
- <script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCkVZYQFe4YYva_g5ulymGDt9EBoVjjZJ8&libraries=places">
- </script>
-
- <script type="text/javascript">
- google.maps.event.addDomListener(window, 'load', function () {
- var places = new google.maps.places.Autocomplete(document.getElementById('txtLoc'));
- google.maps.event.addListener(places, 'place_changed', function () {
- var place = places.getPlace();
- var address = place.formatted_address;
- var latitude = place.geometry.location.lat();
- var longitude = place.geometry.location.lng();
- var mesg = "Location Address Is : " + address;
- mesg += "\nLocation Latitude Is : " + latitude;
- mesg += "\nLocation Longitude Is: " + longitude;
-
- bootbox.alert(mesg);
- });
- });
-
- </script>
-
- <input type="text" id="txtLoc" placeholder="Mention location...." />
-
-
- <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
The HTML Markup consists of an HTML TextBox using which the Google Places Autocomplete will be implemented.
The very first thing is to inherit the Google Maps API script along with the places library. Then inside the Google Maps window load event handler, the Google Places Autocomplete is applied to the TextBox and then the place_changed event handler is assigned to it.
The place_changed event handler is triggered when a place is selected in the Google Places Autocomplete TextBox. It first gets the selected place and then determines its address and its location coordinates i.e. Latitude and Longitude and then displays the details in BootBox alert message box.
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>
-
- <script src="bootbox.min.js"></script>
To show BootBox alert popup added this file path as described earlier.
- <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
Added this cascading style sheet to give stylish look and bootstrap support to Place AutoComplete TextBox.
- <style>
- input[type=text], select {
- width: 80%;
- padding: 12px 20px;
- margin: 10px 0;
- display: inline-block;
- border: 1px solid #ccc;
- border-radius: 4px;
- box-sizing: border-box;
-
- }
- </style>
Then I added my Google Api Key.
- <script src="https://maps.googleapis.com/maps/api/js?key=Put_Your_Api_key&libraries=places">
- </script>
Then I added a javascript code to show the place details with coordinates Using BootBox Alert PopUp.
- <script type="text/javascript">
- google.maps.event.addDomListener(window, 'load', function () {
- var places = new google.maps.places.Autocomplete(document.getElementById('txtLoc'));
- google.maps.event.addListener(places, 'place_changed', function () {
- var place = places.getPlace();
- var address = place.formatted_address;
- var latitude = place.geometry.location.lat();
- var longitude = place.geometry.location.lng();
- var mesg = "Location Address Is : " + address;
- mesg += "\nLocation Latitude Is : " + latitude;
- mesg += "\nLocation Longitude Is: " + longitude;
-
- bootbox.alert(mesg);
- });
- });
-
- </script>
Add place details and coordinates and show using BootBox.
- var place = places.getPlace();
- var address = place.formatted_address;
- var latitude = place.geometry.location.lat();
- var longitude = place.geometry.location.lng();
- var mesg = "Location Address Is : " + address;
- mesg += "\nLocation Latitude Is : " + latitude;
- mesg += "\nLocation Longitude Is: " + longitude;
-
- bootbox.alert(mesg);
Difference Between Normal javascript and BootBox Javascript Alert PopUp.
- alert(mesg);
- bootbox.alert(mesg);
Then I added a text box control and used its id to show autocomplete places using google map api key.
- google.maps.places.Autocomplete(document.getElementById('txtLoc'));
- <input type="text" id="txtLoc" placeholder="Mention location...." />
Then I added footer to show current Date&Time.
- <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>
Step5To Set Start Page,
Code Ref
- routes.MapRoute(
- name: "Default",
- url: "{controller}/{action}/{id}",
- defaults: new { controller = "Home", action = "PlaceCord", id = UrlParameter.Optional }
- );
Code DescriptionHere the controller name is “Home”.
Here name of the view is “PlaceCord”.
OUTPUT
URL IS - http://localhost:57237/Home/PlaceCord
Dektop View
AutoComplete Places is shown ….
The Place details with coordinates is shown using BootBox Alert PopUp.
Mobile View
Difference Between Normal javascript and BootBox Javascript Alert PopUp.
Normal javascript
BootBox Javascript Alert PopUp
BootBox Is the most eye catching PopUp.
Gif Images for better understanding….
Summary
- What is BootBox.
- How to implement in Mvc.
- Difference Between Normal javascript and BootBox Javascript Alert PopUp.
- Get bootbox reference CDN link.