helper实现隐藏前台特效

简介: helper实现隐藏前台特效

想实现下面的功能:如下图所示


679140-20151209115153324-363881934.png

点击已结束按钮,使上面的红色跳转到已结束活动按钮上面,本来前台代码里面是使用了一个action来实现的,但是我改了点东西,使跳转不了。


前台代码

<ul class="nav nav-tabs">
        <li class="active">
             <a href="#tab_1" data-toggle="tab">
                 4 Columns
             </a>
        </li>
        <li>
             <a href="#tab_2" data-toggle="tab">
                 3 Columns
             </a>
       </li>
       <li>
             <a href="#tab_3" data-toggle="tab">
                 2 Columns
             </a>
          </li>
   </ul>



这里要实现那个功能就必须将li标签中class=”active”放到下面的li中。但是我想在前台让用户来点击,来使颜色变化。


经过和好友的讨论,可以使用@helper来实现。


1:首先在视图中定义个变量currentText,让其等于ViewBag.Text,这个我们可以在控制器中传递过来。


@{
  string currentText=Viewbag.Text;
}



2:在控制器中,我们观察看点击传到Controller中的是参数,我们判断参数来往View中传递不同的ViewBag.Text.我这里是根据传递的状态参数来变化的。


if (model.ActivityState == ActivityState.正在进行)
{
    ViewBag.Text = "active";
}
else
{
    ViewBag.Text = "activeEnd";
}



3:在View中写好要替代的代码。


@helper MenuItem(string currentText, string allowText)
 {
     @Html.Raw(currentText == allowText ? "active" : "")
 }

这里是使用了@helper的功能,直接定义了个方法,里面有两个参数,


currentText,allowText.第一个我们从控制器里面进行传递。第二个我们在要使用的地方直接写死,比如我这个要在

  • 里面直接写死就行。

  • <ul class="nav nav-tabs">
        <li class="@MenuItem(currentText,"active")">
            <a href="@Url.Action("Index", "Activity", new { id=Model.Id,ActivityState=ActivityState.正在进行})">
                正在进行活动
            </a>
        </li>
        <li class="@MenuItem(currentText,"activeEnd")">
            <a href="@Url.Action("Index", "Activity", new { id = Model.Id, ActivityState = ActivityState.已结束 })">
                已结束活动
            </a>
        </li>
    </ul>



    4:其实就是相当于调用了我们在前台定义的方法,直接传递参数,然后再方法里面进行了三元表达式的判断。


    效果:

    679140-20151209115154715-199156427.png679140-20151209115156199-1009872916.png

    目录
    相关文章
    |
    2月前
    |
    JavaScript
    如何使用JS控制指定页面大小开启全屏和退出全屏
    如何使用JS控制指定页面大小开启全屏和退出全屏
    31 0
    |
    8月前
    |
    JavaScript 小程序
    小程序js控制图片属性隐藏
    小程序js控制图片属性隐藏
    34 0
    |
    8月前
    uniapp解决首页subNvue,hide方法关闭不了问题
    uniapp解决首页subNvue,hide方法关闭不了问题
    |
    2月前
    |
    移动开发 JavaScript 前端开发
    用js来实现页面全屏和退出全屏的功能
    用js来实现页面全屏和退出全屏的功能
    |
    8月前
    解决layer弹框加载时闪白屏功能
    解决layer弹框加载时闪白屏功能
    48 1
    |
    10月前
    |
    JavaScript
    js手机端长按选中文字执行事件
    js手机端长按选中文字执行事件
    |
    11月前
    |
    JavaScript
    js全屏功能和取消全屏功能
    js全屏功能和取消全屏功能
    106 0
    |
    11月前
    |
    JavaScript 定位技术 API
    vue加载地图,在tab切换到其他页面再切换回来的时候,地图不显示了
    vue加载地图,在tab切换到其他页面再切换回来的时候,地图不显示了
    836 0
    |
    Android开发
    加载loading对话框的功能(不退出沉浸式效果)
    加载loading对话框的功能(不退出沉浸式效果)
    62 0