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()
        )

    }
 }

以下代码使用＆lt; \ table＆gt;而不是Html.Kendo（）。网格，但我无法使用kendo网格而不是表格来重新创建它。任何人都可以指出我可能出错的地方吗？

具体来说，这是aspnet core mvc。

MODEL：

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>

<强> PartialView：

@(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网格

1 个答案: