Question

我有一个Kendo UI菜单：

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

而不是使用Action加载新页面我想调用一个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" });
}))

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

4 个答案: