Convert html foreach loop data to webgrid using asp.net mvc

Below html table is filling using two loop condition, and same i want using two loop conditions to fill Webgrid

<table class="awe-ajaxlist table_dashboard">
    <tr class="tbl_header">
        <td>
            Payor
        </td>
        <td>
            Check #
        </td>
        <td>
            Billed Amount
        </td>
        <td>
            Paid Amount
        </td>
        <td>
            Check Date
        </td>
        <td>Download File</td>
    </tr>
    @foreach (var i in (List<MyDME.Data.Model.ERNFileRequestDTO>)ViewBag.lst)
    {
        for (int j = 0; j < i.Parse835Details.storedChkNo.Count; j++)
        {

            <tr>
                <td>
                    @i.Parse835Details.storedPayorName[j]
                </td>
                <td>
                    @i.Parse835Details.storedChkNo[j]
                </td>
                <td>
                    @i.Parse835Details.storedTotalBilled[j]

                </td>
                <td>
                    @i.Parse835Details.storedTotalPaid[j]

                </td>
                <td>
                     @(i.Parse835Details.storedChkDate[j].Substring(4, 2) + "/" + i.Parse835Details.storedChkDate[j].Substring(6, 2) + "/" + i.Parse835Details.storedChkDate[j].Substring(0, 4))

                </td>
                <td>
                    <a href='/PatientManagement/DownloadUploadedDocument?fileName=@Html.Raw(i.path)'>Download</a>

                </td>
            </tr>


        }

    }
            </table>

I have tried to fill one field in web grid by using below code.

@{
      var grid2 = new WebGrid();
    List<WebGridColumn> cols = new List<WebGridColumn>();
    foreach (var i in (List<MyDME.Data.Model.ERNFileRequestDTO>)ViewBag.lst)
    {
        for (int j = 0; j < i.Parse835Details.storedChkNo.Count; j++)
        {
            cols.Add(grid2.Column("Payor", format:@<text> <span class="display-mode">@i.Parse835Details.storedPayorName[j]</span> </text>, style: "col1Width"));

        }
    }

}

when I am click debugging mode after code line complete on this line

var grid2 = new WebGrid();

the following error is showing.

Answer

The exceptions you’ve included in your question are happening because you have not bound the WebGrid to a data source. You also don’t appear to have code that would spit out the table, so that would explain why you wouldn’t see any output from the table if that’s also an issue.

If you want to use WebGrid to display your data, you are going to have a much easier time if you simplify your objects first. I think the structure you’re working with is too complex/disconnected for it and made this a much more complicated problem than it should be.

It looks like you’re working with a structure something along these lines:

public class ERNFileRequestDTO
{
    public ParsedRecords Parse835Details { get; set; }
}

public class ParsedRecords
{
    public List<string> storedPayorName { get; set; }
    public List<string> storedChkNo { get; set; }
    public List<string> storedTotalBilled { get; set; }
    public List<string> storedTotalPaid { get; set; }
    public List<string> storedChkDate { get; set; }
    public List<string> path { get; set; }
}

WebGrid is expecting a flat object more like this:

public class ConsolidatedRecordForDisplay
{
    public string storedPayorName { get; set; }
    public string storedChkNo { get; set; }
    public string storedTotalBilled { get; set; }
    public string storedTotalPaid { get; set; }
    public string storedChkDate { get; set; }
    public string path { get; set; }
}

I made up a dataset that matches the structure you’ve described (though IMO parsing these as rows instead of columns from the original source would make more sense than transforming it just for display):

var raw = new List<ERNFileRequestDTO>
{
    new ERNFileRequestDTO {
        Parse835Details = new ParsedRecords {
            storedPayorName = new List<string> {"bob", "jane", "john", "jill"},
            storedChkNo = new List<string> {"1","2","3","4" },
            storedChkDate = new List<string> { "20210625","20210624","20210623","20210622" },
            storedTotalBilled = new List<string> { "$500", "$600", "$700", "$800" },
            storedTotalPaid = new List<string> { "$500", "$501", "$700", "$0" },
            path = new List<string>{"file1.pdf", "file2.pdf", "file3.pdf", "file4.pdf"}
        }
    }
};

You can get to the flattened data model by doing the same style of nested looping you’re already doing:

ViewBag.lst = new List<ConsolidatedRecordForDisplay>();
foreach(var i in raw)
{
    for (var j = 0; j < i.Parse835Details.storedChkNo.Count; j++)
    {
        ViewBag.lst.Add(new ConsolidatedRecordForDisplay
        {
            storedChkDate = i.Parse835Details.storedChkDate[j],
            storedChkNo = i.Parse835Details.storedChkNo[j],
            storedPayorName = i.Parse835Details.storedPayorName[j],
            storedTotalBilled = i.Parse835Details.storedTotalBilled[j],
            storedTotalPaid = i.Parse835Details.storedTotalPaid[j],
            path = i.Parse835Details.path[j]
        });
    }
}

And then display it using more appropriately simple view logic like this:

@{
    var grid2 = new WebGrid(ViewBag.lst);
}
@grid2.GetHtml(
    columns: grid2.Columns(
                grid2.Column("storedPayorName", "Payor"),
                grid2.Column("storedChkNo", "Check #"),
                grid2.Column("storedTotalBilled", "Billed Amount"),
                grid2.Column("storedTotalPaid", "Paid Amount"),
                grid2.Column("storedChkDate", "Check Date", @<text>@item.storedChkDate.Substring(4, 2)/@item.storedChkDate.Substring(6, 2)/@item.storedChkDate.Substring(0, 4)</text>),
                grid2.Column("path", "Download File", @<text><a href='/PatientManagement/DownloadUploadedDocument?fileName=@Html.Raw(@item.path)'>Download</a></text>)
))