Блог

У меня есть довольно простое представление, которое отображает дочернее представление для каждого объекта, переданного контроллером. Информация для каждого объекта больше, чем печатается на отдельной странице. Все это прекрасно работает. Однако я хотел бы иметь заголовок в верхней части страницы, который не печатается. Используя Css, который я использую, это работает, однако первая напечатанная страница будет пустой. Если я просто добавлю заголовок, пустая страница снова исчезнет. Есть ли какой-нибудь способ разместить там заголовок, не печатая пустую страницу?

Вид:

 @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--;

        }
    }
 

Будет работать следующее:

 @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 является дополнительным тегом класса, иначе вы получите пустую страницу в конце.