1. ASP/ASP.NET
  2. How to Add Bootstrap Modal View in Asp.Net Webform Tutorial

How to Add Bootstrap Modal View in Asp.Net Webform Tutorial

Submitted by Abdul Wahab on Saturday, December 11, 2021 - 10:07.
Language
ASP

This is a short tutorial of how to create/add a simple Bootstrap Modal View into an ASP.Net project. The tutorial can help you to know what are the requirements and how it is being done. This will also helps you to understand how to add/convert the modal view into asp.net project.

Here, I will show the code that present a modal button which fires/open the modal when clicked. In the same page the modal interface scripts are also included.

Index/Main Page

The following script is the code for the main script which is the main interface of the simple project that contains the Interface Script and Modal Interface Script. It also includes the script that loads the Bootstrap library and other links.

  1. <%@ Page Language="C#" AutoEventWireup="true" CodeBehind="ModalView.aspx.cs" Inherits="Crud_Operation.ModalView" %>
  2.  
  3. <!DOCTYPE html>
  4.  
  5. <html xmlns="http://www.w3.org/1999/xhtml">
  6. <head runat="server">
  7.     <title></title>
  8.     <link rel="stylesheet" type="text/css" href="modal.css">
  9.     <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.2/css/bootstrap.min.css">
  10.     <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.3.1/css/all.css">
  11.     <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js" integrity="sha512-894YE6QWD5I59HgZOGReFYm4dnWc1Qt5NtvYSaNcOP+u1T9qYdvdihz0PPSiiqn/+/3e7Jo4EaG7TubfWGUrMQ==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
  12.     <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js"></script>
  13.     <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js"></script>
  14. </head>
  16.     <form id="form1" runat="server">
  17.  
  18.         <div class="container">
  19.         <button type="button" class="btn btn-danger" data-toggle="modal" data-target="#form">
  20.             See Modal with Form
  21.         </button>
  22.     </div>
  23.         <div class="modal fade" id="form" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true" style="display: none;">
  24.         <div class="modal-dialog modal-dialog-centered" role="document">
  25.             <div class="modal-content">
  26.                 <div class="modal-header border-bottom-0">
  27.                     <h5 class="modal-title" id="exampleModalLabel">Create Account</h5>
  28.                     <button type="button" class="close" data-dismiss="modal" aria-label="Close">
  29.                         <span aria-hidden="true">×</span>
  30.                     </button>
  31.                 </div>
  32.                 <form>
  33.                     <div class="modal-body">
  34.                         <div class="form-group">
  35.                             <label for="email1">Email address</label>
  36.                             <input type="email" class="form-control" id="email1" aria-describedby="emailHelp" placeholder="Enter email">
  37.                             <small id="emailHelp" class="form-text text-muted">Your information is safe with us.</small>
  38.                         </div>
  39.                         <div class="form-group">
  40.                             <label for="password1">Password</label>
  41.                             <input type="password" class="form-control" id="password1" placeholder="Password">
  42.                         </div>
  43.                         <div class="form-group">
  44.                             <label for="password1">Confirm Password</label>
  45.                             <input type="password" class="form-control" id="password2" placeholder="Confirm Password">
  46.                         </div>
  47.                     </div>
  48.                     <div class="modal-footer border-top-0 d-flex justify-content-center">
  49.                         <button type="submit" class="btn btn-success">Submit</button>
  50.                     </div>
  51.                 </form>
  52.             </div>
  53.         </div>
  54.     </div>
  55.  
  56.         <div>
  57.         </div>
  58.     </form>
  59. </body>
  60. </html>

DEMO VIDEO

Video Link for this tutorial:

I hope this tutorial will help you with what you are looking for. Next post I will add the project for complete crud operation, and we will add data into the database using the same modal view.

Happy Coding!!

Note: Due to the size or complexity of this submission, the author has submitted it as a .zip file to shorten your download time. After downloading it, you will need a program like Winzip to decompress it.

Virus note: All files are scanned once-a-day by SourceCodester.com for viruses, but new viruses come out every day, so no prevention program can catch 100% of them.

FOR YOUR OWN SAFETY, PLEASE:

1. Re-scan downloaded files using your personal virus checker before using it.
2. NEVER, EVER run compiled files (.exe's, .ocx's, .dll's etc.)--only run source code.

Tags
Modal Forms in C#
Bootstrap
asp.net
ASP.NET Tutorial for Beginners
Modal View in ASP.NET

Add new comment

About text formats
  • 4442 views