How to obtain the number of rows of data in a table tag through C # code ?

929Free 601 Reputation points
2025-04-23T16:42:42.12+00:00

Hello, I want to obtain the number of rows of data in the table tag through C # code, but, However, I couldn't find how to bind table DOM elements. Can you teach me? Thank you

test.razor :

@page "/test"

<h3>Test</h3>

<table>
    <thead>
        <tr>
            <th scope="col">First Name</th>
            <th scope="col">Last Name</th>
            <th scope="col">Product Name</th>
            <th scope="col">Quantity</th>
            <th scope="col">Price</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>Lars</td>
            <td>Vileid</td>
            <td>Caffe Espresso</td>
            <td>14</td>
            <td>Low</td>
        </tr>
        <tr>
            <td>Petra</td>
            <td>Davolio</td>
            <td>Caffe Latte</td>
            <td>10</td>
            <td>High</td>
        </tr>
    </tbody>
</table>

@code {  

}

From the above code, it can be seen that there are 2 rows of data in the table tag at this time, How many rows of data do I want to obtain through C #. thanks

Blazor Training
Blazor Training
Blazor: A free and open-source web framework that enables developers to create web apps using C# and HTML being developed by Microsoft.Training: Instruction to develop new skills.
31 questions
0 comments No comments
{count} votes

Accepted answer
  1. Bruce (SqlWork.com) 75,051 Reputation points
    2025-04-23T17:08:29.89+00:00

    razor is a template engine, not a component model. its just a string. once rendered in the browser, you can use jsinterop to access the dom (assuming you are coding in blazor).

    if you want access the table row data from c#, then change the template to use an object array:

    @code {  
      var data = new[]
      {
        new {
            FirstName = "Lars",
            LastName = "Vileid",
            Product = "Caffe Espresso",
            Quantity = "Low",
            Price = "Low"
        },
        new {
            FirstName = "Petra",
            LastName = "Davolio",
            Product = "Caffe Latte",
            Quantity = 10,
            Price = "High"
        },
      };
    }
    <table>
        <thead>
            <tr>
                <th scope="col">First Name</th>
                <th scope="col">Last Name</th>
                <th scope="col">Product Name</th>
                <th scope="col">Quantity</th>
                <th scope="col">Price</th>
            </tr>
        </thead>
        <tbody>
        @foreach(var row in data) {
            <tr>
                <td>@FirstName</td>
                <td>@LastName</td>
                <td>@Product</td>
                <td>@Quantity</td>
                <td>@Price</td>
            </tr>
        }
        </tbody>
    </table>
    
    1 person found this answer helpful.
    0 comments No comments

1 additional answer

Sort by: Most helpful
  1. Deleted

    This answer has been deleted due to a violation of our Code of Conduct. The answer was manually reported or identified through automated detection before action was taken. Please refer to our Code of Conduct for more information.


    Comments have been turned off. Learn more

Your answer

Answers can be marked as Accepted Answers by the question author, which helps users to know the answer solved the author's problem.