引导模态不工作。（Asp.net，C＃） [英] Bootstrap Modal not working.(Asp.net, C#)
本文介绍了引导模态不工作。（Asp.net，C＃）的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我尝试从这个网站做简单的例子：
的http://www.programming-free.com/2013/02/gridviewrow-details-modalpopup-bootstrap.html
（我删除了一些fields..only想看看有没有什么工作。）
当我运行，并单击Detail'I只得到黑色背景这样的：
http://oi40.tinypic.com/24qlgkg.jpg
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
这里是我的ASP code：
here is my asp code:
<%@ 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＃code：
and this is the C# code:
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!
推荐答案
我遵循相同的教程，并有同样的问题。对我来说，问题竟然是一个CSS的问题。
I followed the same tutorial and had the same problem. The problem for me turned out to be a css issue.
你原来的模式：
<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. Then wrap the modal-header,modal-body, and modal-footer in a div with the 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>
这篇关于引导模态不工作。（Asp.net，C＃）的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
![http://oi40.tinypic.com/24qlgkg.jpg](\"http://oi40.tinypic.com/24qlgkg.jpg\"){kind=link}