DetailsView in Modal - Modal won't open, conflict with data-toggle

Question

I have a GridView and DetailsView on a page - both databound.

I want to select a databound row and open the modal with the populated DetailsView inside.

I have LinkButtons within a TemplateField for my select button with the sample bootstrap modal data-toggle and data-target fields.

My problem is with showing the DetailsView in the modal - upon clicking the SELECT button in the GridView - the modal shows, but the data is stays the same regardless of which row I select.

DetailsView Code

    <asp:DetailsView ID="DetailsView1" runat="server" DataSourceID="DetailsViewComputer" Height="50px" Width="125px">
     </asp:DetailsView>
     <asp:SqlDataSource ID="DetailsViewComputer" runat="server" ConnectionString="<%$ ConnectionStrings:ITManagementConnectionString %>" ProviderName="<%$ ConnectionStrings:ITManagementConnectionString.ProviderName %>" SelectCommand="SELECT idComputers, idStatus, Hostname, idUser, AssetNumber, IPAddress, MACAddress, idoffice, idManufacturer, idModel, idProcessor, idRAM, idRAMType, idGraphicsCard, idHDD, SerialNumber, DateCreated, DateLastModified FROM computers WHERE (idComputers = @Param1)">
         <SelectParameters>
             <asp:ControlParameter ControlID="GridView1" Name="Param1" PropertyName="SelectedValue" />
         </SelectParameters>
     </asp:SqlDataSource>

GridView Code

<asp:GridView ID="GridView1" runat="server" AutoGenerateColumns="False" DataKeyNames="idComputers" DataSourceID="GridViewComputer">
    <Columns>
        <asp:TemplateField ShowHeader="False">
            <ItemTemplate>
                <asp:LinkButton ID="LinkButton1" runat="server" CausesValidation="False"  CommandName="Select" data-toggle="modal" data-target="#myModal" Text="Select"></asp:LinkButton>
            </ItemTemplate>
        </asp:TemplateField>
        <asp:BoundField DataField="idComputers" HeaderText="idComputers" InsertVisible="False" ReadOnly="True" SortExpression="idComputers" />
        <asp:BoundField DataField="Status" HeaderText="Status" SortExpression="Status" />
        <asp:BoundField DataField="Hostname" HeaderText="Hostname" SortExpression="Hostname" />
        <asp:BoundField DataField="forename" HeaderText="forename" SortExpression="forename" />
        <asp:BoundField DataField="surname" HeaderText="surname" SortExpression="surname" />
        <asp:BoundField DataField="officename" HeaderText="officename" SortExpression="officename" />
        <asp:BoundField DataField="IPAddress" HeaderText="IPAddress" SortExpression="IPAddress" />
        <asp:BoundField DataField="ManufacturerName" HeaderText="ManufacturerName" SortExpression="ManufacturerName" />
        <asp:BoundField DataField="Model" HeaderText="Model" SortExpression="Model" />
        <asp:BoundField DataField="HDDSize" HeaderText="HDDSize" SortExpression="HDDSize" />
        <asp:BoundField DataField="RAMSize" HeaderText="RAMSize" SortExpression="RAMSize" />
    </Columns>
</asp:GridView>

Through the process of elimination, I think the issue has something to do with my LinkButton - specifically with data-toggle - see below:

LinkButton1

<asp:LinkButton ID="LinkButton1" runat="server" CausesValidation="False"  CommandName="Select" data-toggle="modal" data-target="#myModal" Text="Select"></asp:LinkButton>

Whenever I remove the data-toggle element and the DetailsView code from the Modal - the select works and the DetailsView displays the data. Whenever the data-toggle element is included and the DetailsView code is in the Modal - the Modal Shows without but the DetailsView data doesn't change.

Am I missing something?

I have searched and tried the solution in the below page, but either I'm an idiot or it didn't work (most likely the former):

Open popup with linkbutton

I would appreciate any help with this whatsoever! I have spent all day scratching my head because of this.

Thanks in Advance,

Chris

Answer 1

I found a solution to the issue by opening the Modal using JS - See below:

http://getbootstrap.com/javascript/#js-programmatic-api

---

I removed

data-toggle="modal" data-target="#myModal"

from LinkButton and instead added onClick="LinkButton1_Click" - see below:

 <asp:LinkButton ID="LinkButton1" runat="server" CausesValidation="False" OnClick="LinkButton1_Click" CommandName="Select" Text="Select"></asp:LinkButton>

I then referenced it in the VB.NET code behind:

 Protected Sub LinkButton1_Click(sender As Object, e As EventArgs)

    ScriptManager.RegisterStartupScript(Me, Me.GetType(), "myModal", "$('#myModal').modal()", True)

End Sub