helper实现隐藏前台特效

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

点击已结束按钮，使上面的红色跳转到已结束活动按钮上面，本来前台代码里面是使用了一个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.第一个我们从控制器里面进行传递。第二个我们在要使用的地方直接写死，比如我这个要在<li>里面直接写死就行。

<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：其实就是相当于调用了我们在前台定义的方法，直接传递参数，然后再方法里面进行了三元表达式的判断。

效果：

转载于:https://my.oschina.net/Andyahui/blog/611608