Bootstrap Modal PopUp Using ASP.NET MVC

Introduction

We can show and hide the modal using the methods provided by Bootstrap Modal plugin.

Description

We are using modal ('show') and modal ('hide') methods to show and hide the login modal.

Reference

Before this article you should go through my Introduction to Bootstrap. Show Bootstrap Image Using Asp.Net MVC http://www.c-sharpcorner.com/blogs/bootstrap-image-show-using-asp-net-mvc3

Steps

Create a controller class file called "HomeController.cs" and add controller action method called "ModalPopUp()";

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.Mvc;
namespace SatyaMVCBootstrapImages.Controllers
{
public class HomeController : Controller
{
//
// GET: /Home/
public ActionResult Index()
{
return View();
}
public ActionResult ModalPopUp()
{
return View();
}
}
}

Then create a view file named "ModalPopUp.cshtml".

@{
ViewBag.Title = "Satyaprakash Bootstrap PopUp";
}
<title>@ViewBag.Title</title>
<link href="bootstrap/css/bootstrap.min.css" rel="stylesheet">
<style>
.button {
background-color: #4CAF50; /* Green */
border: none;
color: white;
padding: 15px 32px;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 16px;
margin: 4px 2px;
cursor: pointer;
}
.button1 {
border-radius: 2px;
}
.button2 {
border-radius: 4px;
}
.button3 {
border-radius: 8px;
}
.button4 {
border-radius: 12px;
}
.button5 {
border-radius: 50%;
}
</style>
<div>
<h2 style="background-color: Yellow;color: Blue; text-align: center; font-style: oblique">Satyaprakash Bootstrap PopUp</h2>
<fieldset>
<legend style="color:orangered">Click On Satyaprakash Bootstrap PopUp</legend>
<div class="container">
<div class="row">
<div class="col-xs-12">
<button id="btnShowModal" type="button"
class="btn btn-sm btn-default pull-left col-lg-11 button button4">
Satya Modals
</button>
<div class="modal fade" tabindex="-1" id="loginModal"
data-keyboard="false" data-backdrop="static">
<div class="modal-dialog modal-lg">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">
×
</button>
<h4 class="modal-title">Satya Login</h4>
</div>
<div class="modal-body">
<form>
<div class="form-group">
<input class="form-control" type="text"
placeholder="Login Username" id="inputUserName" />
</div>
<div class="form-group">
<input class="form-control" placeholder="Login Password"
type="password" id="inputPassword" />
</div>
</form>
</div>
<div class="modal-footer">
<button type="submit" class="btn btn-primary button button4">Sign</button>
<button type="button" id="btnHideModal" class="btn btn-primary button button4">
Hide
</button>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</fieldset>
</div>
<footer>
<p style="background-color: Yellow; font-weight: bold; color:blue; text-align: center; font-style: oblique">
©
<script> document.write(new Date().toDateString()); </script>
</p>
</footer>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js">
</script>
<script src="bootstrap/js/bootstrap.min.js"></script>
<script type="text/javascript">
$(document).ready(function () {
$("#btnShowModal").click(function () {
$("#loginModal").modal('show');
});
$("#btnHideModal").click(function () {
$("#loginModal").modal('hide');
});
});
</script>

Here all reference files like bootstrap.min.css and jquery.min.js and bootstrap.min.js should be added to
add bootstrap features.

I have added code for a button to perform modal popup.

<button id="btnShowModal" type="button"
class="btn btn-sm btn-default pull-left col-lg-11 button button4">
Satya Modals
</button>

I have added code for the modal form to appear in a fade style.

<div class="modal fade" tabindex="-1" id="loginModal"
data-keyboard="false" data-backdrop="static">

Here is the code for size of the modal.

<div class="modal-dialog modal-lg">

Controls are added Inside Modal content such as header text , buttons, cross symbol button, text boxes and related control properties:

<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">
×
</button>
<h4 class="modal-title">Satya Login</h4>
</div>
<div class="modal-body">
<form>
<div class="form-group">
<input class="form-control" type="text"
placeholder="Login Username" id="inputUserName" />
</div>
<div class="form-group">
<input class="form-control" placeholder="Login Password"
type="password" id="inputPassword" />
</div>
</form>
</div>
<div class="modal-footer">
<button type="submit" class="btn btn-primary button button4">Sign</button>
<button type="button" id="btnHideModal" class="btn btn-primary button button4">
Hide
</button>
</div>
</div>

For cross symbol button in header part.

<button type="button" class="close" data-dismiss="modal">
×
</button>

For Header part.

<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">
×
</button>
<h4 class="modal-title">Satya Login</h4>
</div>

For textBoxes

<div class="modal-body">
<form>
<div class="form-group">
<input class="form-control" type="text"
placeholder="Login Username" id="inputUserName" />
</div>
<div class="form-group">
<input class="form-control" placeholder="Login Password"
type="password" id="inputPassword" />
</div>
</form>
</div>

For footer part.

<div class="modal-footer">
<button type="submit" class="btn btn-primary button button4">Sign</button>
<button type="button" id="btnHideModal" class="btn btn-primary button button4">
Hide
</button>
</div>

Here I added one javascript and added button id such as btnShowModal and btnHideModal to show and hide modal.

<script type="text/javascript">
$(document).ready(function () {
$("#btnShowModal").click(function () {
$("#loginModal").modal('show');
});
$("#btnHideModal").click(function () {
$("#loginModal").modal('hide');
});
});
</script>

Here I added css style to add style in buttons.

<style>
.button {
background-color: #4CAF50; /* Green */
border: none;
color: white;
padding: 15px 32px;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 16px;
margin: 4px 2px;
cursor: pointer;
}
.button1 {
border-radius: 2px;
}
.button2 {
border-radius: 4px;
}
.button3 {
border-radius: 8px;
}
.button4 {
border-radius: 12px;
}
.button5 {
border-radius: 50%;
}
</style>

OUTPUT

Desktop View

By clicking hide button Or Cross Mark on header it will be hidden.

Mobile View

SUMMARY

We learned:
What is Modal Popup in bootstrap?
How to get it with Asp.net MVc.

12 Comments

Join the conversation! Your thoughts help the community grow.

Ramandeep Singh6y ago
Hi, I am new in mvc. I have a question. What is role of Model in this popup page?
Jhunard Rivera6y ago
How about Editing Data from table sir ?
- Satyaprakash Samantaray6y ago
  Check my recent article based on crud using modal popup in mvc.
irene alvarez7y ago
Good man! thanks for the help!
saravanan N9y ago
Thanks for giving information
- Satyaprakash Samantaray8y ago
  Thanks......................
Prashant Kansal9y ago
awesome sir ..........
- Satyaprakash Samantaray9y ago
  Thanks....................................................
Manav Pandya9y ago
Nice share ........
- Satyaprakash Samantaray8y ago
  Thanks......................
Saravanakumar Sekaran9y ago
Really awesome awesome !!!!
- Satyaprakash Samantaray9y ago
  Thanks...............................