Blazor - Insert Row with data on a HTML Table then read it when the submit button clicks RSS

• • Reply
  amendoza29

  Member

  51 Points

  208 Posts

  Blazor - Insert Row with data on a HTML Table then read it when the submit button clicks

  Jan 20, 2021 04:14 AM|amendoza29|LINK

  Good Day Everyone

  I want to insert a data on a html table  on Blazor then read it after , I know how to do this on ASP.NET Core MVC using jquery but I have no idea on how to do it on blazor

  here's my sample on jquery

    function AddDataToTable2(){
        var GetData1 = $('#txt1').val();
        var GetData2 = $('#txt2').val();
  
        var row = "";
        row += '<tr>'
            + '<td>' + GetData1 + '</td>'
            + '<td>' + GetData2 + '</td></tr>';
            $('#myTable tbody').append(row);
    }

  then I will read it using this jquery code (yes i'm saving the other fields together with the table data)

  function SaveAllData(){
  
      var GetFName = $('#txtfname').val();
      var GetLName = $('#txtlname').val();
  
      var FD = {FirstName: GetFName, LastName: GetLName}
      var TD = [];
  
      $('#myTable tr:not(:first)').each(function () {
          var tdlist = $('this').find("td");
  
          var GD1 = $(tdlist[0]).html();
          var GD2 = $(tdlist[1]).html();
  
          var item = {GetCol1: GD1, GetCol2:GD2}
          TD.push(item);
  
      });
  
      var tr = JSON.stringify({FD:FD, TD:TD});
  
      $.ajax({
          url:'MyService/SaveData',
          type:'POST',
          data: tr,
          contentType: 'application/json; charset=utf-8',
          dataType: 'json',
          success: function (response){
              alert("Saving Success!");
          },
          failure: function(response){
              alert(response.responseText);
          },
          error: function(response){
              alert(response.responseText);
          }
      });
  
  }

  how can I do the same thing with blazor, I can save the first name and last name text field, but for the table I have no idea, and I want to save them both at the same time, if anyone has done the same thing, kindly teach us ^^

  Thanks and regards

• • Reply
  SurferOnWww

  Member

  330 Points

  235 Posts

  Re: Blazor - Insert Row with data on a HTML Table then read it when the submit button clicks

  Jan 20, 2021 05:56 AM|SurferOnWww|LINK

  I ask you to close your previous thread first. Remember you did not even answer to the question in the previous thread as to which you use, Blazor Server or Blazor WASM.

  https://forums.asp.net/p/2173652/6329728.aspx?Blazor+How+to+Read+Connection+Strings+in+appsettings+json

• • Reply
  amendoza29

  Member

  51 Points

  208 Posts

  Re: Blazor - Insert Row with data on a HTML Table then read it when the submit button clicks

  Jan 20, 2021 07:19 AM|amendoza29|LINK

  My apologise, I just create a new thread without checking the my recent post, my apologise.

• • Reply
  yij sun

  Contributor

  3730 Points

  1431 Posts

  Re: Blazor - Insert Row with data on a HTML Table then read it when the submit button clicks

  Jan 21, 2021 03:00 AM|yij sun|LINK

  Hi amendoza29,

  Do you need blazor server or webassembly? Razor components provide data binding features via an HTML element attribute named @bind with a field, property, or Razor expression value.

  More details,you could refer to below article:

  https://docs.microsoft.com/en-us/aspnet/core/blazor/components/data-binding?view=aspnetcore-5.0

  https://forums.asp.net/t/2169928.aspx?Bulk+insert+into+table+In+Blazor

  Best regards,

  Yijing Sun

  .NET forums are moving to a new home on Microsoft Q&A, we encourage you to go to Microsoft Q&A for .NET for posting new questions and get involved today.
• • Reply
  amendoza29

  Member

  51 Points

  208 Posts

  Re: Blazor - Insert Row with data on a HTML Table then read it when the submit button clicks

  Jan 26, 2021 03:48 AM|amendoza29|LINK

  Good Day Everyone

  I have solve this using this solution

  I created first a Structure-Class

      public class TestTable
      {
          public string Column1 { get; set; }
          public string Column2 { get; set; }
  
          public string Column3 { get; set; }
  
          public string Column4 { get; set; }
      }

  Then on my razor page:

          @*Sample Table and Fields*@
  
          <label for="column-one" class="col-sm-2 col-form-label">
              Column 1
          </label>
          <div class="col-sm-10">
              <input type="text" id="column-one" class="form-control" placeholder="Column One" @bind="@TestTblField.Column1" />
          </div>
  
          <label for="column-two" class="col-sm-2 col-form-label">
              Column 2
          </label>
          <div class="col-sm-10">
              <input type="text" id="column-two" class="form-control" placeholder="Column Two" @bind="@TestTblField.Column2" />
          </div>
          <label for="column-three" class="col-sm-2 col-form-label">
              Column 3
          </label>
          <div class="col-sm-10">
              <input type="text" id="column-three" class="form-control" placeholder="Column Three" @bind="@TestTblField.Column3" />
          </div>
  
          @if (TestTbl == null)
          {
              <div class="spinner"></div>
          }
          else
          {
              <table class="table" id="myTable">
                  <thead>
                      <tr>
                          <th>Column 1</th>
                          <th>Column 2</th>
                          <th>Column 3</th>
                          <th></th>
                          <th></th>
                      </tr>
                  </thead>
                  <tbody>
                      
                      @foreach (var TestList in TestTbl)
                      {
  
                          
                      <tr @key="@TestList">
                          <td>@TestList.Column1</td>
                          <td>@TestList.Column2</td>
                          <td>@TestList.Column3</td>
                          <td><button @onclick="@(() => EditTable(TestList.Column1))">Edit</button></td>
                          <td><button @onclick="@(() => TestTbl.Remove(TestList))">Remove</button></td>
  
                      </tr>
                      }
                  </tbody>
              </table>
          }
  
  <button id="btn-addtable" class="btn btn-primary" @onclick="AddTable">Add Row</button>
  

          //Here's on the partial class
          public List<TestTable> TestTbl = new List<TestTable>();
          public TestTable TestTblField { get; set; } = new TestTable();
  
          private void AddTable()
          {
              
  
  
              TestTbl.Add(new TestTable()
              {
                  Column1 = TestTblField.Column1.ToString(),
                  Column2 = TestTblField.Column2.ToString(),
                  Column3 = TestTblField.Column3.ToString(),
                  
              });
  
              StateHasChanged();
          }

  As the TestTbl is bind on the HTML Table in Razor page, I can add rows and columns from the textfields, and put StateHasChanged();
  
  

• • Reply
  yogyogi

  Participant

  1253 Points

  936 Posts

  Re: Blazor - Insert Row with data on a HTML Table then read it when the submit button clicks

  Jan 27, 2021 06:07 AM|yogyogi|LINK

  In this scenario you can calls a JS code from Blazor. Then in the JS code you can do the insertion of row in the HTML Table. Kindly refer this tutorial - JS Interop – Working with JavaScript in Blazor

  Helping you always. Don't forget to click "Mark as Answer" on the post that helped you.
  ♠ ASP.NET Core Tutorials → Start from the Beginning and become an Expert in 30 days time ♠