如何在KendoUI Tabstrip中访问KendoUI Grid选择的行哈希模板（KendoUI）值

Question

我正在使用kendoUI详细信息视图模板，如图像

所示

当我点击每一行时，它会打开一个标签条并显示存储在ViewData中的所有数据，例如

主网格代码如下所示

@(Html.Kendo().Grid<EnvironmentPOCO>()
      .Name("Grid")
      .Columns(columns =>
      {
          //columns.Bound(d => d.EnvironmentID).Visible(false);
          columns.Bound(d => d.EnvironmentName).Width(200).Title("Environment Name");
          columns.ForeignKey(d => d.EnvironmentTypeID, (List<EnvironmentTypePOCO>)ViewData["EnvironmentType"], "EnvironmentTypeID", "EnvironmentTypeCode").Width(150).Title("Environment Code").EditorTemplateName("_EnvironmentCodeDropDown");
          columns.ForeignKey(d => d.ServerID, (List<ServerPOCO>)ViewData["MyServers"], "ServerID", "ServerDetailsProperty").Width(300).Title("Server Details").EditorTemplateName("_ServerDropDown");
          columns.ForeignKey(d => d.ProjectID, (List<SynergyProjectPOCO>)ViewData["MySynergyProjects"], "ProjectID", "ProjectDetailsProperty").Width(400).Title("Project Details").EditorTemplateName("_ProjectNameDropDown");
          columns.Command(d =>
          {
              d.Edit();
              d.Destroy();

          }).Width(200).Title("Action");
      }

      )

      .ToolBar(tools => tools.Create())
      .Sortable()
      .Pageable()
      .Filterable()
      .Navigatable()
      .Sortable(sortable => sortable.AllowUnsort(false))
       .ClientDetailTemplateId("template")
      .HtmlAttributes(new { style = "height:430px;" })
      .Events(events => events.DataBound("dataBound"))

      .DataSource(dataSource => dataSource
        .Ajax()
            .Model(model =>
            {
                model.Id(m => m.EnvironmentID);

            })

            .Read(read => read.Url(ViewBag.ApiBaseUrl).Type(HttpVerbs.Get))
            .Create(create => create.Url(ViewBag.ApiBaseUrl).Type(HttpVerbs.Post))
            .Update(update => update.Url(ViewBag.ApiBaseUrl).Type(HttpVerbs.Put))
            .Destroy(destroy => destroy.Url(ViewBag.ApiBaseUrl).Type(HttpVerbs.Delete))
      )

)

我有一个viewdata，其中包含我要在标签条中显示的所有详细信息，但我想要的是它应该只显示与所选行 ServerID ....相关的数据应该是if if for for循环，例如if（//在网格 ServerID == viewdata ServerID 上方显示该行视图数据）。但我不知道如何访问标签中的上述网格值以及如何在cshtml razor引擎中使用if。 在Tabstrip代码中查看“if check is not working”如下所示

<script id="template" type="text/kendo-tmpl">
   @(Html.Kendo().TabStrip()
            .Name("Logins")
            .SelectedIndex(0)
            .Animation(animation => animation.Open(open => open.Fade(FadeDirection.In)))
            .Items(items =>
            {
                items.Add().Text("Contact Information").Content(@<div>
                                <ul>
                                @for (var i = 0; i < viewDataServer.Count; i++)
                                { //How to get the Top Grid ServerID value here in **if**
                                   @if("#=ServerID"==viewDataServer[i].ServerID.ToString())//#=ServerID should be the selected main grid serveridvalue
                                {
                                <li><label>LoginID:</label>@viewDataServer[i].LoginID.ToString()</li>
                                <li><label>ServerID:</label>@viewDataServer[i].ServerID.ToString()</li>
                                <li><label>UserID:</label>@viewDataServer[i].UserID.ToString()</li>
                                <li><label>Password:</label>@viewDataServer[i].passwd.ToString()</li>
                                }
                                }
                                </ul>
                            </div>);
            })
            .ToClientTemplate())
</script>

Answer 1

如果其他人有这个问题，这里是解决方案。 Grid的详细信息模板是客户端模板，这意味着必须从客户端管理所有取决于主行的内容自定义。目前，TabStrip使用服务器端逻辑，该逻辑依赖于仅在客户端上可用的参数（ServerID），这就是服务器逻辑无法按预期工作的原因。

您需要通过Ajax请求填充TabStrip，该请求将传递ServerID

items.Add().Text("Contact Information")
    .LoadContentFrom(Url.Content("~/controller/action/?ServerID=#=ServerID#"));

http://demos.telerik.com/aspnet-mvc/tabstrip/ajax

对于需要手动编码的更高级自定义，您可以使用Grid的detailInit事件，如下所示：

http://demos.telerik.com/kendo-ui/grid/detailtemplate