Kendo UI/MVC-使用onclick在Tab页中打开菜单项，而不是调用Action

Question

我有一个剑道UI菜单：

 @(Html.Kendo().Menu()
                .Name("menu")
                .Items(menu =>
                {
                    menu.Add().Text("About").Action("Index", "Home");
}))

我想调用一个javascript函数onclick，而不是用Action加载新页面。我该怎么做？我应该使用HtmlAttributes属性吗？

此外，我使用的是月光主题，它有白色菜单项文本用于非操作，橙色文本用于操作菜单项。对于将调用javascript函数的菜单项，我如何将其保持为橙色文本？通过设置一种样式，或者还有其他方法吗？

我的示例代码已打开http://www.eeedee.com如果我没有很好地解释自己的话。

感谢

Answer 1

您可以使用andrewdudek84答案（这种方法非常棒）。

还有两个解决方案（黑客方式）：

解决方案1

@(Html.Kendo().Menu()
    .Name("menu")
    .Items(menu =>
    {
        menu.Add().Text("About").Url("javascript:void(0)")
        .HtmlAttributes(new { 
            @class= "helloWorld"
        });
}))
<script>
$('.helloWorld').click(function(){
    //put your code here
});
</script>

解决方案2

@(Html.Kendo().Menu()
    .Name("menu")
    .Items(menu =>
    {
        menu.Add().Text("About").Action("Index", "Home")
        .HtmlAttributes(new { 
            @class= "helloWorld"
        });
}))
<script>
$('.helloWorld').click(function(e){
    e.preventDefault(); // Cancel the default action of your click.
    //put your code here    
});
</script>

Answer 2

我建议这样做：

<ul id="menu">
    <li id="menuItem1">Menu Item 1</li>
</ul>
<script type="text/javascript">
    $(document).ready(function() {
        $("#menu").kendoMenu({
            select: menuItemSelect,
            theme: "Moonlight"
        });
    });
    function menuItemSelect(e){
        alert(e.item.id);
    }
</script>

Answer 3

您也可以使用"LinkHtmlAttributes"来，嗯，向生成的链接添加属性：

@(Html.Kendo().Menu()
                .Name("menu")
                .Items(menu =>
                {
                    menu.Add()
                        .Text("About")
                        .Action("Index", "Home")
                        .LinkHtmlAttributes(new { id = "myLink", onclick = "return OnMyLinkClick();" });
                }))

Answer 4

稍微偏离主题，但对于任何想要从菜单中调用操作方法，但在新选项卡中打开目标页面的人来说…

@(Html.Kendo().Menu()
.Name("menu")
.Items(menu =>
{
    menu.Add()
        .Text("About")
        .Action("Index", "Home")
        .LinkHtmlAttributes(new { target = "_blank" });
}))