Asp.net mvc 剑道面板MVC-试图通过点击菜单项打开弹出窗口_Asp.net Mvc_Kendo Ui_Telerik Mvc_Kendo Panelbar_Panelbar

Asp.net mvc 剑道面板MVC-试图通过点击菜单项打开弹出窗口

asp.net-mvc kendo-ui

Asp.net mvc 剑道面板MVC-试图通过点击菜单项打开弹出窗口,asp.net-mvc,kendo-ui,telerik-mvc,kendo-panelbar,panelbar,Asp.net Mvc,Kendo Ui,Telerik Mvc,Kendo Panelbar,Panelbar,在我的程序中，我们有剑道面板栏，它显示菜单，当用户点击任何菜单子项时，我想打开一个对话框/弹出窗口 <div> @(Html.Kendo().PanelBar() .Name("panelbar") .ExpandMode(PanelBarExpandMode.Single) .Events(events => events .Select(@<text> ReportController.onSele

在我的程序中，我们有剑道面板栏，它显示菜单，当用户点击任何菜单子项时，我想打开一个对话框/弹出窗口

    <div>
        @(Html.Kendo().PanelBar()
    .Name("panelbar")
    .ExpandMode(PanelBarExpandMode.Single)
    .Events(events => events
        .Select(@<text> ReportController.onSelect </text>))
    .Items(panelbar =>
    {
        panelbar.Add().Text("Test1")
            .Expanded(true)
            .Items(Test1=>
            {
                workers.Add().Text("Sample1");
                workers.Add().Text("Sample2");
                workers.Add().Text("Sample3");
            });

        panelbar.Add().Text("Test2")
            .Items(Test2 =>
            {
                clients.Add().Text("Book1")
                    .Items(costings =>
                    {
                        costings.Add().Text("Page1");
                        costings.Add().Text("Page2");
                        costings.Add().Text("Page3");       
                    });

                clients.Add().Text("Book2");
            });
        panelbar.Add().Text("New Page").Enabled(false);
    })
        )
    </div>
<script type="text/javascript">
    $(document)
        .ready(function() {
            ReportController.init("#panelBar");
        });
</script>


@（Html.Kendo（）.PanelBar（））
.名称（“panelbar”）
.ExpandMode（PanelBarExpandMode.Single）
.Events（Events=>Events
.Select（@ReportController.onSelect））
.项目（面板栏=>
{
panelbar.Add（）.Text（“Test1”）
.扩展（真）
.Items（Test1=>
{
workers.Add（）.Text（“Sample1”）；
workers.Add（）.Text（“Sample2”）；
workers.Add（）.Text（“Sample3”）；
});
panelbar.Add（）.Text（“Test2”）
.Items（Test2=>
{
clients.Add（）.Text（“Book1”）
.项目（成本计算=>
{
成本计算。添加（）文本（“第1页”）；
成本计算。添加（）文本（“第2页”）；
成本计算。添加（）文本（“第3页”）；
});
clients.Add（）.Text（“Book2”）；
});
panelbar.Add（）.Text（“新页面”）.Enabled（false）；
})
)
$（文件）
.ready（函数（）{
ReportController.init（“#panelBar”）；
});

如果用户单击此处的Sample1，它将打开一个弹出窗口。我是剑道控制新手，如何实现这一点？


<!DOCTYPE html>
<html>
<head>
    <base href="http://demos.telerik.com/kendo-ui/panelbar/events">
    <style>
        html {
            font-size: 14px;
            font-family: Arial, Helvetica, sans-serif;
        }
    </style>
    <title></title>
    <link rel="stylesheet" href="//kendo.cdn.telerik.com/2016.2.714/styles/kendo.common-material.min.css" />
    <link rel="stylesheet" href="//kendo.cdn.telerik.com/2016.2.714/styles/kendo.material.min.css" />
    <link rel="stylesheet" href="//kendo.cdn.telerik.com/2016.2.714/styles/kendo.default.mobile.min.css" />

    <script src="//kendo.cdn.telerik.com/2016.2.714/js/jquery.min.js"></script>
    <script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.10.1/jquery-ui.min.js"></script>
    <script src="//kendo.cdn.telerik.com/2016.2.714/js/kendo.all.min.js"></script>
    <link rel="stylesheet" href="../content/shared/styles/examples-offline.css">
    <script src="../content/shared/js/console.js"></script>
</head>
<body>

    <div id="example">
        <div class="demo-section k-content">
            <ul id="panelbar">
                <li class="k-state-active">
                    Metallica - Master of Puppets 1986
                    <ul>
                        <li>Battery</li>
                        <li>Master of Puppets</li>
                        <li>The Thing That Should Not Be</li>
                        <li>Welcome Home (Sanitarium)</li>
                        <li>Disposable Heroes</li>
                        <li>Leper Messiah</li>
                        <li>Orion (Instrumental)</li>
                        <li>Damage, Inc.</li>
                    </ul>
                </li>
                <li>
                    Iron Maiden - Brave New World 2000
                    <ul>
                        <li>The Wicker Man</li>
                        <li>Ghost Of The Navigator</li>
                        <li>Brave New World</li>
                        <li>Blood Brothers</li>
                        <li>The Mercenary</li>
                        <li>Dream Of Mirrors</li>
                        <li>The Fallen Angel</li>
                        <li>The Nomad</li>
                        <li>Out Of The Silent Planet</li>
                        <li>The Thin Line Between Love And Hate</li>
                    </ul>
                </li>
                <li>
                    Empty Item
                </li>
                <li>
                    Ajax Item
                    <div></div>
                </li>
                <li>
                    Error Item
                    <div></div>
                </li>
            </ul>
        </div>
        <div id="console" class="box" style="display:none">
            <h4>Console log</h4>
            <div class="console"></div>
        </div>
    </div>
    <script>
        $(function () {
            $("#console").dialog({
                autoOpen: false,
                show: {
                    effect: "blind",
                    duration: 1000
                },
                hide: {
                    effect: "explode",
                    duration: 1000
                }
            });
        });

        function onSelect(e) {
            var theDialog = $("#console").dialog("open");
            theDialog.dialog("open");

            kendoConsole.log("Select: " + $(e.item).find("> .k-link").text());
        }

        function onExpand(e) {
            kendoConsole.log("Expand: " + $(e.item).find("> .k-link").text());
        }

        function onCollapse(e) {
            kendoConsole.log("Collapse: " + $(e.item).find("> .k-link").text());
        }

        function onActivate(e) {
            kendoConsole.log("Activate: " + $(e.item).find("> .k-link").text());
        }

        function onContentLoad(e) {
            kendoConsole.log("Content loaded in <b>" + $(e.item).find("> .k-link").text() +
                             "</b> and starts with <b>" + $(e.contentElement).text().substr(0, 20) + "...</b>");
        }

        function onError(e) {
            kendoConsole.error("Loading failed with " + e.xhr.statusText + " " + e.xhr.status);
        }

        $("#panelbar").kendoPanelBar({
            expandMode: "single",
            select: onSelect,
            expand: onExpand,
            collapse: onCollapse,
            activate: onActivate,
            contentLoad: onContentLoad,
            error: onError,
            contentUrls: [, , , "../content/web/panelbar/ajax/ajaxContent1.html", "error.html"]
        });
    </script>

</body>
</html>

html{
字体大小：14px；
字体系列：Arial、Helvetica、无衬线字体；
}


Metallica-木偶大师1986

电池组
木偶大师
不该发生的事情
欢迎回家（疗养院）
一次性英雄
麻风病弥赛亚
猎户座（仪器）
损害公司



铁娘子-勇敢的新世界2000

柳条工
航海家的幽灵
勇敢的新世界
亲兄弟
雇佣兵
镜子之梦
堕落天使
游牧民族
走出寂静的星球
爱与恨之间的细线



空项


Ajax项


错误项


控制台日志
$（函数（）{
$（“#控制台”）。对话框({
自动打开：错误，
展示：{
效果：“盲”，
持续时间：1000
},
隐藏：{
效果：“爆炸”，
持续时间：1000
}
});
});
功能选择（e）{
变量对话框=$（“控制台”）。对话框（“打开”）；
对话框（“打开”）；
log（“选择：”+$（e.item）.find（“>.k-link”）.text（））；
}
函数onExpand（e）{
log（“展开：”+$（e.item）.find（“>.k-link”）.text（））；
}
函数onCollapse（e）{
log（“Collapse:”+$（e.item）.find（“>.k-link”）.text（））；
}
激活函数（e）{
log（“激活：”+$（e.item）.find（“>.k-link”）.text（））；
}
内容加载函数（e）{
kendoConsole.log（“内容加载到”+$（e.item.find（“>.k-link”）.text（）中）+
并以“+$（e.contentElement）.text（）.substr（0,20）+”开头；
}
函数onError（e）{
kendoConsole.error（“加载失败，出现“+e.xhr.statusText+”+e.xhr.status”）；
}
$（“#panelbar”）。肯多帕内巴尔({
扩展模式：“单一”，
选择：onSelect，
扩展：onExpand，
崩塌，
激活：onActivate，
contentLoad:onContentLoad，
错误：onError，
contentURL:[，，。。。/content/web/panelbar/ajax/ajaxContent1.html”，“error.html”]
});

在上面的示例中，您可以看到，在OnSelect事件中，我打开了一个Div作为对话框（模型），我在上面的函数中初始化了该对话框

希望对你有帮助