使用 asp.net mvc 将 html foreach 循环数据转换为 webgrid
Convert html foreach loop data to webgrid using asp.net mvc
下面html table是用两个循环条件填充的,同样我想用两个循环条件填充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();
显示以下错误。
您在问题中包含的异常正在发生,因为您没有将 WebGrid 绑定到数据源。您似乎也没有会吐出 table 的代码,所以如果这也是一个问题,那么这就可以解释为什么您看不到 table 的任何输出。
如果您想使用 WebGrid
来显示您的数据,如果您先简化您的对象,您将有更容易的时间。我认为您正在使用的结构对它来说太 complex/disconnected 并且使这个问题比它应该的要复杂得多。
看起来您正在使用类似以下内容的结构:
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> { "0", "0", "0", "0" },
storedTotalPaid = new List<string> { "0", "1", "0", "[=12=]" },
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>)
))
下面html table是用两个循环条件填充的,同样我想用两个循环条件填充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();
显示以下错误。
您在问题中包含的异常正在发生,因为您没有将 WebGrid 绑定到数据源。您似乎也没有会吐出 table 的代码,所以如果这也是一个问题,那么这就可以解释为什么您看不到 table 的任何输出。
如果您想使用 WebGrid
来显示您的数据,如果您先简化您的对象,您将有更容易的时间。我认为您正在使用的结构对它来说太 complex/disconnected 并且使这个问题比它应该的要复杂得多。
看起来您正在使用类似以下内容的结构:
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> { "0", "0", "0", "0" },
storedTotalPaid = new List<string> { "0", "1", "0", "[=12=]" },
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>)
))