Bootstrap Modal not working if offline link is used in ASP.Net

Last Reply on Dec 21, 2016 03:04 AM By jerryhien

Posted on Dec 21, 2016 02:43 AM

Hi Consultant,

I'm following this page and the code working ok (using bootstrap 3.3.2):

http://www.aspforums.net/Threads/135882/Solved-Bootstrap-Modal-Dialog-Popup-example-in-ASPNet/

But my project is using Bootstrap 3.3.7 and it not working

html:

 

<%@ Page Title="" Language="C#" AutoEventWireup="true" CodeFile="BootstrapModalDialogPopup.aspx.cs" Inherits="Test_BootstrapModalDialogPopup" %>

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Bootstrap 101 Template</title>
    

    <!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->    
    <script src="../Scripts/jquery-3.1.1.min.js" type="text/javascript"></script>
    <script src="layout/bootstrap3.3.7/js/bootstrap.js"></script>
    <link href="layout/bootstrap3.3.7/css/bootstrap.css" rel="stylesheet" />
    <%--<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css" rel="stylesheet" />    
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/js/bootstrap.min.js"></script>            --%>

</head>
<body>
    <form id="form1" runat="server">

    <asp:ScriptManager ID="ScriptManager1" runat="server">
    </asp:ScriptManager>
    <div class="container">
        <div class="row">
            <h1>
                Hello, world! Hello, world!</h1>            
            <button type="button" class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myModal">
                Launch demo modal
            </button>
            <asp:UpdatePanel ID="UpdatePanel1" runat="server">
                <ContentTemplate>
                    <!-- Modal -->
                    <asp:Label ID="Label1" runat="server" Text=""></asp:Label><br />
                    <div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel"
                        aria-hidden="true">
                        <div class="modal-dialog">
                            <div class="modal-content">
                                <div class="modal-header">
                                    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                                        <span aria-hidden="true">&times;</span></button>
                                    <h4 class="modal-title" id="myModalLabel">
                                        Modal title</h4>
                                </div>
                                <div class="modal-body">
                                    <asp:TextBox ID="TextBox1" runat="server" placeholder="First Name" class="form-control"></asp:TextBox><br />
                                    <asp:TextBox ID="TextBox2" runat="server" placeholder="Middle Name" class="form-control"></asp:TextBox><br />
                                    <asp:TextBox ID="TextBox3" runat="server" placeholder="Last Name" class="form-control"></asp:TextBox><br />
                                </div>
                                <div class="modal-footer">
                                    <button type="button" class="btn btn-default" data-dismiss="modal">
                                        Close</button>                                    
                                    <asp:Button Text="Save" OnClick="Submit" runat="server" />
                                </div>
                            </div>
                        </div>
                    </div>
                </ContentTemplate>
            </asp:UpdatePanel>
        </div>
    </div>   
    
    
</form>
</body>
</html>

.cs:

 

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;

public partial class Test_BootstrapModalDialogPopup : System.Web.UI.Page
{
    protected void Page_Load(object sender, EventArgs e)
    {

    }

    protected void Submit(object sender, EventArgs e)
    {
        string str = TextBox1.Text + TextBox2.Text + TextBox3.Text;
        int x = 0; 
    }
}

Thanks you very much for your read!

Posted on Dec 21, 2016 02:43 AM
Hi @jerryhien,
Please try the following

Validation Summary in jQuery Dialog Modal Popup Box not working with ASP.Net AJAX UpdatePanel

It might help you.

Cheers Andrea.

Posted on Dec 21, 2016 02:55 AM
Andrea says:
Hi @jerryhien,
Please try the following

Validation Summary in jQuery Dialog Modal Popup Box not working with ASP.Net AJAX UpdatePanel

It might help you.

Cheers Andrea.

 Thanks  for your answer! But it manual is the jQuery Dialog Modal not the Bootstrap Modal Dialog and i can use this jQuery for another purpose.


Posted on Dec 21, 2016 02:59 AM Modified on on Dec 21, 2016 03:01 AM
jerryhien says:
  <script src="../Scripts/jquery-3.1.1.min.js" type="text/javascript"></script>
    <script src="layout/bootstrap3.3.7/js/bootstrap.js"></script>
    <link href="layout/bootstrap3.3.7/css/bootstrap.css" rel="stylesheet" />
    <%--<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css" rel="stylesheet" />   
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/js/bootstrap.min.js"></script>        --%>
 

 replace above links with below

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script type="text/javascript" src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" />

 

 


Posted on Dec 21, 2016 03:04 AM
AnandM says: <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script> <script type="text/javascript" src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" />

Thanks you very much

I foud it, it's miss the character: '/' before the layout

it's working now.