Is there a way we can create table data dynamically in html?

I have to generate table dynamically in html using c# list

I generated HTML with dynamic data but need dynamic table in between. I was able to add dynamic data but not able to add dynamic table please help me with same.

//Below line will fetch html template from database
var template = (await _packItemsDataService.GetLayoutData(collectionSite))?.Payload;
//Below line will go to PopulateLetterTemplateWithDataForApplication method and add dynamic data into it
var templateData = await PopulateLetterTemplateWithDataForApplication(dispatchDetail);
//This is PopulateLetterTemplateWithDataForApplication method
private async Taskstring, object>> PopulateLetterTemplateWithDataForApplication(DispatchDetailResponse dispatchDetail)
{
return new Dictionary<string, object>()
{
{"siteFrom", dispatchDetail.DispatchDetail.FromSiteId},
{"siteShippedTo", dispatchDetail.DispatchDetail.ToSiteId},
{"dispatchDate", dispatchDetail.DispatchDetail.UpdatedOn},
{"numberOfContainers", dispatchDetail.DispatchDetail.ContainerDetails.Count},
{"OperatorName", dispatchDetail.DispatchDetail.Name},
{"courierName", dispatchDetail.DispatchDetail.CourierName},
{"containerDetails", dispatchDetail.DispatchDetail.ContainerDetails}
};
}
//Below Generate method will take template and template data and generate html template with dynamic data
var document = _templateGenerator.Generate(template, templateData);
public string Generate(string sourceTemplate, IDictionary<string, object> templateData){
var template = HandlebarsDotNet.Handlebars.Compile(sourceTemplate);
var builtFile = template(templateData);
return builtFile;
}
//My DTO's are
public class DispatchDetailResponse
{
public DispatchDetail DispatchDetail { get; set; }
public string Reason { get; set; }
}
public class DispatchDetail : Dispatch
{
public List ContainerDetails { get; set; }
public int DispatchLocationId { get; set; }
}
//Container details holds the list which I have to generate dynamically
public class ContainerDetail : Container
{
public List DispatchInfoStockItems { get; set;
}
}
public class DispatchInfoStockItem
{
public string DocumentType { get; set; }
public string DocumentNumber { get; set; }
public string ApplicantFirstName { get; set; }
public string ApplicantLastName { get; set; }
public StockItem StockItem { get; set; }
}

//HTML CODE

>
<html lang="en">
<div class="col-md-3 col-sm-6 form-group"> div>
<div class="col-md-3 col-sm-6 form-group"> div>
<div class="col-md-3 col-sm-6 form-group"> div>
<div class="col-md-3 col-sm-6 form-group"><label id="lblCardBodyNumber"
class="control-label" for="cardBodyNumber">Site
Fromlabel> : {{siteFrom}}
Site Shipped To: {{siteShippedTo}}div>
<div class="col-md-3 col-sm-6 form-group"> div>
<div class="col-md-3 col-sm-6 form-group">Number of containers:
{{numberOfContainers}} Dispatch Date: {{dispatchDate}}div>
<div class="col-md-3 col-sm-6 form-group"> div>
<div class="col-md-3 col-sm-6 form-group"> div>
<div class="col-md-3 col-sm-6 form-group">
<table style="height: 139px; border-color: black; width: 900px;"
border="2">
<tbody>
<tr style="height: 15px;">
<td style="width: 139px; height: 15px;">Continer Numbertd>
<td style="width: 119px; height: 15px;">Document Typetd>
<td style="width: 143px; height: 15px;">Document Numbertd>
<td style="width: 105px; height: 15px;">Applicant First Nametd>
<td style="width: 139px; height: 15px;">Applicant Last Nametd>
tr>
<tr style="height: 66px;">
<td style="width: 139px; height: 66px;"> td>
<td style="width: 119px; height: 66px;"> {{documentType}}td>
<td style="width: 143px; height: 66px;"> {{documentNumber}}td>
<td style="width: 105px; height: 66px;"> {{ApplicantFirstName}}td>
<td style="width: 139px; height: 66px;"> {{ApplicantLastName}}td>
tr>
tbody>
table>
div>
<div class="col-md-3 col-sm-6 form-group"> div>
<div class="col-md-3 col-sm-6 form-group"> Sending Operator:
{{OperatorName}}
Courier Name<label id="lblLocation" class="control-label"
for="locations">: {{courierName}} label>div>
<div class="col-md-3 col-sm-6 form-group"> div>
<div class="col-md-3 col-sm-6 form-group"><label id="lblStockNumber"
class="control-label" for="stockNumber"> Operator Sign:
Courier Sign:
label> div>
<div class="row">
<div class="col-md-3 form-group"> div>
div>
html>

Expected:

Dynamic data in html table using DispatchInfoStockItem list from ContainerDetail class.

please check html code in browser to get reference of the table which I want

1 Reply

Know the answer? Post it — somebody with the same question will find it here.

Gajendra Jangid7y ago
hello Gaurav

you can use below links:

https://www.c-sharpcorner.com/UploadFile/rahul4_saxena/showing-table-data-in-dynamically-created-table-in-Asp-Net-c/

https://www.aspsnippets.com/Articles/ASPNet-MVC-Pass-send-dynamically-added-HTML-Table-records-list-to-Controller.aspx

https://www.c-sharpcorner.com/article/pass-dynamically-added-html-table-records-list-to-controller/

https://www.aspsnippets.com/Articles/Display-DataTable-in-HTML-Table-in-ASPNet-using-C-and-VBNet.aspx