搜索
搜索

使用Razor View在ASP.Net MVC3中创建自定义布局

debugcn 发表于 Dev
28
Nidheesh N Namboodhiri

您好，在我的项目中，我必须从现有的HTML文件中实现一个新的布局页面。如何实现它？我知道如何在Asp.net母版页中实现它。逻辑。那么您就可以了解期望。 现场样本

我有相同的所有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="#">[email protected]</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 &AMP; 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 &AMP; Plugins</a>
                            <ul>
                                <li><a href="buttons-icons.html"><i class="icon-double-angle-right"></i> Buttons &AMP; 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>
哈马德

查看MVC3音乐商店教程！

该教程的最后一部分描述了如何使用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>

`

本文收集自互联网，转载请注明来源。

如有侵权，请联系[email protected] 删除。

编辑于
0

我来说两句

0条评论
登录后参与评论

相关文章

来自分类Dev

使用asp.net mvc将DropDownList中的SelectedValue从View Razor传递到控制器

来自分类Dev

MVC ASP.NET在使用Razor代码的View中按结果显示按组分组的计数

来自分类Dev

将Viewbag数据从View传递到ASP.Net MVC3 Razor中的控制器

来自分类Dev

将Viewbag数据从View传递到ASP.Net MVC3 Razor中的控制器

来自分类Dev

如何在ASP.Net MVC3 Razor中使用多个复选框

来自分类Dev

Asp.net MVC3 Razor视图引擎，使用“ Multiline @：”转义几行文本？

来自分类Dev

使用 asp net razor 在 Umbraco 中创建动态滑块

来自分类Dev

如何在ASP.NET MVC中创建可重复使用的自定义HTML面板？

来自分类Dev

如何在ASP.NET MVC中创建可重复使用的自定义HTML面板？

来自分类Dev

使用Angular VS Razor进行ASP.Net MVC验证

来自分类Dev

在ActionLink for ASP.NET MVC中使用图标，Razor页面

来自分类Dev

使用Web API的ASP.NEt MVC返回Razor视图

来自分类Dev

在ASP.NET MVC中使用Razor的CSS视图模型

来自分类Dev

在ActionLink for ASP.NET MVC，Razor页面中使用图标

来自分类Dev

使用ASP.NET MVC 5 Razor添加相关数据

来自分类Dev

在Asp.net MVC Razor语法中使用JavaScript变量

来自分类Dev

在ASP.Net MVC3 Razor中动态加载菜单

来自分类Dev

枚举没有结果EF ASP.Net MVC3 Razor中的错误

来自分类Dev

验证后，ASP.NET Framework MVC使用ajax将Razor View数据发送到服务器

来自分类Dev

ASP.NET MVC：什么时候应该创建自定义View Engine

来自分类Dev

创建链接以使用ASP.NET MVC4中的Razor升级控制器

来自分类Dev

如何在ASP.NET MVC中的控制器中使用自定义方法

来自分类Dev

在ASP.NET中自定义GridView布局

来自分类Dev

MVC 6中的自定义Razor View Engine

来自分类Dev

如何在MVC Razor View中自定义TextArea？

来自分类Dev

ASP.NET MVC-C＃-定义键值对以在Razor视图中使用

来自分类Dev

使用Entity Framework MVC ASP.NET创建具有自定义类型的控制器时出错

来自分类Dev

在ASP.NET MVC中使用Razor创建可重用的HTML视图组件

来自分类Dev

如何在Asp.Net MVC中创建自定义HTML帮助器

Related 相关文章

  1. 1

    使用asp.net mvc将DropDownList中的SelectedValue从View Razor传递到控制器

  2. 2

    MVC ASP.NET在使用Razor代码的View中按结果显示按组分组的计数

  3. 3

    将Viewbag数据从View传递到ASP.Net MVC3 Razor中的控制器

  4. 4

    将Viewbag数据从View传递到ASP.Net MVC3 Razor中的控制器

  5. 5

    如何在ASP.Net MVC3 Razor中使用多个复选框

  6. 6

    Asp.net MVC3 Razor视图引擎，使用“ Multiline @：”转义几行文本？

  7. 7

    使用 asp net razor 在 Umbraco 中创建动态滑块

  8. 8

    如何在ASP.NET MVC中创建可重复使用的自定义HTML面板？

  9. 9

    如何在ASP.NET MVC中创建可重复使用的自定义HTML面板？

  10. 10

    使用Angular VS Razor进行ASP.Net MVC验证

  11. 11

    在ActionLink for ASP.NET MVC中使用图标，Razor页面

  12. 12

    使用Web API的ASP.NEt MVC返回Razor视图

  13. 13

    在ASP.NET MVC中使用Razor的CSS视图模型

  14. 14

    在ActionLink for ASP.NET MVC，Razor页面中使用图标

  15. 15

    使用ASP.NET MVC 5 Razor添加相关数据

  16. 16

    在Asp.net MVC Razor语法中使用JavaScript变量

  17. 17

    在ASP.Net MVC3 Razor中动态加载菜单

  18. 18

    枚举没有结果EF ASP.Net MVC3 Razor中的错误

  19. 19

    验证后，ASP.NET Framework MVC使用ajax将Razor View数据发送到服务器

  20. 20

    ASP.NET MVC：什么时候应该创建自定义View Engine

  21. 21

    创建链接以使用ASP.NET MVC4中的Razor升级控制器

  22. 22

    如何在ASP.NET MVC中的控制器中使用自定义方法

  23. 23

    在ASP.NET中自定义GridView布局

  24. 24

    MVC 6中的自定义Razor View Engine

  25. 25

    如何在MVC Razor View中自定义TextArea？

  26. 26

    ASP.NET MVC-C＃-定义键值对以在Razor视图中使用

  27. 27

    使用Entity Framework MVC ASP.NET创建具有自定义类型的控制器时出错

  28. 28

    在ASP.NET MVC中使用Razor创建可重用的HTML视图组件

  29. 29

    如何在Asp.Net MVC中创建自定义HTML帮助器

热门标签

归档