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!

You are viewing reply posted by: jerryhien on Dec 21, 2016 03:04 AM.
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.