@helper

@model DefaultModel
<div class="page-sidebar navbar-collapse collapse">
    <!-- BEGIN SIDEBAR MENU -->
    <ul class="page-sidebar-menu" data-keep-expanded="false" data-auto-scroll="true" data-slide-speed="200" ng-class="{‘page-sidebar-menu-closed‘: settings.layout.pageSidebarClosed}">
        <!-- DOC: To remove the search box from the sidebar you just need to completely remove the below "sidebar-search-wrapper" LI element -->
        <li class="sidebar-search-wrapper">
            <!-- BEGIN RESPONSIVE QUICK SEARCH FORM -->
            <form class="sidebar-search sidebar-search-bordered" action="#" method="POST">
                <a href="javascript:;" class="remove">
                    <i class="icon-close"></i>
                </a>
                <div class="input-group">
                    <input type="text" class="form-control" placeholder="Search...">
                    <span class="input-group-btn">
                        <a href="javascript:;" class="btn submit">
                            <i class="icon-magnifier"></i>
                        </a>
                    </span>
                </div>
            </form>
            <!-- END RESPONSIVE QUICK SEARCH FORM -->
        </li>

        @foreach (var group in Model.MenuGroups)
        {
            <li class="heading">
                <h3 class="uppercase">@group.Name</h3>
            </li>
            foreach (var menu in group.Menus)
            {
                <li class="nav-item">
                    <a  ui-sref="@menu.Url" class="nav-link nav-toggle">
                        <i class="@menu.Icon"></i>
                        <span class="title">@menu.Text</span>
                        @if (menu.Children.Any())
                        {
                            <span class="arrow"></span>
                        }
                    </a>
                    @SubMenu(menu)
                </li>
            }
        }
    </ul>
    <!-- END SIDEBAR MENU -->
</div>

@helper SubMenuItem(MenuItemModel menu)
{
    <li class="nav-item">
        <a  ui-sref="@menu.Url" class="nav-link nav-toggle">
            <i class="@menu.Icon"></i>
            <span class="title">@menu.Text</span>
            @if (menu.Children.Any())
            {
                <span class="arrow"></span>
            }
        </a>
        @SubMenu(menu)
    </li>
}

@helper SubMenu(MenuItemModel root)
{
if (root.Children.Any())
{
        <ul class="sub-menu">
            @foreach (var menu in root.Children)
            {
                @SubMenuItem(menu)
            }
        </ul>
}
}

  

 ASP.NET MVC 3支持一项名为“Razor”的新视图引擎选项(除了继续支持/加强现有的.aspx视图引擎外)。当编写一个视图模板时,Razor将所需的字符和击键数减少到最小,并保证一个快速、通畅的编码工作流。

  与大部分模板的语法不同,在Razor的帮助下,您不需要中断代码编写,仅仅为了在HTML中标注服务器端代码块的开始和结束。代码分析器足够聪明,它能够从你的代码里推断出是否为服务器端代码。这种更加简洁、富有表现力的语法更加干净,输入也更快速,有趣。

  今天的博文涵盖了Razor的一项很多人都不知道的功能——利用@helper语法定义可重用的帮助器方法。

  简单的 @helper 方法应用场景

  Razor中的@helper语法让您能够轻松创建可重用的帮助器方法,此方法可以在您的视图模板中封装输出功能。他们使代码能更好地重用,也使代码更具有可读性。让我们看一个超级简单的应用场景,它展示了@helper语法是怎样被使用的。

  在我们定义@helper方法之前的代码

  让我们看一个简单的产品列表应用场景。在此场景中,我们列出产品明细并输出产品的价格或是单词“免费!”——如果这个产品不花费任何成本的话:

  以上代码非常直截了当,而且Razor的语法使得在HTML里能简单地集成服务器端C#代码。

  然而,一个有点混乱的地方是价格的if/else逻辑。我们可能在站点的其他位置输出价格(或者在同一页面上),而复制以上逻辑很容易出错且难以维护。类似的应用场景是使用@helper语法提取和重构成为帮助器方法的首选考虑。

  使用@helper语法重构以上样例

  让我们提取价格输出逻辑,并将其封装在一个我们将命名为“DisplayPrice”的帮助器方法内。我们可以通过重写以下代码样例来实现此操作:

  我们已经使用上述@helper语法来定义名为“DisplayPrice”的可重用帮助器方法。就像标准C#/VB方法一样,它可以包含任意数量的参数(您也可以定义参数为空或可选参数)。不过,与标准C#/VB方法不同的是,@helper方法可以同时包含内容和代码并支持其中的完整Razor语法——这使得定义和封装呈现/格式化帮助器方法变得非常简单。

  您可以像调用一个标准的C#或VB方法一样,调用@helper方法:

  当调用该方法时,Visual Studio会提供智能感知代码:

  在多视图模式中重用@helper

  在上面的实例中,我们在相同的视图模板中将@helper方法定义为调用它的代码。或者,我们可以将@helper方法定义在视图模板外,并保证其在项目的所有视图模板中可重复使用。

  您可以在.cshtml/.vbhtml保存我们的@helper方法,并把这个文件放在项目根目录下创建的\App_Code目录下例如,我在\App_Code文件夹中创建了一个“ScottGu.cshtml”文件,并且在文件中定义了2个单独的帮助器方法(在每个文件中您可以有任意数量的帮助器方法):

  一旦我们的帮助器定义在应用程序级别,我们就可以在应用程序的任何视图模板中使用它们。

  在上面的\App_Code文件夹中的ScottGu.cshtml会逻辑编译为一个称为“ScottGu”的类。这个类中包含了“DisplayPrice” 和 “AnotherHelper”的静态成员。我们可以使用以下代码重写前面的示例来调用它:

  当像如下方法调用应用程序级别帮助器时,Visual Studio将会提供智能感知代码:

  5月15日更新:有一些人指出的一个问题是,当一个@helper保存在\app_code目录中时,默认情况下您不能访问其中的ASP.NET MVC Html帮助器方法。(例如Html.ActionLink(), Html.TextBox()等等)。而当它们定义在与视图相同的文件夹中,您是可以访问内置HTML帮助器方法的。当帮助器位于\app_code目录下时,确实当下是不支持内置HTML帮助器方法的访问的——我们将在下次发布中添加此功能。Paul Stovall有一个很好的帮助器类,您可以同时访问和使用它和您在\app_code目录下定义的@helper方法中的内置Html方法。请从这里了解更多关于如何使用的信息。

  总结

  Razor的@helper语法提供了一种简便的方法来将呈现功能封装到帮助方法中去。您可以在单个视图模板或整个项目的所有视图模板中重用它。

  您可以使用此功能来编写更加干净、更易维护的代码

时间: 2024-10-10 04:26:32

@helper的相关文章

Razor 中的@helper 与 @function 用法

@helper : 可以有返回值,也可以没有返回值 @function :需要有返回值 可以将View中公共部分的代码抽取出来,变成一个独立的方法 公共部分 view 抽出的公共部分的view 必须放在App_Code目录下,文件名 xxx.cshtml . 文件名就是类名称 CommonUI.cshtml 无返回值 @helper ShowCustomerInfo(Customer customer) { <ul> <li>@customer.CompanyName</li

meteor实例—4—(helper等)

上面的一些{{}}标记,其中的数据来龙去脉基本已经清楚了,但是还有一个{{domain}}没有提到,就是post_item.html中的<h3><a href="{{url}}">{{title}}</a><span>{{domain}}</span></h3>这一句,这个东西是干什么用的呢,查看一下客户端源代码,会发现<span>和</span>中间是空的,就算删除了{{domain}}也

MVC Helper Methods

在.net MVC中经常会见到特别的写法 比如 @Url.Action( ) @Url.Conyent( ) @Html.Displayfor( )等等 这些 写法就是我们这里要讲的  Helper Methods 帮助方法,他们帮助干什么呢,也就是他们的主要用途在哪里呢? 他们主要用于在一定的逻辑下 生成html标签 ,以及代码. 内嵌式的helper methods 上面的这些helper methods是mvc框架内建的一些帮助方法,我们也可以创建我们自己的帮助方法,创建的方式分为两类:

WebGrid Helper with Check All Checkboxes

WebGrid Helper with Check All Checkboxes myEvernote Link Tuesday, September 13, 2011ASP.NET ASP.NET MVC Html Helper jQuery WebMatrix Introduction:           WebGrid helper is one of the helper of ASP.NET Web Pages(WebMatrix) technology included in AS

牛腩新闻发布系统--重构SQL Helper

天外有天,人外有人.自我进提高班以来,一直都在考虑,先前重构机房的时候,看到别人在D层加了SQL Helper,就一定要学者加上玩玩,等做完了以后,进行下一个阶段牛腩的时候,又看到了人家建的SQL Helper,不觉感慨,跟人家比,人家就是我的老师! 闲话就不多说了,进行正式的话题:如何写好SQL Helper?从宏观上讲,SQL Helper是完全体现了面向对象的抽象和封装的思想的.它对重复代码抽取出来,进行抽象,抽象就是为了封装,提高了代码的复用. 那么就该讨论怎么写的问题.如果我先上来给大

sqlite helper

//-------------------------------------------------------------------------- // // Copyright (c) BUSHUOSX. All rights reserved. // // File: SqliteDbManager.cs // // Version:1.0.0.0 // // Datetime: // //------------------------------------------------

如何在 ejs 模板中使用 helper function 外部函数进行特殊处理?

一般我们想要在 ejs 模板中使用外部函数用于特殊的处理,比如:<%= ellipsis(title, 30) %> 通常的做法是: 使用 app.locals 来定义: app.locals.ellipsis = function(str, len) { return str; } // 使用 <%= ellipsis(title, 20) %> 使用 ejs.filters 来定义,详细用法: var ejs = require('ejs'); ejs.filters.elli

handlebars自定义helper的写法

handlebars相对来讲算一个轻量级.高性能的模板引擎,因其简单.直观.不污染HTML的特性,我个人特别喜欢.另一方面,handlebars作为一个logicless的模板,不支持特别复杂的表达式.语句,只内置了一些基本的语法,像if.each这些.可惜的是就连if都十分弱,只能判断值是否为true/false,或转化后是否为true/false,不能对值进行比较.不过,handlebars提供了自定义helper的能力,通过自定义helper,可以实现非常丰富的功能.本篇来总结一下hand

MVC 4中的前端渲染 @Helper指令

如果我们需要在一个页面或多个页面显示如人民币格式(后台传回来的无¥)¥的格式化.或是对后台数据作如保留小数个数等处理,这些东西经常要用到,特别是一些NULL值的处理,有可能会出错.这时我们可以通过创建 一个.csHtml文件(当然你也可以以把方法写在要用的当前页面中),封装一个方法, 直接在各个用到的前端面面中调用就可以了. 先举一个 在本页面调用,且写在本页面的使用如下: @{ Layout="~/Views/Shared/_Layout.cshtml" ; } @using  My

URL and Ajax Helper Methods

  1.Unobtrusive Ajax URL and Ajax Helper Methods,布布扣,bubuko.com