Как разместить страницу с помощью MVC3 Razor?

Я читал о макетах, разделах, представлениях и частичных представлениях, но я действительно не знаю, как подойти к макету, как этот пример:

enter image description here

  • Верхняя панель: будет похожа на панель, которая Facebook есть сверху. Я буду содержать информацию аутентификации и общие параметры и меню.

  • Панель навигации: будет содержать информация о том, где вы находитесь, и куда вы можете пойти. Также "поиск" коробка.

  • Тело: фактическая информация.

  • Боковая панель: будет содержать соответствующие информация о том, что находится в тело.

  • Нижний колонтитул: авторское право, лицензия и вещи как это.

Тело будет "View", Sidebar будет "Section", Footer будет статическим HTML в "Макет", но... что будет Top bar и Navigation?

Верхняя панель не связана ни с чем, поэтому я бы поставил ее как "Частичный вид" в "Макет", но я не могу этого сделать, потому что она должна быть внутри <body> в любом случае, поэтому, когда я вызываю @RenderBody(), это должно быть показано. То же самое с навигацией, это как-то связано с телом, но я бы хотел отделить его как внешний элемент управления, который работает сам по себе и отображать информацию в зависимости от информации в URL-адресе.

Как мне подойти к этому?

ОБНОВЛЕНИЕ, пожалуйста, прочтите: Вопрос не о CSS и HTML, это не о том, как это сделать, но о том, как использовать инструменты Razor для этого, это о Razor RenderBody и PartialView.

Когда я возвращаю результат от своего контроллера, я хочу вернуть только то, что помечено на картинке как "тело", а "боковая панель" в качестве раздела, я бы хотел избежать повторения верхнего штрих-кода. Есть ли способ создать "ChildView", который наследуется от "ParentView", и это из "Макета", таким образом, что, когда я возвращаю "View (" ChildView "), экран создается автоматически?

Ответы

Ответ 1

Ознакомьтесь с MVC3 Music Store Tutorial

В последней части этого учебника описывается, как дизайн макета включает частичные представления с использованием метода Html.RenderAction(). Также см. Метод Html.RenderSection().

Ответ 2

Есть отличная статья о макетах с Razor: ASP.NET MVC 3: макеты с бритвой.

В основном ваша структура будет:
1) _ViewStart.cshtml(который укажет на макет и другие вещи, которые будут отображаться всеми вашими представлениями);
2).cshtml, который будет вашим макетом, например.: _Layout.cshtml(аналогично веб-страницам Site.Master).

Внутри _Layout.cshtml вы разместите свой HTML-макет, например:

<body>
    <div id="maincontainer">
        <div id="topsection">
            <div class="topbar">
                <h1>Header</h1>
                <div id="logindisplay">
                    @Html.Partial("_LogOnPartial")
                </div>                
            </div>            
            <div class="nav">
                <ul><li>Home</li></ul>
            </div>            
        </div>

        <div id="contentwrapper">
            <div id="contentcolumn">
                <div class="body">                    
                    @RenderBody()
                </div>
            </div>
        </div>

        <div id="sidebar">
            <b>Side bar</b>
        </div>

        <div id="footer">Footer</div>

    </div>
</body>

Посмотрите, что я положил @RenderBody() внутри div "#body", поэтому, когда мой контроллер возвращает ActionResult, только этот div будет обновлен с результатом.