[英]How to render custom HTML in Nonfactors/MVC6 grid
Since moving on from .net to.Net Core, Ive had to look for a WebGrid Replacement, which lead me to NonFactors MVC6 grid.自从从 .net 转到 .Net Core 后,我不得不寻找 WebGrid 替代品,这导致我使用 NonFactors MVC6 网格。 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.
我已经对 all if 的工作原理有了基本的了解,现在我正在尝试了解如何使用“@helper”function 在表格中显示可重复使用的 HTML。
Previously in.Net @helper allowed for defining customer HTML then using it in WebGrid, like so The Helper Function and the webgrid Webgrid .以前在.Net @helper 允许定义客户 HTML 然后在 WebGrid 中使用它,就像Helper Function和 webgrid Webgrid 一样。 Now im currently learning how to do the same functionality in Razor Pages, and im currently at a dead end.
现在我目前正在学习如何在 Razor 页面中执行相同的功能,而我目前处于死胡同。
What I would Like to do, is using the MVC6 grid ( Grid ) with this custom checkbox ( HTML )我想做的是使用带有此自定义复选框( HTML )的 MVC6 网格( Grid )
When using the MVC6 Grid to add column, you could use the RenderedAs()
and Html.Raw()
method to add the checkbox.当使用 MVC6 Grid 添加列时,您可以使用
RenderedAs()
和Html.Raw()
方法添加复选框。 Code like this:像这样的代码:
Model: 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: 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: output如下:
Reference: MVC6 Grid Formatting参考: MVC6 网格格式化
[Note] Before using MVC6 Grid, please make sure you have installed it . [注意] 在使用 MVC6 Grid 之前,请确保您已经安装了它。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.