How to render custom HTML in Nonfactors/MVC6 grid

Question

Since moving on from .net to .Net Core, Ive had to look for a WebGrid Replacement, which lead me to NonFactors MVC6 grid. I have gotten all the basic understanding of how all if works, now I am trying to understand how to use "@helper" function to display reusable HTML in the table.

Previously in .Net @helper allowed for defining customer HTML then using it in WebGrid, like so The Helper Function and the webgrid Webgrid. Now im currently learning how to do the same functionality in Razor Pages, and im currently at a dead end.

What I would Like to do, is using the MVC6 grid (Grid) with this custom checkbox (HTML)

Answer 1

When using the MVC6 Grid to add column, you could use the RenderedAs() and Html.Raw() method to add the checkbox. Code like this:

Model:

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; }
}

Controller:

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);
}

View: check the last column.

@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 + "' />"));
    })
)

The output as below:

Reference: MVC6 Grid Formatting

[Note] Before using MVC6 Grid, please make sure you have installed it.