locked
Tab control & modal popp RRS feed

  • Question

  • User-962670764 posted

    I have an ajax tab control that contains the user profile form which dislays ok, bbbbut whrn I dd a modal popup and run it, thetab control is completely blank. is this a known issue, and how do I fix it?

        <div>
            <ajaxToolkit:TabContainer ID="TabContainer1" runat="server">
                <ajaxToolkit:TabPanel runat="server" ID="tpperspro" style="text-align:left;">
                    <HeaderTemplate>
                        <asp:Label ID="Label1" runat="server" Text="PersonalProfile" style="text-align:left;" />
                    </HeaderTemplate>
                    <ContentTemplate>
                        
                        <asp:Panel ID="Panel2" runat="server">
                        <asp:FormView ID="fvprofile" runat="server" DataKeyNames="riderid" Width="765px"  >   
                            <ItemTemplate>
                                <div id="divfrm">
                                <div id="div1" class="gainsPanel" style="width:350px; float:left;" >
                                <table>
                                    <tr><td colspan="2">
                                     <%--<div id="divhdr" class="gainsPanel" style="width:340px;" >--%>
                                    <asp:Image ID="imgicon" runat="server" ImageUrl="~/Images/Site/bdicon.png" />
                                    <asp:Label ID="lblbdtitle" runat="server" Text="Your Big Dog Profile" Font-Bold="true" Font-Size="Medium" />
                                    <hr /></td></tr>
                                    <tr>
                                  
                                        <td class="tdrt">
                                            <asp:Label ID="lbl1" runat="server" Text="Name:"/></td>
                                              <td class="tdlt">
                                            <asp:Label ID="lblfull" runat="server" Text='<%# GetFullName() %>' /></td>
                                    </tr>
                                    <tr>
                                         <td class="tdrt">
                                            <asp:Label ID="lbldn" runat="server" Text="Display Name:"/></td>
                                              <td class="tdlt">
                                            <asp:Label ID="lbldisplay" runat="server"  Text='<%# Bind("dname") %>' /></td>
                                    </tr>
                                    <tr>
                                         <td class="tdrt">
                                            <asp:Label ID="lblbd" runat="server" Text="Birthdate:"/></td>
                                              <td class="tdlt">
                                            <asp:Label ID="lbldob" runat="server"  Text='<%# Bind("dob","{0:d}") %>'  /></td>
                                    </tr>
                                     <tr>
                                         <td class="tdrt">
                                            <asp:Label ID="lblsx" runat="server" Text="Gender:"/></td>
                                              <td class="tdlt">
                                            <asp:Label ID="lblgen" runat="server"  Text='<%# getSex(Eval("gender").ToString()) %>'  /></td>
                                    </tr>
                                     <tr>
                                         <td class="tdrt">
                                            <asp:Label ID="lblcmt" runat="server" Text="Comment:"/></td>
                                              <td class="tdlt">
                                            <asp:Label ID="Label3" runat="server" Text='<%# Bind("comment") %>' /></td>
                                    </tr>
                                    <tr>
                                        <td colspan="2">
                                            <asp:Button ID="bteditper" runat="server" Text="Edit My Profile" OnClick="bteditper_Click" /><hr /></td>
                                    </tr>
    
                                </table>
                              
                                
                                </div>
                                    <div id="perhelp" class="gainsPanel" style="width:330px; float:left; margin-left:15px;">
                                        <asp:Panel ID="Panel1" runat="server">
                                      
                                            <asp:BulletedList ID="BulletedList1" runat="server" >
                                                <asp:ListItem>First and Last Name ( Middle Name, Title and/or Suffix can be added when editing.) </asp:ListItem>
                                                <asp:ListItem>Display Name (The nme you are identified by in the application. By default it  is your first and last name. It can be changed to whatever you want, however it should not be so obscure that no one can identify you.) </asp:ListItem>
                                                <asp:ListItem>Birthdate Click on Calender Icon to Select, or type in (mm/dd/yyyy))</asp:ListItem>
                                                <asp:ListItem>Gender Default is Male</asp:ListItem>
                                            </asp:BulletedList>
                                        </asp:Panel>
                                    </div>
                            </ItemTemplate>
    
                        </asp:FormView>
    
                        </asp:Panel>
                        
                    </ContentTemplate>
                </ajaxToolkit:TabPanel></ajaxToolkit:TabContainer>
                </div>
        
        <asp:SqlDataSource ID="dspersprof" runat="server" ConnectionString="<%$ ConnectionStrings:BDUCConnectionString %>"
             SelectCommand="fetchriderdetail" SelectCommandType="StoredProcedure" UpdateCommand="um_updateriderinfo" UpdateCommandType="StoredProcedure">
                            <SelectParameters>
                                <asp:SessionParameter Name="riderid" SessionField="RID" Type="Int32" />
                            </SelectParameters>
                            <UpdateParameters>
                                <asp:Parameter Name="riderid" Type="Int32" />
                                <asp:Parameter Name="titleid" Type="Int32" />
                                <asp:Parameter Name="fname" Type="String" />
                                <asp:Parameter Name="mname" Type="String" />
                                <asp:Parameter Name="lname" Type="String" />
                                <asp:Parameter Name="suffixid" Type="Int32" />
                                <asp:Parameter Name="dob" Type="DateTime" />
                                <asp:Parameter Name="comment" Type="String" />
                                <asp:Parameter Name="gender" Type="String" />
                                <asp:Parameter Name="dname" Type="String" />
                            </UpdateParameters>
                        </asp:SqlDataSource>
            <asp:SqlDataSource ID="dssuffix" runat="server" ConnectionString="<%$ ConnectionStrings:BDUCConnectionString %>" 
                SelectCommand="suffixfetch" SelectCommandType="StoredProcedure"></asp:SqlDataSource>
            <asp:SqlDataSource ID="sqlTitle" runat="server" ConnectionString="<%$ ConnectionStrings:BDUCConnectionString %>" 
                SelectCommand="titlefetch" SelectCommandType="StoredProcedure"></asp:SqlDataSource>
            <%--profile popup panel--%>
            <asp:Panel ID="pnlpropop" runat="server" CssClass="gainsPanel"  style="display:none" >
                <asp:FormView ID="fveditpro" runat="server" DataKeyNames="riderid" DataSourceID="dspersprof" DefaultMode="Edit" style="display:none" EmptyDataText="no comment">
                    <EditItemTemplate>
                        
                        <asp:HiddenField ID="rideridLabel" runat="server" Value='<%# Eval("riderid") %>' />
                       
                        <table class="auto-style1">
                           
                            <tr>
                                <td class="tdrt" >
                                    <asp:Label ID="lbltitle" runat="server" Text="Title:"></asp:Label></td>
                                <td class="tdlt">
                                    <asp:DropDownList ID="ddltitle" runat="server"
                                    DataSourceID="sqlTitle" DataTextField="title"
                                    DataValueField="titleid" SelectedValue='<%# GetTitle() %>'
                                    Style="width: 88px">
                                </asp:DropDownList></td>
                            </tr>
                            <tr>
                                <td class="tdrt" >
                                    <asp:Label ID="lblfname" runat="server" Text="First Name:" />          
                                </td>
                                 <td class="tdlt" > 
                                     <asp:TextBox ID="fnameTextBox" runat="server" Text='<%# Bind("fname") %>' />
                                 </td>
                            </tr>
                             <tr>
                                <td class="tdrt" >
                                    <asp:Label ID="lblmname" runat="server" Text="Mid Name/Init:" />          
                                </td>
                                 <td class="tdlt" > 
                                     <asp:TextBox ID="mnametxtbox" runat="server" Text='<%# Bind("mname") %>' />
                                 </td>
                            </tr>
                            <td class ="tdrt">
                                <asp:Label ID="lblln" runat="server" Text="Last Name"></asp:Label></td>
                            <td class="tdlt"> <asp:TextBox ID="lnameTextBox" runat="server" Text='<%# Bind("lname") %>' /></td>
                            </tr>
                             <tr>
                                <td class="tdrt" >
                                    <asp:Label ID="lbldn" runat="server" Text="Mid Name/Init:" />          
                                </td>
                                 <td class="tdlt" > 
                                     <asp:TextBox ID="dnameTextBox" runat="server" Text='<%# Bind("dname") %>' />
                                 </td>
                            </tr>
                            <tr>
                                <td class="tdrt" >
                                    <asp:Label ID="lblsuf" runat="server" Text="Suffix:"></asp:Label></td>
                                <td class="tdlt">
                                    
                                <asp:DropDownList ID="ddlsuffix" runat="server" SelectedValue='<%# getsuffix() %>'
                                    DataSourceID="dsSuffix" DataTextField="suffix" DataValueField="suffixid">
                                </asp:DropDownList>
                                <asp:SqlDataSource ID="dsSuffix" runat="server" ConnectionString="<%$ ConnectionStrings:BDUCConnectionString %>"
                                    SelectCommand="suffixfetch"
                                    SelectCommandType="StoredProcedure"></asp:SqlDataSource>
                            </td>
                            </tr>
                             <tr>
                                <td class="tdrt" >
                                    <asp:Label ID="lblbd" runat="server" Text="Birthdate:" />          
                                </td>
                                 <td class="tdlt" > 
                                     <asp:TextBox ID="BirthdateTextBox" runat="server" Text='<%# Bind("dob", "{0:d}") %>' />
                                      <asp:Image ID="imgcal" runat="server" ImageUrl="~/Images/Icons/calendar_2.png" />
                                <ajaxToolkit:CalendarExtender ID="BirthdateTextBox_CalendarExtender" runat="server" Enabled="True"
                                    TargetControlID="BirthdateTextBox" PopupButtonID="Image4"></ajaxToolkit:CalendarExtender>
                          
                                 </td>
                            </tr>
                              <tr>
                                <td class="tdrt" >
                                    <asp:Label ID="Label2" runat="server" Text="Gender:"></asp:Label></td>
                                   <td class="tdlt">
                                <asp:DropDownList ID="ddlsex" runat="server" SelectedValue='<%# Bind("gender") %>'>
                                    <asp:ListItem Value="M">Male</asp:ListItem>
                                    <asp:ListItem Value="F">Female</asp:ListItem>
                                </asp:DropDownList>
                            </td>
                                  </tr>
                             <tr>
                                <td class="tdrt" >
                                    <asp:Label ID="lblct" runat="server" Text="Comment:" />          
                                </td>
                                 <td class="tdlt" > 
                                     <asp:TextBox ID="txtboxcmnt" runat="server" Text='<%# Bind("comment") %>' Rows="3" Height="25" TextMode="MultiLine" />
                                 </td>
                            </tr>
                        </table>
                        <br />
                       
                        <asp:LinkButton ID="UpdateButton" runat="server" CausesValidation="True" CommandName="Update" Text="Update" />
                        &nbsp;<asp:LinkButton ID="UpdateCancelButton" runat="server" CausesValidation="False" CommandName="Cancel" Text="Cancel" />
                    </EditItemTemplate>
                    <ItemTemplate>
                        
                        <asp:HiddenField ID="rideridLabel" runat="server" Value='<%# Eval("riderid") %>' />
                        <br />
                  
                        <asp:Label ID="titleidLabel" runat="server" Text='<%# Bind("titleid") %>' />
                        <br />
                    
                        <asp:Label ID="fnameLabel" runat="server" Text='<%# Bind("fname") %>' />
                        <br />
                        
                        <asp:Label ID="mnameLabel" runat="server" Text='<%# Bind("mname") %>' />
                        <br />
                        
                        <asp:Label ID="dnameLabel" runat="server" Text='<%# Bind("dname") %>' />
                        <br />
                 
                        <asp:Label ID="dobLabel" runat="server" Text='<%# Bind("dob") %>' />
                        <br />
                      
                        <asp:Label ID="commentLabel" runat="server" Text='<%# Bind("comment") %>' />
                        <br />
                     
                        <asp:Label ID="genderLabel" runat="server" Text='<%# Bind("gender") %>' />
                        <br />
                        <asp:LinkButton ID="EditButton" runat="server" CausesValidation="False" CommandName="Edit" Text="Edit" />
                    </ItemTemplate>
                </asp:FormView>
            </asp:Panel>
            <asp:Button ID="btperpro" runat="server" Text="Button" style="display:none;" />
            <ajaxToolkit:ModalPopupExtender ID="pnlpropop_ModalPopupExtender" runat="server" BehaviorID="pnlpropop_ModalPopupExtender" 
             OkControlID="UpdateButton" PopupControlID="pnlpropop" TargetControlID="btperpro" BackgroundCssClass="modalBackground" />

    I is also in a master page.
    known issue, and how do I fix it?

    Tuesday, June 21, 2016 1:53 PM

Answers

  • User61956409 posted

    Hi dieseldave,

    Firstly, TabContainer control could work fine with ModalPopupExtender control.

    <div>
        <asp:TabContainer ID="Tabs" runat="server" ActiveTabIndex="0" Height="128px"
            Width="332px" OnDemand="true">
            <asp:TabPanel runat="server" HeaderText="TabPanel1" ID="TabPanel1" OnDemandMode="Once">
                <ContentTemplate>
                    I'm tab 1, I was rendered at
                       
                    <%= DateTime.Now.ToString("T") %>
                    <br />
                    My OnDemandMode is &#39;Once&#39;
                </ContentTemplate>
            </asp:TabPanel>
            <asp:TabPanel ID="TabPanel2" runat="server" HeaderText="TabPanel2" OnDemandMode="Always">
                <ContentTemplate>
                    I'm tab 2, I was rendered at
                       
                    <%= DateTime.Now.ToString("T") %>
                    <br />
                    My OnDemandMode is &#39;Always&#39;
                  
                    <br />
                    <asp:Button ID="btnopen" runat="server" Text="Show Moadl" OnClick="btnopen_Click" />
                </ContentTemplate>
            </asp:TabPanel>
            <asp:TabPanel ID="TabPanel3" runat="server" HeaderText="TabPanel3" OnDemandMode="None">
                <ContentTemplate>
                    I'm tab 3, I was rendered at
                       
                    <%= DateTime.Now.ToString("T") %>
                    <br />
                    My OnDemandMode is &#39;None&#39;
                   
                </ContentTemplate>
            </asp:TabPanel>
        </asp:TabContainer>
    
        <br />
        <asp:Button ID="btperpro" runat="server" Text="Button" Style="display: none;" />
        <asp:Panel ID="pnlpropop" runat="server" Style="display: none;">
            I'm Modal popup 
            <br />
            <asp:Button ID="btnbclose" runat="server" Text="Close" />
        </asp:Panel>
        <asp:ModalPopupExtender ID="ModalPopupExtender1" runat="server" PopupControlID="pnlpropop" TargetControlID="btperpro"
            BackgroundCssClass="mbg" CancelControlID="btnbclose">
        </asp:ModalPopupExtender>
    </div>
    
    protected void btnopen_Click(object sender, EventArgs e)
    {
        ModalPopupExtender1.Show();
    }
    

    Secondly, you specify TargetControlID property of ModalPopupExtender control to “btperpro” (hidden button), I’d like to know where do you call ModalPopupExtender.Show() method to show ModalPopup.

    Best Regards,

    Fei Han



    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Wednesday, June 22, 2016 6:22 AM