kendo-ui - Kendo UI / MVC - 使用onclick在标签页中打开菜单项而不是调用Action？

Question

我有一个剑道 UI 菜单：

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

我不想用一个动作加载新页面，而是调用一个javascript函数onclick。我怎样才能做到这一点？我应该使用 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" });
}))