asp.net - 如何为 ASP.Net Gridview 或 Listview 的编辑模板启动 Bootstrap 模式？

Question

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

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

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

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

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

我需要的是帮助获取编辑模板所提供的信息。我想我可以使用 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>

Answer 1

虽然这已经晚了，但我只是实现了类似的东西，并且也是用 Twitter Bootstrap 完成的。

主要技巧是使用 EditButton 的 Click 事件，然后使用所选行的 DataKey 来拉取数据到一个单独的 ListView 中，该 ListView 显示在 modal 框中。

您可以将记录的 ID 放入 EditButton CommandArgument 中，如果这样更容易获取值的话。

然后在获取数据后，在回发后使用 RegisterStartupScript 显示模态。您不能在所有客户端执行此操作并且必须回发，因为您需要触发一个事件并获取行的 ID 并将该 ID 中的数据绑定(bind)到第二个 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()

也会出现“未找到 $”错误