如何在非因子/MVC6网格中呈现自定义HTML

Question

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

以前在.Net @helper中允许定义客户超文本标记语言，然后在WebGrid中使用它，就像The Helper Function和webgrid Webgrid。现在我正在学习如何在Razor Pages中实现同样的功能，而我目前正处于死胡同。

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

Answer 1

使用MVC6网格添加列时，可以使用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 Grid Formatting

注意:在使用MVC6网格之前，请确保您安装了installed it。