Как сделать макет страницы с помощью MVC3 Razor? - PullRequest
Новая
       9

Как сделать макет страницы с помощью MVC3 Razor?

16 голосов
/ 16 мая 2011

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

enter image description here

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

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

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

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

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

Тело будет «Вид», Боковая панель будет «Раздел», Нижний колонтитул будет статическим HTML в «Макете», но. .. что будет Top bar и Navigation ?

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

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

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

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

Ответы [ 2 ]

10 голосов
/ 16 мая 2011

Существует отличный пост о макетах с помощью Razor: ASP.NET MVC 3: Макеты с помощью Razor .

В основном ваша структура будет выглядеть так: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 будет обновлен с результатом.

10 голосов
/ 16 мая 2011

Ознакомьтесь с учебником MVC3 Music Store

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

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...