Question

我正在使用左窗格和右窗格的kendo UI Splitter。在左侧窗格中，我有kendoui Panel栏，其中包含指向不同报告的链接。现在点击我试图通过使用iframe打开右窗格中的报告页面的任何链接。但由于某种原因，报告页面将在新窗口中打开。

从面板栏中的一个链接

中的示例锚标记

 <a class="right" target="reportDisplayPane" title="MyTitle" href="reports/params.aspx?rt=Basic Reports&rn=My Report">My Report</a>

MVC使用Kendo Ui Splitter，Kendo Ui Panel栏和I框架查看代码。

@(Html.Kendo().Splitter()  
      .Name("splitter")           
      .Orientation(Kendo.Mvc.UI.SplitterOrientation.Horizontal)
      .Panes(horizontalPanes =>
      {
          horizontalPanes.Add()
              .Size("20%")
              .HtmlAttributes(new { id = "left-pane", style = "height:100%;" })    
              .Collapsible(true)
              .Content(@<div class="pane-content">
                          <div id="navigation">    
                             @(Html.Kendo().PanelBar()
                                .Name("panelbar")
                                   .ExpandMode(Kendo.Mvc.UI.PanelBarExpandMode.Multiple)
                                   .HtmlAttributes(new { style = "width:100%;height:100%;" })
                                   .Items(panelbar =>
                                     {
                                        foreach (var category in Model.MyModel.Categories)
                                         {
                                           panelbar.Add().Text(category)
                                           .Items(reports =>
                                            {
                                             foreach (var report in Model.MyModel.Reports)
                                              {
                                                if (report.Category.Equals(category))
                                                 {
                                                    reports.Add().Text(report.NavigateURL).Encoded(false);   
                                                 }
                                               }
                                             });
                                         }
                                    })
                              )
                          </div>
                       </div>                      
                    );

          horizontalPanes.Add()
              .Size("80%")              
              .HtmlAttributes(new { id = "right-pane",style = "height:100%;"})
              .Collapsible(false)
              .Content(@<div class="pane-content">
                            <iframe id="reportDisplayPane" ></iframe> 

                        </div>);
      })



 Please suggest on what might be wrong here.

Answer 1

使用以下方式实现。

var onSelect = function (e) {          
            var iframeUrl = 'reports/maypage.aspx?rt=Myreports&rn=' + e.item.innerText;   
            $('#reportDisplayPane').attr('src', iframeUrl);
        };

        var panelBar = $("#panelbar").kendoPanelBar({
            select: onSelect
        });

Kendo Ui Splitter，Panel Bar和Iframe

1 个答案: