引导模式不起作用。（Asp.net，C#）
Posted
技术标签:
【中文标题】引导模式不起作用。（Asp.net，C#）【英文标题】：Bootstrap Modal not working.(Asp.net, C#) 【发布时间】：2014-02-05 16:05:12 【问题描述】：我尝试从这个网站做一个简单的例子： http://www.programming-free.com/2013/02/gridviewrow-details-modalpopup-bootstrap.html （我删除了一些字段..只想看看这是否有效。） 当我运行它并单击“详细信息”时，我只会得到这样的黑色背景： http://oi40.tinypic.com/24qlgkg.jpg
这是我的 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="" />
</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# 代码：
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);
怎么了？ 谢谢！
【问题讨论】：
“sdb”变量包含数据库 【参考方案1】：我遵循相同的教程并遇到了同样的问题。对我来说，问题原来是一个 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" 中删除“隐藏”。然后使用 class="modal-dialog modal-content" 将 modal-header、modal-body 和 modal-footer 包装在一个 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>
【讨论】：
【参考方案2】：实际上引导模式在表单标签内不起作用。你必须将你的模式放在表单标签之外。你必须以某种方式管理。
<form id="form1" runat="server"> </form>
【讨论】：
【参考方案3】：详细示例：（在 ASP.Net 中使用 BootStrap 的可编辑网格视图系统） http://www.mindstick.com/Articles/0f1b65c3-b0f6-4a93-b4b5-56c278d855c2/?Editable%20Grid%20View%20System%20us
【讨论】：
请添加链接的重要部分作为您答案的一部分。以上是关于引导模式不起作用。（Asp.net，C#）的主要内容，如果未能解决你的问题，请参考以下文章
Bootstrap Carousel 在 asp.net Webform 中不起作用
发布应用程序时，代码后面的 C# Asp.net Css 类不起作用
为啥我的 Jquery Ajax 调用不起作用？（Asp.net MVC C#）