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

so basically if you remove the modal and the GV and the DV are on the same page the DV updates correctly on GV Select? — fnostro, Jan 21 '15 at 18:13
yes, but when the DV is back in the modal - the data isn't updating on GV select — Chris Hill, Jan 21 '15 at 18:15
the modal is preventing a postback so the DV never gets bound with the selected row's param1. This is a typical problem with trying to popup a databound control. the popup is clientside js but the DV requires a postback to get current data. — fnostro, Jan 21 '15 at 18:16
using bootstrap modal? no idea - never used it. But the method is simple enough. In the past, I have placed the DV in a stand-alone page that gets it's param1 from an URL parameter and then used a third party modal that can display the standalone page as a popup in an iframe. — fnostro, Jan 21 '15 at 18:24
there are many solutions - this one is quick, but introduces security concerns due to the url parameter, it's not good to pass around primary keys. google it - there are many examples out there — fnostro, Jan 21 '15 at 18:28

Chris Hill · Accepted Answer · 2015-04-08T10:51:43.390

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

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

1 Answers1