Css/C# 인쇄 할 때 요소가 사라진다.

Question

나는 Controler가 넘겨주는 각 Object에 대해 Child View를 렌더링하는 아주 간단한 View를 가지고있다. 각 개체에 대한 정보는 별도의 페이지에있는 인쇄물보다 큽니다. 이 모든 것은 잘 작동합니다. 그러나 나는 인쇄되지 않는 페이지 상단에 헤드 라인을 갖고 싶습니다. CSS를 사용하면이 기능을 사용할 수 있지만 처음 인쇄 된 페이지는 빈 페이지가됩니다. 나가 표제를 outcomment 경우에 빈 페이지는 다시 사라진다. 빈 페이지를 인쇄하지 않고 헤드 라인을 가질 수있는 방법이 있습니까?

보기 :

@model IQueryable<Event> 

@{ 
    ViewBag.Title = "Druckansicht"; 
} 

@section Scripts { 
    <script type="text/javascript"> 
     $(document).ready(function() { 
      window.print(); 
     }) 
    </script> 
} 

<h1 class="no-print">Deine Druckansicht vom @ViewBag.StartDate bis zum @ViewBag.EndDate</h1> 

@foreach (Event evnt in Model) 
{ 
    <div class="page-break"> 
     @{Html.RenderAction("PrintChild", "Events", new { ID = evnt.EventID });} 
    </div> 
} 

CSS는 :

@media print 
{  
    .no-print 
    { 
     display: none !important; 
    } 

    .page-break 
    { 
     page-break-before: always; 
    } 
} 

스타일 시트 등으로 연결이 _Layout보기에서 이루어집니다.

이것은 내가 사용하는 결국 솔루션은 다음과 같습니다

CSS :

@media print 
{  
    .no-print 
    { 
     display: none !important; 
    } 

    .page-break 
    { 
     page-break-after: always; 
    } 

    .page-break-last 
    { 
     page-break-after: avoid; 
    } 
} 

보기 :

@{ 
     int i = Model.Count(); 
     foreach (Musa.Models.Event evnt in Model) 
     { 
      if (i == 1) 
      { 
       <div class="page-break page-break-last"> 
        @{Html.RenderAction("PrintChild", "Events", new { ID = evnt.EventID });} 
       </div> 
      } 
      else 
      { 
       <div class="page-break"> 
        @{Html.RenderAction("PrintChild", "Events", new { ID = evnt.EventID });} 
       </div> 
      } 
      i--; 

     } 
    } 

Answer 1

다음은 작동합니다 :

@media print 
{  
    .no-print 
    { 
     display: none !important; 
    } 

    .page-break 
    { 
     page-break-after: always; 
    } 

    .last-page{ 
     page-break-after: avoid; 
    } 
} 

을 다음으로 html :

<h1 class="no-print">Header</h1> 

<div class="page-break">Test 1</div> 
<div class="page-break">Test 2</div> 
<div class="page-break last-page">Test 3</div> 

마지막 항목 get이 추가 클래스 태그인지 확인하십시오. 그렇지 않으면 끝에 공백 페이지가 표시됩니다.