Создание пользовательского макета в ASP.Net MVC3 с использованием Razor View

Здравствуйте, В моем проекте мне нужно реализовать новую страницу макета из существующего файла HTML. Как его реализовать? Я знаю, как это сделать на главной странице Asp.net. Но этот способ здесь не работает. Logic.Then вы можете понять, чего ожидаете..

У меня есть весь код html и css для того же самого. Я хочу знать, с чего начать и как?

Верхний штрих-код макета

<title>@ViewBag.Title</title>
 
 
 
 
 
 


 



<div>
 <div>
 
 </div>
 <!-- TOP BAR -->
 <div>
 <div>
 <div>
 <div>
 
 <!-- LOGO -->
 <div>
 
 </div>
 </div>
 <div>
 <ul>
 <li>
 <div>
 <div>
 <h6>You have 10 new notifications</h6>
 </div>
 <ul>
 <li><a href="#" target="_blank"><span>Donec pretium enim vel nisl viverra posuere.<span>8 min ago</span></span></a></li>
 <li><a href="#" target="_blank"><span>Vestibulum viverra magna vitae dui volutpat dapibus. <span>3 hours ago</span></span></a></li>
 <li><a href="#" target="_blank"><span>Fusce eget ipsum in odio consectetur condimentum et id nisl.<span>5 hours ago</span></span></a></li>
 <li><a href="#" target="_blank"><span>Mauris fringilla metus in mauris molestie tempor <span>8 hours ago</span></span></a></li>
 </ul>
 <div>
 <button>View All</button>
 </div>
 </div>
 </li>
 <li><a href="#" data-toggle="dropdown" target="_blank"><span>12</span></a>
 <div>
 <div>
 <h6>You have 32 new messages</h6>
 </div>
 <ul>
 <li><a href="#" target="_blank"><span><i>binjal</i> is posted an article. lacus est congue... </span><span> 12 hours ago </span></a></li>
 <li><a href="#" target="_blank"><span><i>sharmin</i> is posted an article. lacus est congue... </span><span> 12 hours ago </span></a></li>
 <li><a href="#" target="_blank"><span><i>shusi</i> is posted an article. lacus est congue... </span><span> 12 hours ago </span></a></li>
 <li><a href="#" target="_blank"><span><i>jamjam</i> is posted an article. lacus est congue... </span><span> 12 hours ago </span></a></li>
 <li><a href="#" target="_blank"><span><i>sinha</i> is posted an article. lacus est congue... </span><span> 12 hours ago </span></a></li>
 </ul>
 <div>
 <button>View All</button>
 </div>
 </div>
 </li>
 </ul>
 </div>
 <div>
 <!-- ADMIN DRODOWN MENU -->
 <div>
 <ul>
 <li>
 <span>Sharmin Sultana</span>
 <div>
 <ul>
 <li><a href="#" target="_blank">[removed_email]</a></li>
 <li><a href="#" target="_blank">Edit Profile</a></li>
 <li><a href="#" target="_blank">Inbox</a></li>
 
 <li><a href="#" target="_blank"> Logout</a></li>
 </ul>
 </div>
 </li>
 </ul>
 </div>
 </div>
 </div>
 </div>
 </div>
 <!-- LEFT BAR -->
 <div>
 <!-- SEARCH BAR -->
 <div>
 <div>
 
 <span>
 
 </span>
 </div>
 </div>
 <!-- LEFT NAV -->
 <div>
 <ul id="nav-accordion">
 <li><a href="index.html" target="_blank"> Home</a></li>
 <li><a href="#" target="_blank">Forms</a>
 <ul>
 <li><a href="form-elements.html" target="_blank">All Form Elements</a></li>
 <li><a href="extended-form-elements.html" target="_blank"> Extended Form Elements <span> Lots of plugins is used here</span></a></li>
 <li><a href="form-validation.html" target="_blank">Form Validation</a></li>
 <li><a href="form-wizard.html" target="_blank">Stepy Form</a></li>
 </ul>
 </li>
 <li><a href="#" target="_blank">Tables</a>
 <ul>
 <li><a href="basic-table.html" target="_blank"> Basic Tables <span> This is an instruction</span></a></li>
 <li><a href="table-themes.html" target="_blank"> Tables-Theme</a></li>
 <li><a href="data-tables.html" target="_blank"> Data Tables</a></li>
 </ul>
 </li>
 <li><a href="#" target="_blank"> Grid/Portlets</a>
 <ul>
 <li><a href="boxy-grids-porlets.html" target="_blank"> Boxy Grid/Portlets <span> This is an instruction</span></a></li>
 <li><a href="non-boxy-grids-porlets.html" target="_blank"> Non Boxy Grid/Portlets</a></li>
 </ul>
 </li>
 <li><a href="#" target="_blank"> Layout & Dashboard</a>
 <ul>
 <li><a href="blank-layout.html" target="_blank"> Blank Layout <span> This is an instruction</span></a></li>
 <li><a href="fixed-topbar.html" target="_blank"> Fixed Topbar</a></li>
 <li><a href="fixed-leftbar.html" target="_blank"> Fixed Leftbar</a></li>
 <li><a href="top-dropdown-menu.html" target="_blank"> Top Dropdown Menu</a></li>
 <li><a href="no-sidebar.html" target="_blank"> No Sidebar</a></li>
 </ul>
 </li>
 <li><a href="#" target="_blank"> Typography</a>
 <ul>
 <li><a href="typography-boxy.html" target="_blank"> Boxy Typography <span> This is an instruction</span></a></li>
 <li><a href="typography-non-boxy.html" target="_blank"> Non Boxy Typography</a></li>
 </ul>
 </li>
 <li><a href="#" target="_blank"> UI Elements</a>
 <ul>
 <li><a href="bootstrap-ui.html" target="_blank"> Bootstrap UI <span> This is an instruction</span></a></li>
 <li><a href="jquery-ui.html" target="_blank"> jQuery UI</a></li>
 <li><a href="extended-ui-elements.html" target="_blank"> Extended Elements<span> More Cool UI elements plugins </span></a></li>
 </ul>
 </li>
 <li><a href="#" target="_blank"> Components & Plugins</a>
 <ul>
 <li><a href="buttons-icons.html" target="_blank"> Buttons & Icons</a></li>
 <li><a href="wysiwyg.html" target="_blank"> WYSIWYG Text Editor</a></li>
 <li><a href="calendar.html" target="_blank"> Calendar</a></li>
 <li><a href="flot-chart.html" target="_blank"> Flot Chart</a></li>
 <li><a href="google-chart.html" target="_blank"> Google Chart</a></li>
 </ul>
 </li>
 <li><a href="#" target="_blank"> Example Pages</a>
 <ul>
 <li><a href="content-post.html" target="_blank"> Content Post</a></li>
 <li><a href="login.html" target="_blank"> Login</a></li>
 <li><a href="product-list.html" target="_blank"> Products List</a></li>
 <li><a href="gallery.html" target="_blank"> Gallery Page</a></li>
 <li><a href="search-page.html" target="_blank"> Search Page</a></li>
 <li><a href="error-page.html" target="_blank"> Error Page</a></li>
 <li><a href="invoice-page.html" target="_blank"> Invoice</a></li>
 </ul>
 </li>
 </ul>
 </div>
 </div>

 </div>
 <div>

 @RenderBody()
 </div>
2 ответа

Ознакомьтесь с учебным пособием по музыкальному магазину MVC3 !

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

основная концепция:

<div id="maincontainer">
 <div id="topsection">
 <div>
 Top Bar 
 </div> 
 <div>
 <ul><li>Home</li></ul>
 </div> 
 </div>
<div id="sidebar">
 <b>Side bar</b>
 </div>
 <div id="contentwrapper">
 <div id="contentcolumn">
 <div> 
 @RenderBody()
 </div>
 </div>
 </div>

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

</div>

'


Вы пробовали создать новую страницу _layout и вставить в нее свой HTML-код! правильно ли ссылки на CSS? Помимо синтаксических изменений @вместо <%%>, единственное реальное различие заключается в том, что вы определяете разделы вместо заполнителей.

Можете ли вы опубликовать некоторый пример кода, чтобы мы могли видеть, где находится ваша проблема?

licensed under cc by-sa 3.0 with attribution.