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 .