How can I launch a bootstrap modal for the edit template of a ASP.Net Gridview or Listview?

Question

I know that there is an ajax modal popup extender but it's not really what I'm looking for. I have successfully hooked up the incredible DataTables plugin to an ASP.Net ListView setup in grid mode and styled it up and quite frankly, it's badass.

I have added 2 extra columns for an edit and delete and the edit button works well with the edit template but I want to launch the twitter bootstrap popup modal and have users edit the items there.

I should have no problem putting in the icon in each row to pop up the modal but I am confused on how I will get the values from the listview rows.

Is it possible to just launch the entire edit template as the modal dialog?

I made this happen using an ASP.NET Listview and Fancybox but I ended up launching a new page in the modal that took a querystring of the ID of the item being edited and I populated everything with a Database call. It was super overkill and I'd really not like to have to rely on that.

What I need is help on getting at the info that the edit template does. I figure I can use the item_command event as a starting point.

Please help. Here is snippet of my simple demo 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

While this is late, I just implemented something similar and did it with Twitter Bootstrap as well.

The main trick is to use an event like Click event of the EditButton and then use the DataKey of the selected row to pull data into a separate ListView that is presented in the modal box.

You may be able to put the ID of the record into the EditButton CommandArgument if it's easier to get the value that way.

Then after you get the data, display the modal by using RegisterStartupScript after the post back. You can't do this all client side and MUST postback because you need to fire an event and get the ID of the row and bind the data from that ID to the second ListView.

I've put code below that is mostly working, just a few minor pseudo code points.

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

With a DataSource to get multiple records

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

Create a modal box to display the edit version

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

With a separate DataSource for the edit version

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

Then in the EditButton_Click event, you grab the ItemID and pull the record for ListView2. I'm not too familiar with getting the DataKey from a ListView so there is a comment there.

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

A minor note: In my experience, the jQuery file must be included at the top of the page for this method to work. Otherwise you get '$ not found' error, even with using $(document).ready()