2014-01-16 6 views
2

Я пытаюсь сделать простой пример с этого сайта: (. Я удалил некоторые fields..only хотят видеть, если это работа) http://www.programming-free.com/2013/02/gridviewrow-details-modalpopup-bootstrap.html Когда я бегу, что и нажмите на кнопку «Detail'I получить только черный фон, как что: http://oi40.tinypic.com/24qlgkg.jpgBootstrap Модальные не работает (Asp.net, C#)

вот мой жерех код:

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

сначала удалить «шкурку» из класса = «модальных скрыть замирания» в первой строке. Затем заверните modal-header, modal-body и modal-footer в div с классом = «modal-dialog modal-content»

Это фиксировало модальный диалог, который не отображается для меня. Вот что я думаю, что ваше модальное должен быть:

<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> 
Смежные вопросы