2012-11-24 55 views
3

我知道有一個ajax模式彈出式擴展器,但它不是我正在尋找的。我已經成功地將令人難以置信的DataTables插件連接到網格模式下的ASP.Net ListView設置,並且非常坦率地說,它非常棒。如何爲ASP.Net Gridview或Listview的編輯模板啓動引導模式?

我爲編輯和刪除添加了2個額外的列,編輯按鈕與編輯模板配合良好,但我想啓動twitter引導彈出窗口模式,並讓用戶編輯這些項目。

我應該沒有問題放在每行圖標彈出模式,但我很困惑我將如何從列表視圖行中獲取值。

是否可以啓動整個編輯模板作爲模態對話框?

我使用ASP.NET Listview和Fancybox實現了這種情況,但是我最終啓動了一個模式中的新頁面,該頁面使用正在編輯的項目ID的查詢字符串,並使用數據庫調用填充了所有內容。這是超級殺傷力,我真的不喜歡依靠那個。

我需要的是幫助獲取編輯模板的信息。我想我可以使用item_command事件作爲起點。

請幫忙。這裏是我簡單的演示listview的片段。

<asp:ListView ID="ListView1" runat="server" DataSourceID="SqlDataSource1"> 
    <ItemTemplate> 
     <tr> 
     <td> 
      <asp:Label ID="NameLabel" runat="server" 
         Text='<%# Eval("Name") %>' /> 
     </td> 
     <td> 
      <asp:Label ID="ItemTypeLabel" runat="server" 
         Text='<%# Eval("ItemType") %>' /> 
     </td> 
     <td> 
      <asp:Label ID="DescriptionLabel" runat="server" 
         Text='<%# Eval("Description") %>' /> 
     </td> 
     <td> 
      <asp:Label ID="PriceLabel" runat="server" 
         Text='<%# Eval("Price","{0:C}") %>' /> 
     </td> 
      <td> 
      <asp:LinkButton ID="EditButton" CommandName="Edit" 
          runat="server">Edit</asp:LinkButton> 
     </td> 
     <td> 
      <asp:LinkButton ID="DeleteButton" CommandName="Delete"  
          runat="server">Delete</asp:LinkButton> 
     </td> 
     </tr> 
    </ItemTemplate> 
    <EditItemTemplate> 
    <tr> 
     <td> 
     <asp:TextBox ID="NameTextBox" runat="server" Text='<%# Bind("Name") %>' /> 
     </td> 
     <td> 
     <asp:TextBox ID="ItemTypeTextBox" runat="server" 
         Text='<%# Bind("ItemType") %>' /> 
     </td> 
     <td> 
     <asp:TextBox ID="DescriptionTextBox" runat="server" 
         Text='<%# Bind("Description") %>' /> 
     </td> 
     <td> 
     <asp:TextBox ID="PriceTextBox" runat="server" Text='<%# Bind("Price") %>' /> 
     </td> 
     <td> 
      <asp:LinkButton ID="UpdateButton" CommandName="Update" 
          runat="server">Update</asp:LinkButton> 
     </td> 
     <td> 
     <asp:LinkButton ID="CancelButton" CommandName="Cancel" 
         runat="server">Cancel</asp:LinkButton> 
     </td> 
    </tr> 
    </EditItemTemplate> 
    <LayoutTemplate> 
     <table id="myTable" border="0"> 
     <thead> 
      <tr> 
      <th>Name</th> 
      <th>ItemType</th> 
      <th>Description</th> 
      <th>Price</th> 
      <th></th> 
      <th></th> 
      </tr> 
     </thead> 
     <tbody> 
      <tr id="itemPlaceholder" runat="server"> 
      </tr> 
     </tbody> 
     </table> 
    </LayoutTemplate> 
</asp:ListView> 

<asp:Content ContentPlaceHolderID="CPscript" Runat="Server"> 
    <script type="text/javascript"> 
    $(document).ready(function() { 
     // for datatables 
     $('#myTable').dataTable({ 
     "aaSorting": [] 
     }); 
     // for watermark (targets all textboxes inside datatable div) 
     $("#DataTable :input:text").watermark("Search for Data").addClass("watermark"); 
    }); 
    </script> 
</asp:Content> 
+0

您是否在談論Twitter Bootstrap? –

+0

是的,特別是這個 - > http://twitter.github.com/bootstrap/javascript.html#modals – user1465298

回答

1

雖然這已經很晚了,但我只是實現了類似的東西,並且也使用了Twitter Bootstrap。

主要技巧是使用一個事件像按此事件的EditButton的,然後使用所選擇的行的DataKey到數據拉成一個單獨的ListView是在模態框呈現。

如果更容易以這種方式獲取該值,您可以將該記錄的ID放入EditButtonCommandArgument

那麼你得到的數據後,通過後回後使用的RegisterStartupScript顯示模式。你不能這樣做所有的客戶端,並務必回發,因爲你需要觸發一個事件,並獲得行的ID,並綁定數據從第二個ListView

我已經把代碼放在下面,主要是工作,只是一些小的僞代碼點。

<asp:ListView ID="ListView1" runat="server" 
    DataKeyNames="ItemID" 
    DataSourceID="SqlDataSource1"> 
    <ItemTemplate> 
     <tr> 
      <td><asp:Label ID="NameLabel" runat="server" Text='<%# Eval("Name") %>' /></td> 
      <td><asp:Label ID="ItemTypeLabel" runat="server" Text='<%# Eval("ItemType") %>' /></td> 
      <td><asp:Label ID="DescriptionLabel" runat="server" Text='<%# Eval("Description") %>' /></td> 
      <td><asp:Label ID="PriceLabel" runat="server" Text='<%# Eval("Price","{0:C}") %>' /></td> 
      <td><asp:LinkButton ID="EditButton" CommandName="Edit" runat="server" OnClick="EditButton_Click">Edit</asp:LinkButton></td> 
      <td><asp:LinkButton ID="DeleteButton" CommandName="Delete" runat="server">Delete</asp:LinkButton></td> 
     </tr> 
    </ItemTemplate> 
    <LayoutTemplate> 
     <table id="myTable" border="0"> 
     <thead> 
      <tr> 
       <th>Name</th> 
       <th>ItemType</th> 
       <th>Description</th> 
       <th>Price</th> 
       <th></th> 
       <th></th> 
      </tr> 
     </thead> 
     <tbody> 
      <tr id="itemPlaceholder" runat="server"></tr> 
     </tbody> 
     </table> 
    </LayoutTemplate> 
</asp:ListView> 

隨着DataSource獲得多個記錄

<asp:SqlDataSource ID="SqlDataSource1" runat="server" 
    ConnectionString="<%$ ConnectionStrings:MyConnectionString %>" 
    SelectCommand="ItemSelectAll" SelectCommandType="StoredProcedure"> 
</asp:SqlDataSource> 

創建模式框,顯示編輯版本

<div id="item-detail" class="modal hide fade"> 
    <div class="modal-header"> 
     <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button> 
     <h3>My Record</h3> 
    </div> 
    <div class="modal-body"> 
     <asp:ListView ID="ListView2" runat="server" 
      DataKeyNames="ItemID" 
      DataSourceID="SqlDataSource2"> 
      <EditItemTemplate> 
       <tr> 
        <td><asp:TextBox ID="NameTextBox" runat="server" Text='<%# Bind("Name") %>' /></td> 
        <td><asp:TextBox ID="ItemTypeTextBox" runat="server" Text='<%# Bind("ItemType") %>' /></td> 
        <td><asp:TextBox ID="DescriptionTextBox" runat="server" Text='<%# Bind("Description") %>' /></td> 
        <td><asp:TextBox ID="PriceTextBox" runat="server" Text='<%# Bind("Price") %>' /></td> 
        <td><asp:LinkButton ID="UpdateButton" CommandName="Update" runat="server">Update</asp:LinkButton></td> 
        <td><asp:LinkButton ID="CancelButton" CommandName="Cancel" runat="server">Cancel</asp:LinkButton></td> 
       </tr> 
      </EditItemTemplate> 
      <LayoutTemplate> 
       <table id="myTable" border="0"> 
       <thead> 
        <tr> 
         <th>Name</th> 
         <th>ItemType</th> 
         <th>Description</th> 
         <th>Price</th> 
         <th></th> 
         <th></th> 
        </tr> 
       </thead> 
       <tbody> 
        <tr id="itemPlaceholder" runat="server"></tr> 
       </tbody> 
       </table> 
      </LayoutTemplate> 
     </asp:ListView> 
    </div> 
    <div class="modal-footer"> 
     <a href="#" class="btn" data-dismiss="modal">Close</a> 
    </div> 
</div> 

設有獨立DataSource的編輯版本

<asp:SqlDataSource ID="SqlDataSource2" runat="server" 
    ConnectionString="<%$ ConnectionStrings:MyConnectionString %>" 
    SelectCommand="ItemSelectByItemID" SelectCommandType="StoredProcedure" 
    UpdateCommand="ItemUpdate" SelectCommandType="StoredProcedure"> 
    <SelectParameters> 
     <asp:Parameter Name="ItemID" Type="Int32" /> 
    </SelectParameters> 
    <UpdateParameters> 
     <%-- your parameters --%> 
    </UpdateParameters> 
</asp:SqlDataSource> 

然後在EditButton_Click事件中,您抓取ItemID並拉動記錄ListView2。我不太熟悉從ListView獲取DataKey,因此有評論。

protected void EditButton_Click(Object sender, EventArgs e) 
{ 
    // get datakey 
    string ItemID = ... // get datakey of selected row 
    // Set the value to the datasource 
    SqlDataSource2.SelectParameters["ItemID"].DefaultValue = ItemID; 

    // toggle to edit mode on the only row displayed 
    ListView2.EditIndex = 0; 

    // Now use jQuery to display the modal box AFTER postback. 
    // You need to do it after the postback, otherwise you'll 
    // never get to this event to get the ItemID 
    String csname1 = "PopupScript"; 
    Type cstype = this.GetType(); 

    // Get a ClientScriptManager reference from the Page class. 
    ClientScriptManager cs = Page.ClientScript; 

    // Check to see if the startup script is already registered. 
    if (!cs.IsStartupScriptRegistered(cstype, csname1)) 
    { 
     // In my experience, the jQuery file must be included at the top 
     // of the page for this to work. Oterwise you get '$ not found' error. 
     StringBuilder cstext1 = new StringBuilder(); 
     cstext1.Append("<script type=text/javascript>$(document).ready(function() { $('#user-detail').modal('show')}); </"); 
     cstext1.Append("script>"); 
     cs.RegisterStartupScript(cstype, csname1, cstext1.ToString()); 
    } 
} 

小事情:根據我的經驗,jQuery文件必須包含在頁面的頂部才能使用此方法。否則,即使使用了$(document).ready()