使用Razor View在ASP.Net MVC3中创建自定义布局
Hello在我的项目中，我必须从现有的Html文件中实现一个新的布局页面。如何实现它？我知道如何在Asp.net主页面中实现它。但是这种方式在这里不起作用..这里..Here我附上了我的逻辑。然后你才能理解我所期待的......
我有相同的所有html和css代码。 我想知道从哪里开始和如何？
我的布局顶部条形码
<!DOCTYPE html>
<html>
<head>
<title>@ViewBag.Title</title>
<link href="@Url.Content("~/Content/bootstrap.css")" rel="stylesheet" type="text/css" />
<link href="@Url.Content("~/Content/font-alpona.css")" rel="stylesheet" type="text/css" />
<link href="@Url.Content("~/Content/prettify.css")" rel="stylesheet" type="text/css" />
<link href="@Url.Content("~/Content/responsive-tables.css")" rel="stylesheet" type="text/css" />
<link href="@Url.Content("~/Content/styles.css.css")" rel="stylesheet" type="text/css" />
<link href="@Url.Content("~/Content/bootstrap-reset.css.css")" rel="stylesheet" type="text/css" />
<script src="@Url.Content("~/Scripts/jquery.js")" type="text/javascript"></script>
</head>
<body>
<div class="main-wrapper">
<div class="scroll-top">
<a href="#" class="tip-top" title="Go Top"><i class="icon-arrow-up"></i></a>
</div>
<!-- TOP BAR -->
<div class="top-bar">
<div class="container">
<div class="row">
<div class="col-sm-4 col-md-4">
<a href="#" class="left-toggle"><i class="icon-menu-2 "></i></a>
<!-- LOGO -->
<div class="branding">
<a href="index.html"><img src="images/alpona-logo.png" alt="Alpona Logo"></a>
</div>
</div>
<div class="col-sm-4 col-md-4 responsive-notification-mnu">
<ul class="notification-bar">
<li class="dropdown"><a href="#" class="dropdown-toggle" data-toggle="dropdown"><i class="icon-bell"></i></a>
<div class="dropdown-menu">
<div class="dropdown-head">
<h6>You have 10 new notifications</h6>
</div>
<ul class="notification-list">
<li><a href="#" class="clearfix"><i class="icon-star blue"></i><span class="notification-intro">Donec pretium enim vel nisl viverra posuere.<span class="notification-time">8 min ago</span></span></a></li>
<li><a href="#" class="clearfix"><i class=" icon-bell orange"></i><span class="notification-intro">Vestibulum viverra magna vitae dui volutpat dapibus. <span class="notification-time">3 hours ago</span></span></a></li>
<li><a href="#" class="clearfix"><i class=" icon-bolt brown"></i><span class="notification-intro">Fusce eget ipsum in odio consectetur condimentum et id nisl.<span class="notification-time">5 hours ago</span></span></a></li>
<li><a href="#" class="clearfix"><i class=" icon-ok-sign green"></i><span class="notification-intro">Mauris fringilla metus in mauris molestie tempor <span class="notification-time">8 hours ago</span></span></a></li>
</ul>
<div class="action-btn">
<button class="btn btn-block">View All</button>
</div>
</div>
</li>
<li class="dropdown"><a href="#" class="dropdown-toggle" data-toggle="dropdown"><span class="count-noty">12</span><i class="icon-envelop-opened"></i></a>
<div class="dropdown-menu">
<div class="dropdown-head">
<h6>You have 32 new messages</h6>
</div>
<ul class="msg-list">
<li class="clearfix"><a href="#"><span class="dropdown-thumb"><img width="40" height="40" alt="Avatar" src="images/avatar-40x40/binjal.png"></span><span><i>binjal</i> is posted an article. lacus est congue... </span><span class="notification-meta"> 12 hours ago </span></a></li>
<li class="clearfix"><a href="#"><span class="dropdown-thumb"><img width="40" height="40" alt="Avatar" src="images/avatar-40x40/sharmin.png"></span><span><i>sharmin</i> is posted an article. lacus est congue... </span><span class="notification-meta"> 12 hours ago </span></a></li>
<li class="clearfix"><a href="#"><span class="dropdown-thumb"><img width="40" height="40" alt="Avatar" src="images/avatar-40x40/shusi.png"></span><span><i>shusi</i> is posted an article. lacus est congue... </span><span class="notification-meta"> 12 hours ago </span></a></li>
<li class="clearfix"><a href="#"><span class="dropdown-thumb"><img width="40" height="40" alt="Avatar" src="images/avatar-40x40/jamjam.png"></span><span><i>jamjam</i> is posted an article. lacus est congue... </span><span class="notification-meta"> 12 hours ago </span></a></li>
<li class="clearfix"><a href="#"><span class="dropdown-thumb"><img width="40" height="40" alt="Avatar" src="images/avatar-40x40/sinha.png"></span><span><i>sinha</i> is posted an article. lacus est congue... </span><span class="notification-meta"> 12 hours ago </span></a></li>
</ul>
<div class="action-btn">
<button class="btn btn-block">View All</button>
</div>
</div>
</li>
</ul>
</div>
<div class="col-sm-4 col-md-4 clearfix responsive-log-mnu">
<!-- ADMIN DRODOWN MENU -->
<div class="loged-nav pull-right">
<ul class="clearfix">
<li class="log-nav dropdown pull-right"><a class="dropdown-toggle clearfix" data-toggle="dropdown">
<span class="pull-left loged-user-name">Sharmin Sultana</span><span class="logged-user-thumb pull-right"><img class="img-circle" src="images/admin-avatar.jpg" alt="Admin"></span></a>
<div class="dropdown-menu">
<ul class="pull-right">
<li><a href="#">kjamanebr@gmail.com</a></li>
<li><a href="#">Edit Profile</a></li>
<li><a href="#">Inbox</a></li>
<li class="divider"></li>
<li><a href="#" class="logout-link"><i class="icon-lock-3"></i> Logout</a></li>
</ul>
</div>
</li>
</ul>
</div>
</div>
</div>
</div>
</div>
<!-- LEFT BAR -->
<div class="left-bar merge-left">
<!-- SEARCH BAR -->
<div class="search-bar">
<div class="input-group">
<input type="text" class="form-control">
<span class="input-group-btn">
<button class="btn btn-default" type="button"><i class="icon-search"></i></button>
</span>
</div>
</div>
<!-- LEFT NAV -->
<div class="left-nav">
<ul class="side-navigation accordion" id="nav-accordion">
<li><a href="index.html"><i class="icon-home"></i> Home</a></li>
<li><a href="#"><i class="icon-list-alt"></i>Forms</a>
<ul>
<li><a href="form-elements.html"><i class="icon-double-angle-right"></i>All Form Elements</a></li>
<li><a href="extended-form-elements.html"><i class="icon-double-angle-right"></i> Extended Form Elements <span class="nav-instruction"> Lots of plugins is used here</span></a></li>
<li><a href="form-validation.html"><i class="icon-double-angle-right"></i>Form Validation</a></li>
<li><a href="form-wizard.html"><i class="icon-double-angle-right"></i>Stepy Form</a></li>
</ul>
</li>
<li><a href="#"><i class="icon-table-2"></i>Tables</a>
<ul>
<li><a href="basic-table.html"><i class="icon-double-angle-right"></i> Basic Tables <span class="nav-instruction"> This is an instruction</span></a></li>
<li><a href="table-themes.html"><i class="icon-double-angle-right"></i> Tables-Theme</a></li>
<li><a href="data-tables.html"><i class="icon-double-angle-right"></i> Data Tables</a></li>
</ul>
</li>
<li><a href="#"><i class="icon-columns"></i> Grid/Portlets</a>
<ul>
<li><a href="boxy-grids-porlets.html"><i class="icon-double-angle-right"></i> Boxy Grid/Portlets <span class="nav-instruction"> This is an instruction</span></a></li>
<li><a href="non-boxy-grids-porlets.html"><i class="icon-double-angle-right"></i> Non Boxy Grid/Portlets</a></li>
</ul>
</li>
<li><a href="#"><i class="icon-laptop"></i> Layout & Dashboard</a>
<ul>
<li><a href="blank-layout.html"><i class="icon-double-angle-right"></i> Blank Layout <span class="nav-instruction"> This is an instruction</span></a></li>
<li><a href="fixed-topbar.html"><i class="icon-double-angle-right"></i> Fixed Topbar</a></li>
<li><a href="fixed-leftbar.html"><i class="icon-double-angle-right"></i> Fixed Leftbar</a></li>
<li><a href="top-dropdown-menu.html"><i class="icon-double-angle-right"></i> Top Dropdown Menu</a></li>
<li><a href="no-sidebar.html"><i class="icon-double-angle-right"></i> No Sidebar</a></li>
</ul>
</li>
<li><a href="#"><i class="icon-font"></i> Typography</a>
<ul>
<li><a href="typography-boxy.html"><i class="icon-double-angle-right"></i> Boxy Typography <span class="nav-instruction"> This is an instruction</span></a></li>
<li><a href="typography-non-boxy.html"><i class="icon-double-angle-right"></i> Non Boxy Typography</a></li>
</ul>
</li>
<li><a href="#"><i class="icon-cord"></i> UI Elements</a>
<ul>
<li><a href="bootstrap-ui.html"><i class="icon-double-angle-right"></i> Bootstrap UI <span class="nav-instruction"> This is an instruction</span></a></li>
<li><a href="jquery-ui.html"><i class="icon-double-angle-right"></i> jQuery UI</a></li>
<li><a href="extended-ui-elements.html"><i class="icon-double-angle-right"></i> Extended Elements<span class="nav-instruction"> More Cool UI elements plugins </span></a></li>
</ul>
</li>
<li><a href="#"><i class="icon-tools"></i> Components & Plugins</a>
<ul>
<li><a href="buttons-icons.html"><i class="icon-double-angle-right"></i> Buttons & Icons</a></li>
<li><a href="wysiwyg.html"><i class="icon-double-angle-right"></i> WYSIWYG Text Editor</a></li>
<li><a href="calendar.html"><i class="icon-double-angle-right"></i> Calendar</a></li>
<li><a href="flot-chart.html"><i class="icon-double-angle-right"></i> Flot Chart</a></li>
<li><a href="google-chart.html"><i class="icon-double-angle-right"></i> Google Chart</a></li>
</ul>
</li>
<li><a href="#"><i class="icon-files"></i> Example Pages</a>
<ul>
<li><a href="content-post.html"><i class="icon-double-angle-right"></i> Content Post</a></li>
<li><a href="login.html"><i class="icon-double-angle-right"></i> Login</a></li>
<li><a href="product-list.html"><i class="icon-double-angle-right"></i> Products List</a></li>
<li><a href="gallery.html"><i class="icon-double-angle-right"></i> Gallery Page</a></li>
<li><a href="search-page.html"><i class="icon-double-angle-right"></i> Search Page</a></li>
<li><a href="error-page.html"><i class="icon-double-angle-right"></i> Error Page</a></li>
<li><a href="invoice-page.html"><i class="icon-double-angle-right"></i> Invoice</a></li>
</ul>
</li>
</ul>
</div>
</div>
</div>
<div>
@RenderBody()
</div>
</body>
</html>
2 个答案:
答案 0 :(得分：2)
该教程的最后一部分描述了如何使用Html.RenderAction（）方法设计布局以包含部分视图。另请参阅Html.RenderSection（）方法。
基本概念是：
<body>
<div id=maincontainer>
<div id=topsection>
<div class=topbar>
Top Bar
</div>
<div class="nav">
<ul><li>Home</li></ul>
</div>
</div>
<div id="sidebar">
<b>Side bar</b>
</div>
<div id=contentwrapper>
<div id=contentcolumn>
<div class=body>
@RenderBody()
</div>
</div>
</div>
<div id=footer>Footer</div>
</div>
`
答案 1 :(得分：1)
您是否尝试过创建新的_layout页面并将HTML粘贴到其中！确保正确引用CSS链接？除了语法更改@而不是＆lt; %%＆gt;之外，唯一真正的区别是您定义了部分而不是占位符。
您可以发布一些示例代码，以便我们了解您的问题所在吗？
相关问题
最新问题
- 我写了这段代码，但我无法理解我的错误
- 我无法从一个代码实例的列表中删除 None 值，但我可以在另一个实例中。为什么它适用于一个细分市场而不适用于另一个细分市场？
- 是否有可能使 loadstring 不可能等于打印？卢阿
- java中的random.expovariate()
- Appscript 通过会议在 Google 日历中发送电子邮件和创建活动
- 为什么我的 Onclick 箭头功能在 React 中不起作用？
- 在此代码中是否有使用“this”的替代方法？
- 在 SQL Server 和 PostgreSQL 上查询，我如何从第一个表获得第二个表的可视化
- 每千个数字得到
- 更新了城市边界 KML 文件的来源？