使用 MVC Razor @foreach 在视图中显示多个 kendo 网格

Question

是否可以使用 MVC Razor @foreach 创建多个 kendo 网格？

我尝试了以下方法，但视图中没有任何渲染，看起来数据是正确的，因为我可以在脚本中看到正确的 JSON 数据，但没有显示网格

@using Kendo.Mvc.UI
@model ProjectMVC.Models.IndexViewModel

@{
    ViewData["Heading"] = "Index";
}

<h2>Index</h2>

<p>
    <a asp-action="Create">Create New</a>
</p>
@{
    int gridIndex = 0;
    foreach (var Heading in Model.Headings)
    {
        gridIndex++;
        var Groups = Model.Groups.Where(x => x.Group == Heading);
        tblGroups Group = Model.Groups.Where(x => x.Group == Heading).First();



        @(Html.Kendo().Grid(Groups)
                .Name($"grid{gridIndex}")
                .Columns(columns =>
                {
                    columns.Bound(c => c.Date).Width(140);
                    columns.Bound(c => c.User).Width(190);
                    columns.Bound(c => c.Category);
                    columns.Bound(c => c.Group).Width(110);
                })
                .Pageable()
                .Filterable()
                .Scrollable()
        )

    }
 }

以下代码使用 <\table> 而不是 Html.Kendo().Grid 确实有效，但我无法使用 kendo 网格而不是 [= 来重新创建它33=]秒。谁能指出我可能哪里出错了？

具体来说这是aspnet core mvc。

型号：

public class tblGroups
{

    [Key]
    public int ID { get; set; }
    public DateTime Date { get; set; }
    public string User { get; set; }
    public string Category { get; set; }
    public string Group { get; set; } //<<Want separate tables split by this field
}

public class IndexViewModel
{
    public List<tblGroups> Groups { get; set; }
    public List<string> Headings { get; set; }

    Public IndexViewModel()
    {
        Groups = new List<tblGroups>();
        Headings = new List<string>();
    }
}

查看：

@model MVC.Models.IndexViewModel

@{
    ViewData["Heading"] = "Index";
}

<h2>Index</h2>

<p>
    <a asp-action="Create">Create New</a>
</p>
@{
    foreach (var Heading in Model.Headings)

        var Groups = Model.Groups.Where(x => x.Group == Heading);
        tblGroups Group = Model.Groups.First(x => x.Prodcut == Heading);

        <text>
        <table class="table">
            <thead>
                <tr>
                    <th>
                        @Html.DisplayNameFor(model => Group.Date)
                    </th>
                    <th>
                        @Html.DisplayNameFor(model => Group.User)
                    </th>
                    <th>
                        @Html.DisplayNameFor(model => Group.Category)
                    </th>
                    <th>
                        @Html.DisplayNameFor(model => Group.Group)
                    </th>
                    <th></th>
                </tr>
            </thead>
            <tbody>
                @foreach (var item in Groups)
                {
                    <tr>
                            <td>
                                @Html.DisplayFor(modelItem => item.Date)
                            </td>
                            <td>
                                @Html.DisplayFor(modelItem => item.User)
                            </td>
                            <td>
                                @Html.DisplayFor(modelItem => item.Category)
                            </td>
                            <td>
                                @Html.DisplayFor(modelItem => item.Group)
                            </td>
                        <td>
                        </td>
                    </tr>
                }
            </tbody>
        </table>
        </text>

    }
 }

控制器：

public class tblGroupsController : Controller
{
    public async Task<IActionResult> Index()
    {
        var allGroups = await _context.tblGroups.ToListAsync();
        var Headings = allGroups.Select(x => x.Group).Distinct();

        var model = new Models.IndexViewModel()
        {
            Groups = allGroups,
            Headings = Headings
        };

        return View(model);
    }
}

Answer 1

为了多次使用同一个局部视图，网格 ID 应该是唯一的，因此在局部视图数据中传递 ID 是一种可能的解决方案。我通过传递一些参数并通过这些参数检索不同的数据，在 PartialView 中多次使用相同的网格，如下所示：

查看：

<div class="row">
    <div class="col-lg-6">
        <div class="panel panel-primary">
            <div class="panel-heading">
                <h3 class="panel-title" id="panel-title">New Issues<a href="#panel-title"></a></h3>
            </div>
            <div>
                @Html.Partial("_List", new ViewDataDictionary { { "name", "grid-all-issues" }, { "style", "border:none; height:622px;" }, { "pageSize", "25" } })
            </div>
        </div>
    </div>

    <div class="col-lg-6">
        <div class="row">
            <div class="col-lg-12">
                <div class="panel panel-primary">
                    <div class="panel-heading">
                        <h3 class="panel-title" id="panel-title">Active Issues<a href="#panel-title"></a></h3>
                    </div>
                    <div>
                        @Html.Partial("_List", new ViewDataDictionary { { "name", "grid-waiting-issues" }, { "style", "border:none; height:273px;" }, { "pageSize", "10" } })
                    </div>
                </div>
            </div>
            <div class="col-lg-12 top-10">
                <div class="panel panel-primary">
                    <div class="panel-heading">
                        <h3 class="panel-title" id="panel-title">Watched Issues<a href="#panel-title"></a></h3>
                    </div>
                    <div>
                        @Html.Partial("_List", new ViewDataDictionary { { "name", "grid-watched-issues" }, { "style", "border:none; height:273px;" }, { "pageSize", "10" } })
                    </div>
                </div>

            </div>
        </div>
    </div>
</div>

部分视图：

@(Html.Kendo().Grid<Models.ViewModel>()
      .HtmlAttributes(new { style = @ViewData["style"].ToString() })
      .Name(@ViewData["name"].ToString())
      //...
      .Columns(columns =>
      {          
          columns.Bound(m => m.Key).Title("Issue No");        
      })          
      .DataSource(dataSource => dataSource
          .Ajax()
          .PageSize(Convert.ToInt32(@ViewData["pageSize"]))
      )
)

更新： 您可以使用以下方法传递列参数。

用于将参数传递给 ASP.NET MVC 中的 PartialView：

@Html.Partial("~/PathToYourView.cshtml", null, new ViewDataDictionary { { "VariableName", "some value" } })

并检索传入的值：

@{
    string valuePassedIn = this.ViewData.ContainsKey("VariableName") ? 
        this.ViewData["VariableName"].ToString() : string.Empty;
}

希望这对您有所帮助...

使用 MVC Razor @foreach 在视图中显示多个 kendo 网格

Multiple kendo grids in view using MVC Razor @foreach

asp.net-mvc

kendo-grid

kendo-asp.net-mvc