引导模式不工作。（Asp.net，C#）_C#_Javascript_Html_Asp.net_Twitter Bootstrap

引导模式不工作。（Asp.net，C#）

c# javascript html asp.net twitter-bootstrap

引导模式不工作。（Asp.net，C#）,c#,javascript,html,asp.net,twitter-bootstrap,C#,Javascript,Html,Asp.net,Twitter Bootstrap,我试着从这个网站上举一个简单的例子：（我删除了一些字段..只想看看这是否有效。）当我运行该程序并单击“详细信息”时，我只会看到这样的黑色背景：以下是我的asp代码： <%@ Page Language="C#" AutoEventWireup="true" CodeBehind="WebForm1.aspx.cs" Inherits="Shemen.WebForm1" %> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Tr

我试着从这个网站上举一个简单的例子：（我删除了一些字段..只想看看这是否有效。）当我运行该程序并单击“详细信息”时，我只会看到这样的黑色背景：

以下是我的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>


使用引导的模式弹出窗口

×
详细视图
接近

这是C代码：

使用系统；
使用System.Collections.Generic；
使用System.Linq；
使用System.Web；
使用System.Web.UI；
使用System.Web.UI.WebControl；
石门
{
公共部分类WebForm1:System.Web.UI.Page
{
ShemenDataContext sdb=SQLConnection.GetDataContextInstance（）；
公开名单；
受保护的无效页面加载（对象发送方、事件参数e）
{
sdb=SQLConnection.GetDataContextInstance（）；
list=sdb.Requests.ToList（）；
GridView1.DataSource=列表；
GridView1.DataBind（）；
}
受保护的void GridView1_row命令（对象发送方，GridViewCommandEventArgs e）
{
如果（例如CommandName.Equals（“详细信息”））
{
Request r=sdb.Requests.First（）；
var list1=新列表{r}；
DetailsView1.DataSource=list1；
DetailsView1.DataBind（）；
System.Text.StringBuilder sb=新的System.Text.StringBuilder（）；
某人加上（@“）；
sb.附加（$（'#currentdetail'）.modal（'show'）；）；
某人加上（@“）；
ScriptManager.RegisterClientScriptBlock（this，this.GetType（），
“detailModal”，sb.ToString（），false）；
}
}
}
}

怎么了？谢谢

详细示例：（在ASP.Net中使用引导的可编辑网格视图系统）

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

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

我遵循相同的教程，遇到了相同的问题。我的问题原来是css问题

您的原始模态：

<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>


×
详细视图
接近

首先从第一行的class=“modal hide fade”中删除“hide”。然后使用class=“模态对话框模态内容”将模态页眉、模态正文和模态页脚包装在一个div中

这修复了没有为我显示的模式对话框。以下是我认为您的模式应该是：

<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>


×
详细视图
接近

sdb变量包含数据库。请将链接的重要部分添加为答案的一部分。

<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>