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

Question

User135423268 posted

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

Answer 1

User-1545767719 posted

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

Answer 2

User135423268 posted

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

Answer 3

User1535942433 posted

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

Answer 4

User135423268 posted

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

Answer 5

User-2054057000 posted

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