How to display two columns in Mvc WebGrid with one object
I am new to MVC
and I want to display username in two columns on WebGrid
as shown below.
The web grid is currently displaying data in the format below.
I bind mine WebGrid
to List<string>
, the list contains the username.
My controller
public ActionResult Index()
{
List<string> userList = new List<string>();
userList.Add("User1");
userList.Add("User2");
userList.Add("User3");
userList.Add("User4");
return View(userList);
}
My Cshtml
@using (Html.BeginForm())
{
var grid = new WebGrid(Model);
@grid.GetHtml(columns: grid.Columns(grid.Column(format: (item) => item)));
}
Your desired output is not good for webgrid use. Here is the logic to generate a table for mvc razor view using a simple loop:
@model List<string>
<table >
@{
for (int i = 1; i <= Model.Count; i++)
{
if (i % 2 != 0)
{
@:<tr >
}
<td style="border:solid;">
@Model[i - 1]
</td>
if (i % 2 == 0)
{
@:</tr>
}
}
}
</table>
I added CSS styling style="border:solid;"
to show the border of all table cells. You can customize it according to your needs.
This code creates the table below:
source to share