Post
Ask Question
Gaurav Kapahi

Gaurav Kapahi

  • NA
  • 182
  • 0

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

Mar 24 2019 1:49 PM
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.
  1. //Below line will fetch html template from database  
  2. var template = (await _packItemsDataService.GetLayoutData(collectionSite))?.Payload;  
  3. //Below line will go to PopulateLetterTemplateWithDataForApplication method and add dynamic data into it  
  4. var templateData = await PopulateLetterTemplateWithDataForApplication(dispatchDetail);  
  5. //This is PopulateLetterTemplateWithDataForApplication method  
  6. private async Task<Dictionary<string, object>> PopulateLetterTemplateWithDataForApplication(DispatchDetailResponse dispatchDetail)  
  7. {  
  8. return new Dictionary<string, object>()  
  9. {  
  10. {"siteFrom", dispatchDetail.DispatchDetail.FromSiteId},  
  11. {"siteShippedTo", dispatchDetail.DispatchDetail.ToSiteId},  
  12. {"dispatchDate", dispatchDetail.DispatchDetail.UpdatedOn},  
  13. {"numberOfContainers", dispatchDetail.DispatchDetail.ContainerDetails.Count},  
  14. {"OperatorName", dispatchDetail.DispatchDetail.Name},  
  15. {"courierName", dispatchDetail.DispatchDetail.CourierName},  
  16. {"containerDetails", dispatchDetail.DispatchDetail.ContainerDetails}  
  17. };  
  18. }  
  19. //Below Generate method will take template and template data and generate html template with dynamic data  
  20. var document = _templateGenerator.Generate(template, templateData);  
  21. public string Generate(string sourceTemplate, IDictionary<string, object> templateData){  
  22. var template = HandlebarsDotNet.Handlebars.Compile(sourceTemplate);  
  23. var builtFile = template(templateData);  
  24. return builtFile;  
  25. }  
  26. //My DTO's are  
  27. public class DispatchDetailResponse  
  28. {  
  29. public DispatchDetail DispatchDetail { get; set; }  
  30. public string Reason { get; set; }  
  31. }  
  32. public class DispatchDetail : Dispatch  
  33. {  
  34. public List<ContainerDetail> ContainerDetails { get; set; }  
  35. public int DispatchLocationId { get; set; }  
  36. }  
  37. //Container details holds the list which I have to generate dynamically  
  38. public class ContainerDetail : Container  
  39. {  
  40. public List<DispatchInfoStockItem> DispatchInfoStockItems { get; set;  
  41. }  
  42. }  
  43. public class DispatchInfoStockItem  
  44. {  
  45. public string DocumentType { get; set; }  
  46. public string DocumentNumber { get; set; }  
  47. public string ApplicantFirstName { get; set; }  
  48. public string ApplicantLastName { get; set; }  
  49. public StockItem StockItem { get; set; }  
  50. }  
//HTML CODE
  1. <!DOCTYPE html>  
  2. <html lang="en">  
  3. <div class="col-md-3 col-sm-6 form-group"> </div>  
  4. <div class="col-md-3 col-sm-6 form-group"> </div>  
  5. <div class="col-md-3 col-sm-6 form-group"> </div>  
  6. <div class="col-md-3 col-sm-6 form-group"><label id="lblCardBodyNumber"  
  7. class="control-label" for="cardBodyNumber">Site  
  8. From</label> :  {{siteFrom}}         
  9.                      
  10.      Site Shipped To: {{siteShippedTo}}</div>  
  11. <div class="col-md-3 col-sm-6 form-group"> </div>  
  12. <div class="col-md-3 col-sm-6 form-group">Number of containers:  
  13. {{numberOfContainers}} Dispatch Date: {{dispatchDate}}</div>  
  14. <div class="col-md-3 col-sm-6 form-group"> </div>  
  15. <div class="col-md-3 col-sm-6 form-group"> </div>  
  16. <div class="col-md-3 col-sm-6 form-group">  
  17. <table style="height: 139px; border-color: black; width: 900px;"  
  18. border="2">  
  19. <tbody>  
  20. <tr style="height: 15px;">  
  21. <td style="width: 139px; height: 15px;">Continer Number</td>  
  22. <td style="width: 119px; height: 15px;">Document Type</td>  
  23. <td style="width: 143px; height: 15px;">Document Number</td>  
  24. <td style="width: 105px; height: 15px;">Applicant First Name</td>  
  25. <td style="width: 139px; height: 15px;">Applicant Last Name</td>  
  26. </tr>  
  27. <tr style="height: 66px;">  
  28. <td style="width: 139px; height: 66px;"> </td>  
  29. <td style="width: 119px; height: 66px;"> {{documentType}}</td>  
  30. <td style="width: 143px; height: 66px;"> {{documentNumber}}</td>  
  31. <td style="width: 105px; height: 66px;"> {{ApplicantFirstName}}</td>  
  32. <td style="width: 139px; height: 66px;"> {{ApplicantLastName}}</td>  
  33. </tr>  
  34. </tbody>  
  35. </table>  
  36. </div>  
  37. <div class="col-md-3 col-sm-6 form-group"> </div>  
  38. <div class="col-md-3 col-sm-6 form-group"> Sending Operator:  
  39. {{OperatorName}}                 
  40.  Courier Name<label id="lblLocation" class="control-label"  
  41. for="locations">: {{courierName}} </label></div>  
  42. <div class="col-md-3 col-sm-6 form-group"> </div>  
  43. <div class="col-md-3 col-sm-6 form-group"><label id="lblStockNumber"  
  44. class="control-label" for="stockNumber"> Operator Sign:     
  45.                      
  46.                      
  47.               Courier Sign:   
  48. </label> </div>  
  49. <div class="row">  
  50. <div class="col-md-3 form-group"> </div>  
  51. </div>  
  52. </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

Answers (1)