Bootstrap Modal popup to load Details View
Question
-
User-1213141693 posted
Greeting all
I review many samples to implement Bootstrap Modal popup to load Details View.
Scenario:
I have a gridview get staff rows from table. when an admin need to edit employee row, I click on Edit button in gridview and return a data to details view, depends on (GridViewEmplyee_SelectedIndexChanged) Method.
Everything going well in normal mode ( DetailsView in same page). As Fig.(1) below:https://www.4shared.com/photo/pNdm7fTjea/11_online.html
Problem:Bootstrap Modal popup can't to load Details View.As Fig.(2) belowFront end code:(Button 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"> <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button> <h4 class="modal-title">Welcome in detail page</h4> </div> <div class="modal-body" style="overflow-y: scroll; max-height: 85%; margin-top: 50px; margin-bottom: 50px;"> <asp:Label ID="lblmessage" runat="server" ClientIDMode="Static"></asp:Label> <asp:UpdatePanel ID="UpdatePanel2" runat="server"> <ContentTemplate> <asp:SqlDataSource ID="Sds_2" runat="server" ConnectionString="<%$ ConnectionStrings:ConnectionString %>" SelectCommand="SELECT Id, S_Name, S_Lname, S_Gender, S_Salary, S_Phone, pos_CodeID, Br_CodeID, S_photo, S_Date, F_Date, Last_Branch, Last_Mission, S_Status 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 WHERE ([Id] = @Id)"> <SelectParameters> <asp:ControlParameter ControlID="gvbremployee" 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" /> <asp:Parameter Name="Id" /> </UpdateParameters> </asp:SqlDataSource> <asp:DetailsView ID="DetailsView1" runat="server" DataSourceID="Sds_2" Height="50px" Width="125px" Visible="False" AutoGenerateRows="False" DataKeyNames="Id" DefaultMode="Edit"> <Fields> <asp:BoundField DataField="Id" HeaderText="Id" InsertVisible="False" ReadOnly="True" SortExpression="Id" Visible="False" /> <asp:TemplateField HeaderText="Name" SortExpression="S_Name"> <EditItemTemplate> <asp:TextBox ID="TextBox1" runat="server" Text='<%# Bind("S_Name") %>'></asp:TextBox> </EditItemTemplate> <ItemTemplate> <asp:Label ID="Label1" runat="server" Text='<%# Bind("S_Name") %>'></asp:Label> </ItemTemplate> </asp:TemplateField> <asp:TemplateField HeaderText="Last Name" SortExpression="S_Lname"> <EditItemTemplate> <asp:TextBox ID="TextBox2" runat="server" Text='<%# Bind("S_Lname") %>'></asp:TextBox> </EditItemTemplate> <ItemTemplate> <asp:Label ID="Label2" runat="server" Text='<%# Bind("S_Lname") %>'></asp:Label> </ItemTemplate> </asp:TemplateField> <asp:TemplateField HeaderText="Gender" SortExpression="S_Gender"> <EditItemTemplate> <asp:TextBox ID="TextBox3" runat="server" Text='<%# Bind("S_Gender") %>'></asp:TextBox> </EditItemTemplate> <ItemTemplate> <asp:Label ID="Label3" runat="server" Text='<%# Bind("S_Gender") %>'></asp:Label> </ItemTemplate> </asp:TemplateField> <asp:TemplateField HeaderText="Salary" SortExpression="S_Salary"> <EditItemTemplate> <asp:TextBox ID="TextBox4" runat="server" Text='<%# Bind("S_Salary") %>'></asp:TextBox> </EditItemTemplate> <ItemTemplate> <asp:Label ID="Label4" runat="server" Text='<%# Bind("S_Salary") %>'></asp:Label> </ItemTemplate> </asp:TemplateField> <asp:TemplateField HeaderText="Phone" SortExpression="S_Phone"> <EditItemTemplate> <asp:TextBox ID="TextBox5" runat="server" Text='<%# Bind("S_Phone") %>'></asp:TextBox> </EditItemTemplate> <ItemTemplate> <asp:Label ID="Label5" runat="server" Text='<%# Bind("S_Phone") %>'></asp:Label> </ItemTemplate> </asp:TemplateField> <asp:TemplateField HeaderText="Current Position" SortExpression="pos_CodeID"> <EditItemTemplate> <asp:DropDownList ID="DDL_DV_Po" runat="server" DataSourceID="SDS_DLV_po" DataTextField="Mission" DataValueField="pos_CodeID" SelectedValue='<%# Bind("pos_CodeID") %>'> </asp:DropDownList> <asp:SqlDataSource ID="SDS_DLV_po" runat="server" ConnectionString="<%$ ConnectionStrings:ConnectionString %>" SelectCommand="SELECT [Mission], [pos_CodeID] FROM [J_Type]"></asp:SqlDataSource> </EditItemTemplate> <ItemTemplate> <asp:Label ID="Label6" runat="server" Text='<%# Bind("pos_CodeID") %>'></asp:Label> </ItemTemplate> </asp:TemplateField> <asp:TemplateField HeaderText="Current Branch" SortExpression="Br_CodeID"> <EditItemTemplate> <asp:DropDownList ID="DDL_Dv_br" runat="server" DataSourceID="SdS_Dv_br" DataTextField="B_Name" DataValueField="Br_CodeID"> </asp:DropDownList> <asp:SqlDataSource ID="SdS_Dv_br" runat="server" ConnectionString="<%$ ConnectionStrings:ConnectionString %>" SelectCommand="SELECT [B_Name], [Br_CodeID] FROM [Branchs]"></asp:SqlDataSource> </EditItemTemplate> <ItemTemplate> <asp:Label ID="Label7" runat="server" Text='<%# Bind("Br_CodeID") %>'></asp:Label> </ItemTemplate> </asp:TemplateField> <asp:TemplateField HeaderText="Start Date" SortExpression="S_Date"> <EditItemTemplate> <asp:TextBox ID="TextBox8" runat="server" Text='<%# Bind("S_Date", "{0:d}") %>'></asp:TextBox> <ajaxToolkit:CalendarExtender ID="TextBox8_CalendarExtender" runat="server" TargetControlID="TextBox8" /> </EditItemTemplate> <ItemTemplate> <asp:Label ID="Label8" runat="server" Text='<%# Bind("S_Date", "{0:d}") %>'></asp:Label> </ItemTemplate> </asp:TemplateField> <asp:TemplateField HeaderText="Finish Date" SortExpression="F_Date"> <EditItemTemplate> <asp:TextBox ID="TextBox9" runat="server" Text='<%# Bind("F_Date", "{0:d}") %>'></asp:TextBox> <ajaxToolkit:CalendarExtender ID="TextBox9_CalendarExtender" runat="server" TargetControlID="TextBox9" /> </EditItemTemplate> <ItemTemplate> <asp:Label ID="Label9" runat="server" Text='<%# Bind("F_Date", "{0:d}") %>'></asp:Label> </ItemTemplate> </asp:TemplateField> <asp:TemplateField HeaderText="Last Branch" SortExpression="Last_Branch"> <EditItemTemplate> <asp:DropDownList ID="DDL_DV_LBr" runat="server" DataSourceID="Sds_Lbr" DataTextField="B_Name" DataValueField="Br_CodeID" OnDataBound="DDL_DV_LBr_DataBound" AutoPostBack="True" OnSelectedIndexChanged="DDL_DV_LBr_SelectedIndexChanged"> </asp:DropDownList> <asp:SqlDataSource ID="Sds_Lbr" runat="server" ConnectionString="<%$ ConnectionStrings:ConnectionString %>" SelectCommand="SELECT [B_Name], [Br_CodeID] FROM [Branchs]"></asp:SqlDataSource> <asp:Literal ID="Lit_Lbr" runat="server" Text='<%# Bind("Last_Branch") %>'></asp:Literal> </EditItemTemplate> <ItemTemplate> <asp:Label ID="Label10" runat="server" Text='<%# Bind("Last_Branch") %>'></asp:Label> </ItemTemplate> </asp:TemplateField> <asp:TemplateField HeaderText="Last Mission" SortExpression="Last_Mission"> <EditItemTemplate> <asp:DropDownList ID="DDL_DV_Lm" runat="server" DataSourceID="SDS_DV_LM" DataTextField="Mission" DataValueField="pos_CodeID" AutoPostBack="True" OnDataBound="DDL_DV_Lm_DataBound" OnSelectedIndexChanged="DDL_DV_Lm_SelectedIndexChanged"> </asp:DropDownList> <asp:SqlDataSource ID="SDS_DV_LM" runat="server" ConnectionString="<%$ ConnectionStrings:ConnectionString %>" SelectCommand="SELECT [Mission], [pos_CodeID] FROM [J_Type]"></asp:SqlDataSource> <asp:Literal ID="Lit_Lmss" runat="server" Text='<%# Bind("Last_Mission") %>'></asp:Literal> </EditItemTemplate> <ItemTemplate> <asp:Label ID="Label11" runat="server" Text='<%# Bind("Last_Mission") %>'></asp:Label> </ItemTemplate> </asp:TemplateField> <asp:TemplateField HeaderText="Employee Status" SortExpression="S_Status"> <EditItemTemplate> <asp:CheckBox ID="CheckBox1" runat="server" Checked='<%# Bind("S_Status") %>' /> </EditItemTemplate> <InsertItemTemplate> </InsertItemTemplate> <ItemTemplate> <asp:CheckBox ID="CheckBox1" runat="server" Checked='<%# Eval("S_Status") %>' Enabled="false" /> </ItemTemplate> </asp:TemplateField> <asp:CommandField ShowEditButton="True" /> </Fields> </asp:DetailsView> </ContentTemplate> <Triggers> <asp:AsyncPostBackTrigger ControlID="gvbremployee" EventName="SelectedIndexChanged" /> </Triggers> </asp:UpdatePanel> </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
All replies
-
User288213138 posted
Hi toll4max,
<div id="pastingspan1">Problem:</div> <div> </div> <div id="pastingspan1">Bootstrap Modal popup can't to load Details View.As Fig.(2) below</div> <div>https://www.4shared.com/photo/ji4JddJBea/22_online.html</div> <div> <div id="pastingspan1">Front end code:</div> <div id="pastingspan1">(Button in GridView)</div> <div>Based on your description and code, I cannot reproduce your problem.
But i made demo for you as a reference. You only need to put the DetailsView into the div tag with class="modal-body".
<html xmlns="http://www.w3.org/1999/xhtml"> <head runat="server"> <title></title> <script type="text/javascript" src='https://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.8.3.min.js'></script> <script type="text/javascript" src='https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.0.3/js/bootstrap.min.js'></script> <link rel="stylesheet" href='https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.0.3/css/bootstrap.min.css' media="screen" /> </head> <body> <form id="form1" runat="server"> <asp:Button ID="Button2" runat="server" Text="Button" OnClick="Button2_Click" /> <div class="modal fade" id="addModalDates" tabindex="-1" role="dialog" aria-labelledby="addModalDates"> <div class="modal-dialog" role="document" style="width: 600px;"> <div class="modal-content"> <div class="modal-header"> <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button> </div> <div class="modal-body"> <asp:DetailsView ID="DetailsView1" runat="server" Height="50px" Width="125px"></asp:DetailsView> </div> <div class="modal-footer"> <button type="button" class="btn btn-default" data-dismiss="modal">Cancel</button> </div> </div> </div> </div> </form> </body> </html> protected void Button2_Click(object sender, EventArgs e) { ScriptManager.RegisterStartupScript(this.Page, Page.GetType(), "MyScript", "$('#addModalDates').modal('show');", true); }The result:
Best regards,
Sam
