JQuery Mobile 和 ASP.NET MVC 导航栏按钮活动状态不起作用答案

【问题标题】：JQuery Mobile and ASP.NET MVC navbar button active state not workingJQuery Mobile 和 ASP.NET MVC 导航栏按钮活动状态不起作用
【发布时间】：2012-10-16 19:38:25
【问题描述】：

 <div data-role="navbar">
        <ul>
            <li><a id="navBtnThirty" href="@Url.Action("View", "VesselLogs", new { id = @ViewContext.ViewData["VesselGID"], ShowDays = 30})" class="navbarbtn ui-btn-active ui-state-persist">30 Days</a></li>
            <li><a id="navBtnSixty"  href="@Url.Action("View", "VesselLogs", new { id = @ViewContext.ViewData["VesselGID"], ShowDays = 60 })" class="navbarbtn" >60 Days</a></li>
            <li><a id="navBtnNinty" href="@Url.Action("View", "VesselLogs", new { id = @ViewContext.ViewData["VesselGID"], ShowDays = 90 })" class="navbarbtn" >90 Days</a></li>
            <li><a id="navBtnAll" href="@Url.Action("View", "VesselLogs", new { id = @ViewContext.ViewData["VesselGID"], ShowDays = -1 })" class="navbarbtn"  >All Days</a></li>
        </ul>
    </div>

第一次加载页面时，活动按钮正确显示。单击其中一个链接后，在操作完成之前不会设置活动按钮，我再次单击该按钮。

【问题讨论】：

对我来说看起来是硬编码的，请在操作中使用一些逻辑以确定在视图加载时应该将哪个设置为活动状态。

标签： jquery asp.net-mvc jquery-mobile

【解决方案1】：

字符串语法在我看来是错误的。我敢打赌有一些编译错误。在你的href属性标签中，去掉里面的双引号，换成单引号。

<div data-role="navbar">
    <ul>
        <li><a id="navBtnThirty" href="@Url.Action('View', 'VesselLogs', new { id = @ViewContext.ViewData['VesselGID'], ShowDays = 30})" class="navbarbtn ui-btn-active ui-state-persist">30 Days</a></li>
        <li><a id="navBtnSixty"  href="@Url.Action('View', 'VesselLogs', new { id = @ViewContext.ViewData['VesselGID'], ShowDays = 60 })" class="navbarbtn" >60 Days</a></li>
        <li><a id="navBtnNinty" href="@Url.Action('View', 'VesselLogs', new { id = @ViewContext.ViewData['VesselGID'], ShowDays = 90 })" class="navbarbtn" >90 Days</a></li>
        <li><a id="navBtnAll" href="@Url.Action('View', 'VesselLogs', new { id = @ViewContext.ViewData['VesselGID'], ShowDays = -1 })" class="navbarbtn"  >All Days</a></li>
    </ul>
</div>

编辑：

完全是我的错。我没有想到你的href中有剃刀语法。现在才注意到'@'符号。

【讨论】：

不行，页面这样写完全不行。

【解决方案2】：

下面的代码解决了这个问题，请务必更改 jquery 移动事件以针对您的特定设置绑定它。

    $(document).bind('pageshow', 
    function () {
        var days = @ViewContext.ViewData["ShowLogs"];
        $('.navbarbtn').removeClass("ui-btn-active");
        if (days == 30) {
            $('#navBtnThirty').addClass("ui-btn-active");
        } else if (days == 60) {
            $('#navBtnSixty').addClass("ui-btn-active");
        } else if (days == 90) {
            $('#navBtnNinty').addClass("ui-btn-active");
        } else if (days == -1) {
            $('#navBtnAll').addClass("ui-btn-active");
        }
    });
</script>

【讨论】：