problem load Details View in bootstrp modal popup

Question

Greeting all

 

I review many samples to implement Bootstrap Modal popup to load Details View.

 

Scenario:

 

I have a grideview get staff rows from table. when an admin need to edit employee row, I click on Edit botton in grideview and returun a data to details view, depends on (GridViewEmplyee_SelectedIndexChanged) Method.

Everything going well in normal mode ( DetilsView in same page). As Fig.(1) below:

 

 

 

Problem:

 

Bootstrap Modal popup can't to load Details View.As Fig.(2) below

 

 

 

Front end code:

(Botoon in GridView)

<asp:LinkButton ID="LinkButton2" runat="server" CommandName="Select" href="#myModal" data-toggle="modal">Edit</asp:LinkButton>

Front end code:

(DetailsView in Bootstrap Modal popup ):

<div id="myModal" class="modal fade">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<h4 class="modal-title">Edit selected emplyee</h4>
</div>
<div class="modal-body" style="overflow-y: scroll;max-height:100%; margin-top: 10px; margin-bottom: 10px;">
<asp:Label ID="lblmessage" runat="server" ClientIDMode="Static"></asp:Label>
<asp:DetailsView ID="DetailsView1" runat="server" DataSourceID="Sds_2" Visible="False" AutoGenerateRows="False" DataKeyNames="Id">
<Fields>
<asp:BoundField DataField="Id" HeaderText="Id" InsertVisible="False" ReadOnly="True" SortExpression="Id" Visible="false" />
<asp:BoundField DataField="S_Name" HeaderText="S_Name" SortExpression="S_Name" />
<asp:BoundField DataField="S_Lname" HeaderText="S_Lname" SortExpression="S_Lname" />
<asp:BoundField DataField="S_Gender" HeaderText="S_Gender" SortExpression="S_Gender" />
<asp:BoundField DataField="S_Salary" HeaderText="S_Salary" SortExpression="S_Salary" />
<asp:BoundField DataField="S_Phone" HeaderText="S_Phone" SortExpression="S_Phone" />
<asp:BoundField DataField="pos_CodeID" HeaderText="pos_CodeID" SortExpression="pos_CodeID" />
<asp:BoundField DataField="Br_CodeID" HeaderText="Br_CodeID" SortExpression="Br_CodeID" />
<asp:BoundField DataField="S_photo" HeaderText="S_photo" SortExpression="S_photo" />
<asp:BoundField DataField="S_Date" DataFormatString="{0:d}" HeaderText="S_Date" SortExpression="S_Date" />
<asp:BoundField DataField="F_Date" DataFormatString="{0:d}" HeaderText="F_Date" SortExpression="F_Date" />
<asp:BoundField DataField="Last_Branch" HeaderText="Last_Branch" SortExpression="Last_Branch" />
<asp:BoundField DataField="Last_Mission" HeaderText="Last_Mission" SortExpression="Last_Mission" />
<asp:CheckBoxField DataField="S_Status" HeaderText="S_Status" SortExpression="S_Status" />
</Fields>
</asp:DetailsView>
<asp:SqlDataSource ID="Sds_2" runat="server" ConnectionString="<%$ ConnectionStrings:ConnectionString %>"
SelectCommand="SELECT * FROM [Staff] WHERE ([Id] = @Id)"
UpdateCommand="UPDATE Staff SET S_Name = @S_Name, S_Lname = @S_Lname, S_Gender = @S_Gender, S_Salary = @S_Salary, pos_CodeID = @pos_CodeID, Br_CodeID = @Br_CodeID, S_Phone = @S_Phone, S_Date = @S_Date, F_Date = @F_Date, Last_Branch = @Last_Branch, Last_Mission = @Last_Mission, S_Status = @S_Status">
<SelectParameters>
<asp:ControlParameter ControlID="GridViewEmplyee" Name="Id" PropertyName="SelectedValue" Type="Int32" />
</SelectParameters>
<UpdateParameters>
<asp:Parameter Name="S_Name" />
<asp:Parameter Name="S_Lname" />
<asp:Parameter Name="S_Gender" />
<asp:Parameter Name="S_Salary" />
<asp:Parameter Name="pos_CodeID" />
<asp:Parameter Name="Br_CodeID" />
<asp:Parameter Name="S_Phone" />
<asp:Parameter Name="S_Date" />
<asp:Parameter Name="F_Date" />
<asp:Parameter Name="Last_Branch" />
<asp:Parameter Name="Last_Mission" />
<asp:Parameter Name="S_Status" />
</UpdateParameters>
</asp:SqlDataSource>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>

Another solutions:

 

I used update panel with detailsView (Trigger event) not working.

 

So another solution can anyone help me with that?

Thanks