如何在 Nonfactors/MVC6 网格中渲染自定义 HTML

Question

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

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

我想做的是使用 MVC6 网格 (Grid) 和此自定义复选框 (HTML)

Answer 1

使用MVC6 Grid添加列时，可以使用

RenderedAs()

和

Html.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之前，请确保您已经安装了它。

Answer 2

将 RenderedAs() 与 Encoded(false) 一起使用：

     columns.Add(m => m.IsSelected).Titled("Selected")     
      .RenderedAs(Model.SelectedName.Contains(model.Name) ? 
        $"<input type=\"checkbox\" checked />"
        $"<input type=\"checkbox\" />"
      ).Encoded(false);