使用asp.net mvc将html foreach循环数据转换为webgrid

Posted 2023-02-16

【中文标题】使用asp.net mvc将html foreach循环数据转换为webgrid

【英文标题】：Convert html foreach loop data to webgrid using asp.net mvc

【发布时间】：2021-09-03 03:14:18

【问题描述】：

下面的 html 表格使用两个循环条件填充，同样我想使用两个循环条件填充 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>

我尝试使用以下代码填充网络网格中的一个字段。

@
      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"));

        
    

当我在这一行的代码行完成后点击调试模式时

var grid2 = new WebGrid();

显示以下错误。

【问题讨论】：

你能解释一下什么是“不适合我”吗？

赏金不会让你的问题有答案。想想它在完全陌生的人眼中的样子往往会更有成效。您仍然没有澄清“不为我工作”。调试器中的错误不会解决它，调试器可能会显示运行时不会发生的各种错误。相关的是当您运行代码时会发生什么，以及它如何偏离应该发生的情况。

@mohdmazharkhan 在问这个问题之前，您是否对如何使用 WebGrid 进行过任何类型的研究？这似乎是XY problem。

实际的错误信息是什么。这些是我们需要帮助诊断问题的细节。显示的图像没有提供任何有用的信息。

@MaciejLos OMG，仅此而已吗？如果只有 OP 显示 runtime 错误而不是调试器屏幕截图。真是浪费时间和代表。

【参考方案1】：

您在问题中包含的异常正在发生，因为您尚未将 WebGrid 绑定到数据源。您似乎也没有会吐出表格的代码，因此这可以解释为什么如果这也是一个问题，您将看不到表格的任何输出。

如果您想使用WebGrid 来显示您的数据，那么如果您先简化您的对象，您将会轻松很多。我认为您正在使用的结构过于复杂/脱节，这使问题变得比应有的复杂得多。

看起来你正在使用这样的结构：

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 期待一个更像这样的扁平对象：

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; 

我创建了一个与您所描述的结构相匹配的数据集（尽管 IMO 将它们解析为行而不是来自原始源的列比仅将其转换为显示更有意义）：

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

您可以通过执行您已经在执行的相同样式的嵌套循环来获得扁平数据模型：

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

然后使用更合适的简单视图逻辑显示它：

@
    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>)
))