The ASP.NET MVC Club: Alert

Showing posts with label Alert. Show all posts

Friday, January 24, 2020

How to show a Bootstrap Alert by clicking a button

In this tutorial we'll learn how to show a Bootstrap Alert by clicking a button .

https://github.com/CarmelSchvartzman/BOOTSTRAP/blob/master/ALERT/ALERT_BY_BUTTON

How to show a Bootstrap Alert by clicking a button

We create a new HTML webpage, as follows:

<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/js/bootstrap.min.js"></script>

</head>
<body>

<div class="container">
<div class='jumbotron'>
<h3>Open an Alert by clicking this button</h3>
<button class='btn btn-info btn-sm' data-target='#myalert' data-toggle='modal'>Alert</button>

<div class='modal' id='myalert'>
<div class='modal-dialog'>
<div class='alert alert-info alert-dismissible' > <<<<<<<<<<< DO NOT SET "FADE" !
<strong>This is an alert opened by a button</strong>
<button class='close' data-dismiss='modal'><span class='glyphicon glyphicon-cloud'></span></button>

</div>
</div>
</div>

</div>
</div>
</body>
</html>

Pay attention to the code marked bold . Tha't the important part.

That's all....

In this tutorial we've seen how to show a Bootstrap Alert by clicking a button
Happy programming.....
By Carmel Shvartzman

כתב: כרמל שוורצמן

Friday, January 10, 2020

Calling a JS Promise for display in a showable Bootstrap Alert

In this tutorial we'll learn how to call a JS Promise for display in a showable Bootstrap Alert .

Step by step how to call a JS Promise for display in a showable Bootstrap Alert

We create a new HTML webpage , using the CDN from JQUERY and Bootstrap (that is only for displaying an Alert), as follows:

<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/js/bootstrap.min.js"></script>

<script>
$(()=>{

///// the JS Promise :
const fnPromise = (msg)=>{

return new Promise((resolve,reject)=>{

   if(msg !== null && msg.length > 0) resolve('<strong> Success : </strong> ' + msg);
   else reject('Bad request');
});
}

$('button').on({'click':()=>{

fnPromise('This alert box indicates a successful calling to a Promise method.').then((ret)=>{
   $('#spanMsg').html(ret);
   }, (error)=>{$('#spanMsg').html(error); });
}});

});
</script>
</head>
<body>

<div class="container">
<h2>Showing Alerts with a click</h2>
<p>This is an showable Alert including the call to a JavaScript Promise</p>
<button class='btn btn-info' data-target='#a1' data-toggle='modal' >Open Alert</button>
<div class='modal' id='a1'>
<div class='modal-dialog'>
<div class="alert alert-warning alert-dismissible" >
<a href="#" class="close" data-dismiss="modal" aria-label="close"><span class='glyphicon glyphicon-check'></span></a>
<span id='spanMsg'></span>
</div>
</div>
</div>
</div>
</body>
</html>

That's all....

In this tutorial we've seen how to call a JS Promise for display in a showable Bootstrap Alert
Happy programming.....
By Carmel Shvartzman

כתב: כרמל שוורצמן

Wednesday, April 1, 2015

How To Add a Bootstrap Alert to an MVC View

In this post we describe Step by step How To Add a Bootstrap Alert to an MVC View, in 5 minutes. We will display in an MVC View, a message sent by a Controller , using the Bootstrap Alert component.
Essentially, all we need to do in order to add a Bootstrap Alert to an MVC View can be put this way:
1) Go to Bootstrap web site and copy the Alert HTML5 markup
2) Open the MVC View and paste the markup
3) Add an "if" condition to the View, to show the Alert

The Bootstrap Alert will show as follows:

How To Add a Bootstrap Alert to an MVC View

First, let's go to the Bootstrap Official web site:

Copy-paste the CDN urls containing the Bootstrap CSS3 and javascript, to your View(or _Layout):

We should use CDN (Content Delivery Network) because it is more efficient than including the javascript and CSS files in our application: CDN ensures quick delivery since it is spread on servers all around the world.
The Bootstrap scripts require JQuery to work, so browse to the JQuery official web site and get the latest version of the framework:

Again at the Boostrap web site, find the "Alert" Component, and Copy the HTML5 markup:

Now, for this example of using the Alert component from the Bootstrap, we have a Controller which sets a TempData item as follows:

We will display that message in a View using the Bootstrap Alert.
Open your MVC View and select an appropriate place for placing the Alert. Paste the Alert markup there:

Write some C# code to show (or not) the Alert :

In this case, if there is an TempData key containing a message, the Alert will be displayed:

The Bootstrap Alert can be closed or hidden by clicking the X icon :

Happy programming.....

by Carmel Schvartzman

כתב: כרמל שוורצמן

Sunday, July 27, 2014

Step by step how to add an Alert Component of the Twitter Bootstrap

In this tutorial we'll learn how to use the Alert Component of the Twitter Bootstrap, using the JavaScript Alert Plugin of the Twitter Bootstrap. The Twitter Bootstrap includes many components and widgets for you to import to your web page with a minimal effort and with proved responsiveness and well design, which can be displayed on a responsive grid system that scales up to 12 <div>s columns, and adapts itself to the mobile or tablet device when size decreases.
Bootstrap is the more widely used and more popular CSS3 open source framework for developing responsive web apps, making front-end web design very fast and easy.

We suppose here that you have already installed the Twitter Bootstrap in your MVC app. If you don't, learn in this tutorial how to install it in just 2 minutes

In just 5 minutes we'll build a responsive web page using the Alert Component of the Twitter Bootstrap :

The Twitter Bootstrap can be reached & downloaded from the Bootstrap official site : Bootstrap :

The Alert Widget can be set using the Default, Success, Info, Warning, or Danger class definitions.
Create an HTML web page or an MVC View, but make sure to load the CSS and the .js jQuery scripts in the page:

Now we'll keep COPYING-PASTING HTML markup from the Bootstrap official web site, to reuse it on our web page.

TWITTER BOOTSTRAP ALERT

Go to the Bootstrap and copy the Alert markup :

Then paste it inside your MVC View or your HTML page, but make the following changes:

1) Discard from the button the "dismiss" class;
2) Create a jQuery for closing and opening the Alert using .show() and .hide() jQuery methods:

<div id="alert" class="alert alert-info fade in" role="alert"> <button type="button" id="close-alert" class="close"> <span aria-hidden="true">×</span> <span class="sr-only">Close</span></button> <strong>This is an Info Alert</strong> There are also Default, Success, Warning and Danger Alert classes. </div>

Add the jQuery to open-close the Alert:

<script> $("#alert").hide();
$("#close-alert").click(function () { $("#alert").hide(); });
$("#open-alert").bind("click", function () { $("#alert").show(); });</script>

Save & refresh the web page :

Click the buttons to toggle the Alert:

Of course, the Alert is perfectly responsive Widget of the Bootstrap, adapting itself to portable devices and tablets:

That's all!! In this tutorial we've learned how to use the Alert Component of the Twitter Bootstrap as a Menu.

Happy programming.....

By Carmel Schvartzman

כתב: כרמל שוורצמן

The ASP.NET MVC Club

Friday, January 24, 2020

How to show a Bootstrap Alert by clicking a button

How to show a Bootstrap Alert by clicking a button

Friday, January 10, 2020

Calling a JS Promise for display in a showable Bootstrap Alert

Step by step how to call a JS Promise for display in a showable Bootstrap Alert

Wednesday, April 1, 2015

How To Add a Bootstrap Alert to an MVC View

How To Add a Bootstrap Alert to an MVC View

Sunday, July 27, 2014

Step by step how to add an Alert Component of the Twitter Bootstrap

TWITTER BOOTSTRAP ALERT

The MVC Club Mobile

Translate The MVC Club

Disclaimer