2016-06-19 3 views
0

에서 동일한 webform에서 여러 개의 모달 팝업을 호출하려고하지만 동일한 aspx 파일에 모두 쓰지 않으려 고 생각한 이유가 여기 있습니다. masterpage 사용에 관해서.asp.net 및 C#

<%@ Master Language="C#" AutoEventWireup="true" CodeFile="Trabajadores.master.cs" Inherits="Trabajadores" %> 


    <!-- Modal --> 
    <div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel"> 
     <div class="modal-dialog" role="document"> 
      <div class="modal-content"> 
       <asp:ContentPlaceHolder ID="Modal" runat="server"> 
       </asp:ContentPlaceHolder> 
      </div> 
     </div> 
    </div> 
    <!-- Modal --> 


       <ul class="nav nav-pills nav-stacked small"> 
        <li><a href="~/Empresas/Trabajadores/Ventanas/Empresas.aspx" data-toggle="modal" data-target="#myModal">Empresas</a></li> 
        <li><a href="~/Empresas/Trabajadores/Ventanas/Obras.aspx" data-toggle="modal" data-target="#myModal">Obras</a></li> 
        <li><a href="~/Empresas/Trabajadores/Ventanas/Haberes.aspx" data-toggle="modal" data-target="#myModal">Haberes</a></li> 
        <li><a href="~/Empresas/Trabajadores/Ventanas/Descuentos.aspx" data-toggle="modal" data-target="#myModal">Descuentos</a></li> 
       </ul> 

을 그리고 이것은 모달 팝업 중 하나입니다 :

이 지금까지 코드의 일부입니다

<%@ Page Title="Haberes" Language="C#" MasterPageFile="~/Trabajadores.Master" AutoEventWireup="true" CodeFile="Haberes.aspx.cs" Inherits="Empresas_Trabajadores_Ventanas_Haberes" %> 

<asp:Content ID="BodyContent" ContentPlaceHolderID="Modal" runat="server"> 

       <div class="modal-header"> 
        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button> 
        <h4 class="modal-title" id="myModalLabel">Login</h4> 
       </div> 
       <div class="modal-body"> 
        <form> 
        <div class="form-group"> 
         <label>Email address</label> 
         <input type="email" class="form-control" placeholder="Enter Email"> 
        </div> 
        <div class="form-group"> 
         <label>Password</label> 
         <input type="password" class="form-control" placeholder="Enter Password"> 
        </div> 
        </form> 
       </div> 
       <div class="modal-footer"> 
        <button type="submit" class="btn btn-default">Submit</button> 
       </div> 

</asp:Content> 

그러나 그것은 작동하지 않습니다. 그러나 마스터 페이지를 사용하면 모달 팝업을 열기 위해 페이지가 리디렉션됩니다. 따라서 페이지를 리디렉션하지 않고 여러 모달 팝업을 열 수있는 방법이 있는지 궁금합니다 (materpage를 사용해서는 안됩니다.) 그러나 aC# 함수 대신).

+0

MasterPages있는 레이아웃 (테마/메뉴/탐색 창 등) 공유. 어느 쪽이든 jQuery/javascript의 일부 기준에 따라 팝업에로드 할 페이지에 모달 HTML을 모두 작성하거나 너무 많지 않거나 jQuery와 같은 비동기 방식을 사용하여 서버 측 서비스를 호출하고 동적으로 모달 HTML을 가져 오십시오. –

답변

0

모달 팝업 로직은 다음 스타일 규칙 class="modal fade"을 가진 부모 <div>을 감싸 야합니다. 나는 마스터 페이지에 정의 된 두 개의 서로 다른 모달 팝업이 아래의 예에서

는 내가 자식 페이지에서 호출하는 일은 전화 $('#modalPopupID').modal('show');입니다

마스터 페이지 :

%@ Master Language="C#" AutoEventWireup="true" CodeBehind="Site.master.cs" Inherits="jqgrid_example.SiteMaster" %> 

<!DOCTYPE html> 
<html lang="en"> 
<head runat="server"> 
    <meta charset="utf-8" /> 
    <title><%: Page.Title %> - My ASP.NET Application</title> 
    <asp:ContentPlaceHolder runat="server" ID="HeadContent" /> 
</head> 
<body> 
    <form runat="server"> 
     <div id="body"> 
      <asp:ContentPlaceHolder runat="server" ID="FeaturedContent" /> 
      <asp:ContentPlaceHolder runat="server" ID="MainContent" /> 
     </div> 
    </form> 
    <div class="modal fade" tabindex="-1" role="dialog" id="modal1"> 
     <div class="modal-dialog"> 
      <div class="modal-content"> 
       <div class="modal-header"> 
        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button> 
        <h4 class="modal-title">Modal 1</h4> 
       </div> 
       <div class="modal-body"> 
        <form> 
         <div class="form-group"> 
          <label>Email address</label> 
          <input type="email" class="form-control" placeholder="Enter Email"> 
         </div> 
         <div class="form-group"> 
          <label>Password</label> 
          <input type="password" class="form-control" placeholder="Enter Password"> 
         </div> 
        </form> 
       </div> 
       <div class="modal-footer"> 
        <button type="submit" class="btn btn-default">Submit</button> 
       </div> 
      </div> 
     </div> 
    </div> 
     <div class="modal fade" tabindex="-1" role="dialog" id="modal2"> 
     <div class="modal-dialog"> 
      <div class="modal-content"> 
       <div class="modal-header"> 
        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button> 
        <h4 class="modal-title">Modal 2</h4> 
       </div> 
       <div class="modal-body"> 
        <form> 
         <div class="form-group"> 
          <label>Email address</label> 
          <input type="email" class="form-control" placeholder="Enter Email"> 
         </div> 
         <div class="form-group"> 
          <label>Password</label> 
          <input type="password" class="form-control" placeholder="Enter Password"> 
         </div> 
        </form> 
       </div> 
       <div class="modal-footer"> 
        <button type="submit" class="btn btn-default">Submit</button> 
       </div> 
      </div> 
     </div> 
    </div> 
</body> 
</html> 

하위 페이지 :

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="ModalPopupExample.aspx.cs" Inherits="jqgrid_example.ModalPopupExample" MasterPageFile="~/Site.Master" %> 


<asp:Content ID="Content1" ContentPlaceHolderID="HeadContent" runat="server"> 
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.3/jquery.min.js"></script> 
    <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script> 
    <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" /> 
    <script type="text/javascript"> 
     $(function() { 
     $('#modal1').modal('show'); 
     //Or uncomment the line below to show the other modal popup 
     //$('#modal2').modal('show'); 
     }); 
    </script> 
</asp:Content> 

<asp:Content ID="BodyContent" ContentPlaceHolderID="MainContent" runat="server"> 
</asp:Content>