asp.net - Asp .netモーダルポップアップにあるクリックイベントリンクボタンでモーダルポップアップを表示する

Question

このモーダル ポップアップにモーダル ポップアップ (Modal2) を表示しました。グリッドにはリンク ボタンが含まれています。リンク ボタンのクリック イベントで、グリッドを持つ別のモーダル ポップアップを表示する必要があります。

私の最初のモーダルポップアップ表示

<asp:Button ID="btnScholershipApp" runat="server" Text="Button" SkinID="SelectButton" />
        <Ajax:ModalPopupExtender ID="Modal2" runat="server" PopupControlID="table2" CancelControlID="img1"
            TargetControlID="btnScholershipApp" OnCancelScript="javascript:__doPostBack('clearfields2')">
        </Ajax:ModalPopupExtender>

最初のモーダル ポップアップ

 <table id="table2" runat="server" border="0" cellpadding="0" cellspacing="0" height="100%"
    style="border-collapse: collapse; height: auto; margin: 0px; padding: 0px; display: none;"
    width="1000" class="popupheading">
    <tr>
        <td>
            <div style="width: 1000px; height: auto;">
                <div style="width: 1000px; height: 40px; background-image: url('../../../PopU/top.png');
                    background-repeat: no-repeat;">
                    <img id="img1" runat="server" height="40" src="~/Images/close1.png" style="float: right;"
                        width="40" />
                </div>
                <div style="width: 980px; height: auto; min-height: 100px; background-image: url('../../../PopU/center_bg.png');
                    background-repeat: repeat-y; padding: 0 10px 0 10px;">
                    <asp:Panel ID="modal_panel2" runat="server" Height="550" Width="980">
                        <table cellpadding="7px" cellspacing="7px" width="100%">
                            <tr>
                                <td>
                                    <fieldset>
                                        <legend class="legend">Search </legend>
                                        <table border="0" cellpadding="0" cellspacing="0" width="100%">
                                            <tr>
                                                <td>
                                                    <asp:Label ID="Label5" runat="server" Text="Student Name"></asp:Label>
                                                </td>
                                                <td>
                                                    <asp:TextBox ID="txtSAStudentName" runat="server"></asp:TextBox>
                                                </td>
                                                <td>
                                                    <asp:Label ID="Label6" runat="server" Text="Student ID"></asp:Label>
                                                </td>
                                                <td>
                                                    <asp:TextBox ID="txtSAStudentID" runat="server"></asp:TextBox>
                                                </td>
                                                <td>
                                                    <asp:Label ID="Label4" runat="server" Text="Scholership Name"></asp:Label>
                                                </td>
                                                <td>
                                                    <asp:TextBox ID="txtSAScholershipName" runat="server"></asp:TextBox>
                                                </td>
                                            </tr>
                                            <tr>
                                                <td>
                                                    <asp:Label ID="Label7" runat="server" Text="University PRN"></asp:Label>
                                                </td>
                                                <td>
                                                    <asp:TextBox ID="txtSAScholershipPRN" runat="server"></asp:TextBox>
                                                </td>
                                                <td>
                                                    <asp:Label ID="Label12" runat="server" Text="Date Of Birth"></asp:Label>
                                                </td>
                                                <td>
                                                    <asp:TextBox ID="txtSADateOfBirth" runat="server"></asp:TextBox>
                                                    <ajaxtoolkit:CalendarExtender ID="CalendarExtender1" runat="server" Enabled="True"
                                                        TargetControlID="txtSADateOfBirth">
                                                    </ajaxtoolkit:CalendarExtender>
                                                </td>
                                            </tr>
                                        </table>
                                    </fieldset>
                                </td>
                            </tr>
                        </table>
                        <table width="100%">
                            <tr style="background-color: #F6F0DB;">
                                <td align="center" colspan="4">
                                    <asp:UpdatePanel ID="UpdatePanel1" runat="server">
                                        <ContentTemplate>
                                            <asp:HiddenField ID="hfScholershipName" runat="server" />
                                            <asp:HiddenField ID="hfScholershipPRN" runat="server" />
                                            <asp:HiddenField ID="hfScholershipApplicationID" runat="server" />
                                            <asp:HiddenField ID="hfScholershipDocumentID" runat="server" />
                                            <asp:GridView ID="grdScholershipApp" runat="server" AutoGenerateColumns="false" AllowPaging="True"
                                                OnPageIndexChanging="grdScholershipApp_PageIndexChanging" PageSize="10" Width="970px">
                                                <Columns>
                                                    <asp:BoundField DataField="StudentId" HeaderText="Student ID" />
                                                    <asp:BoundField DataField="FullName" HeaderText="Student Name">
                                                        <ItemStyle HorizontalAlign="Center" Width="250" />
                                                    </asp:BoundField>
                                                    <asp:BoundField DataField="ScholershipPRN" HeaderText="University PRN" />
                                                    <asp:BoundField DataField="DateOfBirth" HeaderText="Date of birth" />
                                                    <asp:BoundField DataField="ScholershipName" HeaderText="Scholership Name" />
                                                    <asp:TemplateField HeaderText="Options">
                                                        <ItemTemplate>
                                                            <asp:UpdatePanel ID="pnlup2" runat="server">
                                                                <Triggers>
                                                                    <asp:PostBackTrigger ControlID="btnEditStudentApplication" />
                                                                </Triggers>
                                                                <Triggers>
                                                                    <asp:AsyncPostBackTrigger ControlID="btnStudentDocumentIDShow" EventName="Click" />
                                                                </Triggers>
                                                                <ContentTemplate>
                                                                    <asp:ImageButton ID="btnEditStudentApplication" runat="server" CommandArgument='<%#Eval("PanomtechServiceID")+";"+Eval("StudentID")+";"+Eval("ScholershipPRN")+";"+Eval("ScholershipName")%>'
                                                                        SkinID="Select" OnClick="btnEditStudentApplication_Click" />
                                                                    <%--<asp:Panel ID="Panel12" runat="server" >
                                                                        <asp:UpdatePanel ID="UpdatePanel4" runat="server" ChildrenAsTriggers="false" UpdateMode="Conditional">
                                                                            <ContentTemplate>
                                                                                <asp:Button ID="hfbtnStudentDocumentIDShow" runat="server" Style="display: none;" />

                                                                            </ContentTemplate>
                                                                            <Triggers>
                                                                                <asp:AsyncPostBackTrigger ControlID="hfbtnStudentDocumentIDShow" EventName="Click" />
                                                                            </Triggers>
                                                                        </asp:UpdatePanel>
                                                                    </asp:Panel>--%>
                                                                    <asp:LinkButton ID="btnStudentDocumentIDShow" runat="server" Text="Documents" CommandArgument='<%#Eval("PanomtechServiceID")+";"+Eval("StudentID")+";"+Eval("StudentDocumentID")%>'
                                                                        OkControlID="hfbtnStudentDocumentIDShow" />
                                                                    <%-- OnClick="hfbtnStudentDocumentIDShow_Click" --%>
                                                                    <%--<Ajax:ModalPopupExtender ID="modal4" runat="server" PopupControlID="table4" CancelControlID="img3"
                                                                        TargetControlID="btnStudentDocumentIDShow" OnCancelScript="javascript:__doPostBack('clearfields4')">
                                                                    </Ajax:ModalPopupExtender>--%>
                                                                </ContentTemplate>
                                                            </asp:UpdatePanel>
                                                        </ItemTemplate>
                                                    </asp:TemplateField>
                                                </Columns>
                                                <EmptyDataTemplate>
                                                    no data.......
                                                </EmptyDataTemplate>
                                            </asp:GridView>
                                        </ContentTemplate>
                                    </asp:UpdatePanel>
                                </td>
                            </tr>
                        </table>
                    </asp:Panel>
                </div>
                <div style="width: 1000px; height: 40px; background-image: url('../../../PopU/bottom.png');
                    background-repeat: no-repeat;">
                </div>
            </div>
        </td>
    </tr>
</table>
<Ajax:AnimationExtender ID="AnimationExtender2" runat="server" TargetControlID="btnScholershipApp">
    <Animations>
            <OnClick>              
                <Parallel AnimationTarget="table2"
                Duration=".9" Fps="50">
                <FadeIn Duration=".9"/>
                </Parallel>                 
            </OnClick>                               
    </Animations>
</Ajax:AnimationExtender>

LinkBut​​ton イベント

protected void hfbtnStudentDocumentIDShow_Click(object sender, EventArgs e)
{
   modal4.Show();
}

2 番目のモーダル ポップアップ

<table id="table4" runat="server" border="0" cellpadding="0" cellspacing="0" height="100%"
    style="border-collapse: collapse; height: auto; margin: 0px; padding: 0px;" width="1000"
    class="popupheading">
    <tr>
        <td>
            <div style="width: 1000px; height: auto;">
                <div style="width: 1000px; height: 40px; background-image: url('../../../PopU/top.png');
                    background-repeat: no-repeat;">
                    <img id="img4" runat="server" height="40" src="~/Images/close1.png" style="float: right;"
                        width="40" />
                </div>
                <div style="width: 980px; height: auto; min-height: 100px; background-image: url('../../../PopU/center_bg.png');
                    background-repeat: repeat-y; padding: 0 10px 0 10px;">
                    <asp:Panel ID="modal_panel4" runat="server" Height="550" Width="980">
                        <table width="100%">
                            <tr style="background-color: #F6F0DB;">
                                <td align="center" colspan="4">
                                    <asp:UpdatePanel ID="uppanel" runat="server">
                                        <ContentTemplate>
                                            <asp:GridView ID="grdStudentDocuments" runat="server" AutoGenerateColumns="false"
                                                AllowPaging="True" OnPageIndexChanging="grdStudentDocuments_PageIndexChanging"
                                                PageSize="10" Width="970px">
                                                <Columns>
                                                    <asp:BoundField DataField="StudentId" HeaderText="Student ID" />
                                                    <asp:BoundField DataField="FullName" HeaderText="Student Name">
                                                        <ItemStyle HorizontalAlign="Center" Width="250" />
                                                    </asp:BoundField>
                                                    <asp:BoundField DataField="DocumentName" HeaderText="Document Name" />
                                                    <asp:BoundField DataField="ScholershipPRN" HeaderText="University PRN" />
                                                    <asp:BoundField DataField="ScholershipName" HeaderText="Scholership Name" />
                                                    <asp:TemplateField HeaderText="Select">
                                                        <ItemTemplate>
                                                            <asp:UpdatePanel ID="pnlup3" runat="server">
                                                                <Triggers>
                                                                    <asp:PostBackTrigger ControlID="btnEditSStudentDocuments" />
                                                                </Triggers>
                                                                <ContentTemplate>
                                                                    <asp:ImageButton ID="btnEditSStudentDocuments" runat="server" CommandArgument='<%#Eval("StudentDocumentID")%>'
                                                                        SkinID="Select" OnClick="btnEditSStudentDocuments_Click" />
                                                                </ContentTemplate>
                                                            </asp:UpdatePanel>
                                                        </ItemTemplate>
                                                    </asp:TemplateField>
                                                </Columns>
                                                <EmptyDataTemplate>
                                                    no data.......
                                                </EmptyDataTemplate>
                                            </asp:GridView>
                                        </ContentTemplate>
                                    </asp:UpdatePanel>
                                </td>
                            </tr>
                        </table>
                    </asp:Panel>
                </div>
                <div style="width: 1000px; height: 40px; background-image: url('../../../PopU/bottom.png');
                    background-repeat: no-repeat;">
                </div>
            </div>
        </td>
    </tr>
</table>
<asp:Button ID="hfbtnStudentDocumentIDShow" runat="server" OnClick="hfbtnStudentDocumentIDShow_Click"
    Style="display: none;" />
<Ajax:ModalPopupExtender ID="modal4" runat="server" PopupControlID="table4" CancelControlID="img3"
    TargetControlID="hfbtnStudentDocumentIDShow" OnCancelScript="javascript:__doPostBack('clearfields4')">
</Ajax:ModalPopupExtender>
<Ajax:AnimationExtender ID="AnimationExtender4" runat="server" TargetControlID="hfbtnStudentDocumentIDShow">
    <Animations>
          <OnClick>              
             <Parallel AnimationTarget="table4"
                   Duration=".9" Fps="50">
                   <FadeIn Duration=".9"/>
             </Parallel>                 
         </OnClick>                                                                                                        
    </Animations>
</Ajax:AnimationExtender>

問題

リンクボタンをクリックしても何も表示されません 助けてください

Answer 1

これを試してみてください。ブログのどこかで読んだのですが、更新パネルで ModaloPopup Extender を使用すると問題が発生し、正しい順序で使用しないと問題が発生するという問題が発生しました。私の場合、投稿しているコードは問題なく動作します。また、更新パネル内で ModalPopupExtender を使用していますが、更新パネルで ModalPopupExtender のこの順序を試してみてください。確実に機能します。

    <div class="popup">
            <asp:Button ID="Button7" runat="server" Text="Button" Style="display: none;" />
            <asp:Button ID="Button8" runat="server" Style="display: none;" />

            <asp:ModalPopupExtender ID="ModalPopupUploadFiles" BehaviorID="ModalPopupUploadFiles" runat="server" CancelControlID="ImageButton1"
                TargetControlID="Button7" PopupControlID="PanelUploadFiles" PopupDragHandleControlID="PopupHeader"
                Drag="true" BackgroundCssClass="Overlay">
                <Animations>         
                    <OnShown>
                        <FadeIn Duration=".50" Fps="10" />            
                    </OnShown>
                </Animations>
            </asp:ModalPopupExtender>
            <!--unique css-->
            <asp:Panel ID="PanelUploadFiles" runat="server" Style="display: none; overflow:scroll; width:750px; height:400px;" class="PopUpPanel">

                <asp:Panel ID="panel1" runat="server" class="closeButton">
                    <asp:ImageButton ID="ImageButton1" runat="server" ImageUrl="~/images/cross.png"/>
                </asp:Panel>
                <asp:UpdatePanel ID="updtPanel" runat="server" UpdateMode="Conditional" ChildrenAsTriggers="True">
            <ContentTemplate>
                <br />
                <br />
                <table width="100%"  border="0" cellspacing="0" cellpadding="0">
      <tr>
        <td align="left" valign="top">
        <table width="100%"  border="0" cellpadding="0" cellspacing="0" bgcolor="#ffffff">
<tr>
<td align="left" valign="top">
<table id="delgateContainer" width="90" border="0" align="left" cellpadding="0" cellspacing="3">
  <tr align="center" valign="middle">
    <td><asp:ImageButton ID="btnAddFiles" ClientIDMode="Static" ImageUrl="~/images/add.gif" runat="server"/></td>
    <td><asp:ImageButton ID="btnStartUpload" ClientIDMode="Static" ImageUrl="~/images/start.gif" runat="server" OnClick="btnStartUpload_Click" /></td>
    <td><asp:ImageButton ID="btnCancelUpload" ImageUrl="~/images/cancel.gif" runat="server" OnClick="btnCancelUpload_Click" /></td>
    <td><asp:ImageButton ID="btnDeleteAllUploads" ClientIDMode="Static" ImageUrl="~/images/delete2.gif" runat="server" OnClick="btnDeleteAllUploads_Click" /></td>
    <td align="left"><asp:CheckBox ID="chckBoxDeleteAll" ClientIDMode="Static" runat="server" /></td>
    <td>&nbsp;</td>
  </tr>
<tr align="center" valign="middle">
    <td colspan="6">&nbsp;</td>
    </tr>
</table>
<p class="gr"><strong></strong></p><p>&nbsp;        </p></td>
</tr>
          <tr>
            <td height="1" colspan="2" class="bgbl"></td>
            </tr>
        </table></td>
      </tr>

       <asp:GridView ID="gvUploadFiles" ClientIDMode="Static" onRowCommand="gvUploadFiles_Clicked" DataKeyNames="FileID,FileName,FileSize,FilePath,Status" AllowPaging="false" runat="server"
       PagerStyle-HorizontalAlign="Center" AutoGenerateColumns="false" Width="90%"
       CellPadding="0" BorderWidth="0" AlternatingRowStyle-BorderColor="LightGray" AlternatingRowStyle-BorderWidth="1" GridLines="None" ShowHeader="true"  AlternatingRowStyle-BackColor="#f9f9f9" >
       <Columns>


       <asp:ImageField DataImageUrlField="ThumbanilPath" HeaderText="Thumbnail" ItemStyle-CssClass="alignmentCenter" ControlStyle-Width="100px"  ControlStyle-Height="100px" runat="server"></asp:ImageField>

       <asp:BoundField DataField="FileName" ItemStyle-CssClass="alignmentCenter" HeaderText="File Name"  />
       <asp:BoundField DataField="FileSize" ItemStyle-CssClass="alignmentCenter" HeaderText="File Size"  />
 <asp:TemplateField>
       <ItemTemplate>
       <asp:HiddenField ID="filePaths" Value="FilePath" runat="server"/>
       </ItemTemplate>
       </asp:TemplateField>


       <asp:TemplateField>   
      <ItemTemplate>
<asp:ImageButton CommandName="doingUpload" ItemStyle-CssClass="alignmentRight"  class="btnStart" CommandArgument='<%#Container.DisplayIndex%>' ID="imgBtnStart" ImageUrl="~/images/start2.gif" runat="server" /></ItemTemplate>
      </asp:TemplateField>

      <asp:TemplateField>
      <ItemTemplate>
      <asp:ImageButton ID="imgBtnCancel" ItemStyle-CssClass="alignmentLeft" CommandName="cancelUploading" CommandArgument='<%#Container.DisplayIndex%>' ImageUrl="~/images/cancel2.gif" runat="server" /></ItemTemplate>
      </asp:TemplateField>

      <asp:TemplateField>    
      <ItemTemplate>      
      <asp:ImageButton  CommandName="deleteFile" ItemStyle-CssClass="alignmentRight" Visible="false" id="imgBtnDelete" CommandArgument='<%#Container.DisplayIndex%>' runat="server" ImageUrl="~/images/delete2.gif"></asp:ImageButton>
      </ItemTemplate>
      </asp:TemplateField>

       <asp:TemplateField>
       <ItemTemplate>
       <asp:CheckBox Visible="false" ID="chckBoxDelete" ItemStyle-CssClass="alignmentLeft" class="deleteChkBox" ClientIDMode="Static" runat="server" />
       </ItemTemplate>
       </asp:TemplateField>
 <asp:TemplateField>
       <ItemTemplate>
       <asp:HiddenField ID="uploadStatus" Value="Status" runat="server" />
       </ItemTemplate>
       </asp:TemplateField>
       <asp:BoundField DataField="FileID" Visible="false" />
 </Columns>
       </asp:GridView>

      <div id="UploadControl1">
      <asp:Button ID="Button17" runat="server" Style="display: none;" />            
            <asp:ModalPopupExtender ID="ModalPopupUploadControl" BehaviorID="ModalPopupUploadControl" runat="server" CancelControlID="ImageButton4"
                TargetControlID="btnAddFiles" PopupControlID="Panel5" PopupDragHandleControlID="PopupHeader"
                Drag="true" BackgroundCssClass="Overlay">
                <Animations>         
                    <OnShown>
                        <FadeIn Duration=".50" Fps="10" />            
                    </OnShown>
                </Animations>
            </asp:ModalPopupExtender>
                  <asp:Panel ID="Panel5" runat="server" class="PopUpPanel"
            style="display: none;overflow:hidden; height:100px; width:300px;"><!---unique css-->
                <asp:Panel ID="panel7" runat="server" class="closeButton">
                    <asp:ImageButton ID="ImageButton4" runat="server" ImageUrl="~/images/cross.png"
                         />
                </asp:Panel>
<div id="uploadControl" class="all">
                <div></div>
<asp:FileUpload ID="uploadingFiles" ClientIDMode="Static" runat="server" class="all" style="display:none;" /><br /><br />
                <asp:ImageButton ID="imgBtnAddFile" ClientIDMode="Static" runat="server" ImageUrl="~/images/addToGrid.jpg" OnClick="btnAddToList_Click" style="Display:none;" class="all"/>
                </div>
<div>
                    &nbsp;</div>
</asp:Panel>
        </div>

    </ContentTemplate>
    <Triggers>
    <asp:PostBackTrigger ControlID="imgBtnAddFile" />
        <asp:AsyncPostBackTrigger ControlID="gvUploadFiles" EventName="RowCommand" />

    </Triggers>

    <Triggers>
    <asp:AsyncPostBackTrigger ControlID="gvUploadFiles" EventName="RowCommand" />
    </Triggers>

    </asp:UpdatePanel>

    <asp:UpdateProgress ID="testing" DisplayAfter="0" AssociatedUpdatePanelID="updtPanel" runat="server">
    <ProgressTemplate>


     <div style=" left:0px; top:0px; position:fixed; width:100%; height:100%;
                     background-color:White;    filter:alpha(opacity=90);opacity:0.9;">

    <asp:Image ID="Image2" style="margin-left:500px; margin-top:300px;" ImageUrl="~/images/ajax-loader.gif" runat="server" />


                        </div> 
</ProgressTemplate>
    </asp:UpdateProgress>


      <tr>
        <td align="right"><img src="../images/m7.gif" width="115" height="26" /></td>
      </tr>
    </table>
                </asp:Panel>

                </div>