Question

我知道有一个ajax模式弹出扩展器，但它并不是我真正想要的。我已经成功地将令人难以置信的DataTables插件连接到网格模式下的ASP.Net ListView设置并设置了它，坦率地说，这是坏事。

我为编辑和删除添加了2个额外的列，编辑按钮与编辑模板配合得很好但我想启动twitter bootstrap弹出模式并让用户编辑那里的项目。

我应该没有问题，在每一行中插入图标来弹出模态，但我对如何从listview行获取值感到困惑。

是否可以将整个编辑模板作为模态对话框启动？

我使用ASP.NET Listview和Fancybox实现了这一点，但我最终在模态中启动了一个新页面，该页面采用了正在编辑的项目ID的查询字符串，并使用数据库调用填充了所有内容。这是超级矫枉过正，我真的不想依赖它。

我需要的是帮助获取编辑模板的信息。我想我可以使用item_command事件作为起点。

请帮忙。这是我的简单演示列表视图的片段。

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

Answer 1

虽然这已经很晚了，但我刚刚实现了类似的功能，并且也使用了Twitter Bootstrap。

主要技巧是使用{{1>}的 Click 事件之类的事件，然后使用所选行的 DataKey 将数据拉入单独的模态框中显示的EditButton。

如果更容易以这种方式获取值，您可以将记录的ID放入ListView CommandArgument 。

然后在获得数据后，在回发后使用 RegisterStartupScript 显示模态。你无法在所有客户端执行此操作并且必须回发，因为您需要触发事件并获取行的ID并将该ID中的数据绑定到第二个EditButton。

我把代码放在下面，主要是工作，只是一些小的伪代码点。

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">×</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>事件中，您获取 ItemID 并提取EditButton_Click的记录。我不太熟悉从ListView2获取 DataKey 所以那里有评论。

ListView

小注：根据我的经验，jQuery文件必须包含在页面顶部才能使用此方法。否则，即使使用 $（document）.ready（）

，也会出现'$ not found'错误

如何为ASP.Net Gridview或Listview的编辑模板启动引导模式？

1 个答案: