2014-01-16 72 views
2

我嘗試從這個網站做簡單的例子:(我刪除了一些fields..only想看看有沒有什麼工作) http://www.programming-free.com/2013/02/gridviewrow-details-modalpopup-bootstrap.html 當我運行和點擊「Detail'I只得到黑色背景像: http://oi40.tinypic.com/24qlgkg.jpg引導模態不工作(Asp.net,C#)

這裏是我的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#代碼:

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

      } 
     } 
    } 


} 

有什麼不對? 謝謝!

+0

'sdb'變量包含數據庫 – user3167150

回答

2

其實自舉模式並不內部形狀工作tag.You必須把你的模式之外的形式tag.You必須管理不知何故。

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

我跟着同一個教程,並有同樣的問題。對我來說問題原來是一個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> 

首先從類=「模式隱藏變臉」去掉「隱藏」在第一線。然後用類=「模態對話框模態內容」將模態標題,模態體和模態頁腳包裝到一個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>