Bootstrap Modal不起作用。（Asp.net，C＃）

Question

I try to make simple example from this site: http://www.programming-free.com/2013/02/gridviewrow-details-modalpopup-bootstrap.html (I deleted some fields..only want to see if that's work.) When I run that and click on 'Detail'I get only black background like that: http://oi40.tinypic.com/24qlgkg.jpg 我尝试从此站点制作一个简单示例： http : //www.programming-free.com/2013/02/gridviewrow-details-modalpopup-bootstrap.html （我删除了一些字段。.只想看看是否可行。当我运行并单击'Detail'时，我只得到这样的黑色背景： http ：//oi40.tinypic.com/24qlgkg.jpg

here is my asp code: 这是我的asp代码：

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="WebForm1.aspx.cs" Inherits="Shemen.WebForm1" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
<head id="Head1" runat="server">
    <title>Modal Popup using Bootstrap</title>
    <link href="css/bootstrap.css" rel="stylesheet" type="text/css" />
    <script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
    <script src="js/bootstrap.js" type="text/javascript"></script>

</head>
<body>
    <form id="form1" runat="server">
    <div>
    <asp:ScriptManager ID="ScriptManager1" runat="server" />
    <asp:UpdatePanel ID="UpdatePanel1" runat="server">
        <ContentTemplate>
            <div>
            <h2 style="text-align:center;">
                   Display GridView Row Details in Modal Dialog using Twitter Bootstrap</h2>
            <p style="text-align:center;">
                   Demo by Priya Darshini - Tutorial @ <a href="">Programmingfree</a>
            </p>                     
               <asp:GridView ID="GridView1" runat="server" 
                        Width="940px"  HorizontalAlign="Center"
                        OnRowCommand="GridView1_RowCommand" 
                        AutoGenerateColumns="false"   AllowPaging="false"
                        DataKeyNames="RequestNum" 
                        CssClass="table table-hover table-striped">
                <Columns>
                   <asp:ButtonField CommandName="detail" 
                         ControlStyle-CssClass="btn btn-info" ButtonType="Button" 
                         Text="Detail" HeaderText="Detailed View"/>
            <asp:BoundField DataField="RequestNum" HeaderText="RequestNum" />
               </Columns>
               </asp:GridView>
            </div>
        </ContentTemplate>
    </asp:UpdatePanel>
    <asp:UpdateProgress ID="UpdateProgress1" runat="server">
        <ProgressTemplate>


        <img src="" alt="Loading.. Please wait!"/>
        </ProgressTemplate>
    </asp:UpdateProgress>
    <div id="currentdetail" class="modal hide fade" 
               tabindex=-1 role="dialog" aria-labelledby="myModalLabel" 
               aria-hidden="true">
        <div class="modal-header">
            <button type="button" class="close" data-dismiss="modal" 
                  aria-hidden="true">×</button>
            <h3 id="myModalLabel">Detailed View</h3>
       </div>
   <div class="modal-body">
        <asp:UpdatePanel ID="UpdatePanel2" runat="server">
            <ContentTemplate>
                    <asp:DetailsView ID="DetailsView1" runat="server" 
                              CssClass="table table-bordered table-hover" 
                               BackColor="White" ForeColor="Black"
                               FieldHeaderStyle-Wrap="false" 
                               FieldHeaderStyle-Font-Bold="true"  
                               FieldHeaderStyle-BackColor="LavenderBlush" 
                               FieldHeaderStyle-ForeColor="Black"
                               BorderStyle="Groove" AutoGenerateRows="False">
                        <Fields>
                 <asp:BoundField DataField="RequestNum" HeaderText="RequestNum" />

                       </Fields>
                  </asp:DetailsView>
           </ContentTemplate>
           <Triggers>
               <asp:AsyncPostBackTrigger ControlID="GridView1"  EventName="RowCommand" />  
           </Triggers>
           </asp:UpdatePanel>
                <div class="modal-footer">
                    <button class="btn btn-info" data-dismiss="modal" 
                            aria-hidden="true">Close</button>
                </div>
            </div>
    </div>
    </div>
    </form>
</body>
</html>

and this is the C# code: 这是C＃代码：

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

namespace Shemen
{


    public partial class WebForm1 : System.Web.UI.Page
    {


        ShemenDataContext sdb = SQLConnection.GetDataContextInstance();

        public List<Request> list;

        protected void Page_Load(object sender, EventArgs e)
        {
            sdb = SQLConnection.GetDataContextInstance();

            list = sdb.Requests.ToList();
            GridView1.DataSource = list;
            GridView1.DataBind();
        }





        protected void GridView1_RowCommand(object sender, GridViewCommandEventArgs e)
        {
            if (e.CommandName.Equals("detail"))
            {

                Request r = sdb.Requests.First();
                var list1 = new List<Request> { r };
                DetailsView1.DataSource = list1;
                DetailsView1.DataBind();
                System.Text.StringBuilder sb = new System.Text.StringBuilder();
                sb.Append(@"<script type='text/javascript'>");
                sb.Append("$('#currentdetail').modal('show');");
                sb.Append(@"</script>");
                ScriptManager.RegisterClientScriptBlock(this, this.GetType(),
                           "detailModal", sb.ToString(), false);

            }
        }
    }


}

what is wrong? 怎么了？ Thanks! 谢谢！

Answer 1

I followed the same tutorial and had the same problem. 我遵循了相同的教程，并且遇到了相同的问题。 The problem for me turned out to be a css issue. 对我来说，问题是一个CSS问题。

your original modal: 您原来的模态：

<div id="currentdetail" class="modal hide fade"
    tabindex=-1 role="dialog" aria-labelledby="myModalLabel"
    aria-hidden="true">
    <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal"
            aria-hidden="true">×</button>
        <h3 id="myModalLabel">Detailed View</h3>
    </div>
    <div class="modal-body">
        <asp:UpdatePanel ID="UpdatePanel2" runat="server">
        <ContentTemplate>
        <asp:DetailsView ID="DetailsView1" runat="server"
            CssClass="table table-bordered table-hover"
            BackColor="White" ForeColor="Black"
            FieldHeaderStyle-Wrap="false"
            FieldHeaderStyle-Font-Bold="true"
            FieldHeaderStyle-BackColor="LavenderBlush"
            FieldHeaderStyle-ForeColor="Black"
            BorderStyle="Groove" AutoGenerateRows="False">
            <Fields>
                <asp:BoundField DataField="RequestNum" HeaderText="RequestNum" />
            </Fields>
        </asp:DetailsView>
        </ContentTemplate>
        <Triggers>
            <asp:AsyncPostBackTrigger ControlID="GridView1"  EventName="RowCommand" />
        </Triggers>
        </asp:UpdatePanel>
        <div class="modal-footer">
            <button class="btn btn-info" data-dismiss="modal"
            aria-hidden="true">Close</button>
        </div>
    </div>
</div>

first remove the "hide" from class="modal hide fade" in the first line. 首先从第一行的class =“ modal hide fade”中删除“ hide”。 Then wrap the modal-header,modal-body, and modal-footer in a div with the class="modal-dialog modal-content" 然后将modal-header，modal-body和modal-footer封装在div中，并带有class =“ modal-dialog modal-content”

This fixed the modal dialog not showing for me. 这修复了不显示给我的模式对话框。 Here is what I think your modal should be: 我认为您的模态应为：

<div id="currentdetail" class="modal fade"
    tabindex=-1 role="dialog" aria-labelledby="myModalLabel"
    aria-hidden="true">
    <div class="modal-dialog modal-content modal-sm">
        <div class="modal-header">
            <button type="button" class="close" data-dismiss="modal"
            aria-hidden="true">×</button>
            <h3 id="myModalLabel">Detailed View</h3>
        </div>
        <div class="modal-body">
            <asp:UpdatePanel ID="UpdatePanel2" runat="server">
                <ContentTemplate>
                    <asp:DetailsView ID="DetailsView1" runat="server"
                    CssClass="table table-bordered table-hover"
                    BackColor="White" ForeColor="Black"
                    FieldHeaderStyle-Wrap="false"
                    FieldHeaderStyle-Font-Bold="true"
                    FieldHeaderStyle-BackColor="LavenderBlush"
                    FieldHeaderStyle-ForeColor="Black"
                    BorderStyle="Groove" AutoGenerateRows="False">
                    <Fields>
                        <asp:BoundField DataField="RequestNum" HeaderText="RequestNum"/>
                    </Fields>
                    </asp:DetailsView>
                </ContentTemplate>
                <Triggers>
                    <asp:AsyncPostBackTrigger ControlID="GridView1" EventName="RowCommand" />
                </Triggers>
            </asp:UpdatePanel>            
        </div>
        <div class="modal-footer">
            <button class="btn btn-info" data-dismiss="modal"
            aria-hidden="true">Close</button>
        </div>
    </div>
</div>

Answer 2

引导模态实际上在form标记内不起作用，您必须将modal放在form标记外，您必须以某种方式进行管理。

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

Answer 3

有关详细的示例：（使用ASP.Net中的BootStrap的可编辑网格视图系统） http://www.mindstick.com/Articles/0f1b65c3-b0f6-4a93-b4b5-56c278d855c2/?Editable%20Grid%20View%20System%20us

Bootstrap Modal不起作用。（Asp.net，C＃）

问题描述

3 个解决方案

解决方案1
5 2014-03-21 16:19:47

解决方案2
2 2014-03-14 06:09:41

解决方案3
0 2014-02-24 12:04:42

Bootstrap Modal不起作用。（Asp.net，C＃）

问题描述

3 个解决方案

解决方案1 5 2014-03-21 16:19:47

解决方案2 2 2014-03-14 06:09:41

解决方案3 0 2014-02-24 12:04:42

解决方案1
5 2014-03-21 16:19:47

解决方案2
2 2014-03-14 06:09:41

解决方案3
0 2014-02-24 12:04:42