0

自从从 .net 转到 .Net Core 后，我不得不寻找 WebGrid 替代品，这让我找到了 NonFactors MVC6 网格。我已经对 all if 的工作原理有了基本的了解，现在我正在尝试了解如何使用“@helper”函数在表格中显示可重用的 HTML。

以前在 .Net 中 @helper 允许定义客户 HTML，然后在 WebGrid 中使用它，例如The Helper Function和 webgrid Webgrid。现在我目前正在学习如何在 Razor Pages 中执行相同的功能，而我目前处于死胡同。

我想做的是使用带有这个自定义复选框（HTML）的 MVC6 网格（ Grid ）

4

1 回答 1

0

使用 MVC6 Grid 添加列时，可以使用RenderedAs()andHtml.Raw()方法添加复选框。像这样的代码：

模型：

public class Person
{
    public int Id { get; set; }
    public string Name { get; set; }
    public string Surname { get; set; }
    public string MaritalStatus { get; set; }
    public int Age { get; set; }
    public DateTime Birthday { get; set; }
    public bool IsWorking { get; set; }
    public bool IsSelected { get; set; }
}

public class PersonViewModel
{
    public List<Person> Persons { get; set; }
    public List<string> SelectedName { get; set; }
}

控制器：

public IActionResult Index3()
{
    //Initial data.
    var personvm = new PersonViewModel()
    {
        Persons = new List<Person>()
        {
            new Person() { Id = 1, Name = "Joe", Surname = "Crosswave", MaritalStatus = "Married", Age = 32, Birthday = DateTime.Now, IsWorking = false },
            new Person() { Id = 2, Name = "Merry", Surname = "Lisel", MaritalStatus = "Widowed", Age = 42, Birthday = DateTime.Now, IsWorking = false },
            new Person() { Id = 3, Name = "Henry", Surname = "Crux", MaritalStatus = "Single", Age = 29, Birthday = DateTime.Now, IsWorking = true },
            new Person() { Id = 4, Name = "Cody", Surname = "Jurut", MaritalStatus = "", Age = 49, Birthday = DateTime.Now, IsWorking = false },
            new Person() { Id = 5, Name = "Simon", Surname = "Scranton", MaritalStatus = "Single", Age = 34, Birthday = DateTime.Now, IsWorking = false },
            new Person() { Id = 6, Name = "Leena", Surname = "Laurent", MaritalStatus = "Divorced", Age = 19, Birthday = DateTime.Now, IsWorking = false },
            new Person() { Id = 7, Name = "Ode", Surname = "Cosmides", MaritalStatus = "Married", Age = 54, Birthday = DateTime.Now, IsWorking = true },
            new Person() { Id = 8, Name = "Nicky", Surname = "Cassel", MaritalStatus = "Married", Age = 32, Birthday = DateTime.Now, IsWorking = true }
        },
        SelectedName = new List<string>() { "Merry", "Henry", "Leena", "Nicky" }
    };
    return View(personvm);
}

查看：检查最后一列。

@model PersonViewModel
@(Html
    .Grid(Model.Persons)
    .Build(columns =>
    {
        columns.Add(model => Html.CheckBox("Check_" + model.Id)).Titled(Html.CheckBox("CheckAll"));
        columns.Add().RenderedAs((model, row) => row + 1).Titled("#").Css("text-center");

        columns.Add(model => model.Name).Titled("Name");
        columns.Add(model => model.Surname).Titled("Surname");
        columns.Add(model => model.MaritalStatus).Titled("Marital status");

        columns.Add(model => model.Age).Titled("Age");
        columns.Add(model => model.Birthday).Titled("Birthday").Formatted("{0:d}");
        
        columns.Add(model => model.IsWorking).Titled("Employed").RenderedAs(model => model.IsWorking == true ? "Employed" : "Unemployed");

        columns.Add(model => model.IsSelected).Titled("Selected")
        .RenderedAs(model => Model.SelectedName.Contains(model.Name) ?
        Html.Raw("<input type='checkbox' name='Input.SelectedAccessRightsIds' value='"+ model.Id + "' checked />")
        : Html.Raw("<input type='checkbox' name='Input.SelectedAccessRightsIds' value='" + model.Id + "' />"));
    })
)

输出如下：

在此处输入图像描述

参考：MVC6 网格格式化

[注意] 在使用 MVC6 Grid 之前，请确保您已经安装了它。

于 2021-06-07T03:18:35.463 回答