ASP.Net core razor - looping through HTML table, how to comma separate the values and sent to JavaScript function

Question

I am using ASP.Net core with razor pages.

I have a table in html, and using razor syntax looping the class object in this HTML table, as code below.

Now I want to get the values while looping the table, save / concatenate with comma separated the values through the looping and send it as a variable to a JavaScript function. This save/ concatenate and send it as a variable to a JavaScript function part I am not sure how to do. Any help would be grateful.

 <div>
            @if (Model.EmployeeDetails != null)
            {
                <table id="EmpDetail" class="table table-bordered">
                    <thead>
                        <tr>
                            <th style="width: 30%">Name</th>
                            <th style="width: 70%">Age</th>
                        </tr>
                    </thead>
                    <tbody>
                        @foreach (DTO.Employee emp in Model.EmployeeDetails)
                        {
                            <tr>
                                <td style="width: 30%">@emp.name</td> 
// Here I need to concatenate with comma separation to a variable 
and after the looping ends send to javascript function
                                <td style="width: 70%">@emp.age</td>
                            </tr>
                        }
                    </tbody>
                </table>
            }
        </div>

<script type="text/javascript">jsFunctionCall("variableCommaSeperatedValues");</script> // here is the JavaScript 
function call with paramter conatianing comma separated values from above 
``````````

Answer 1

You can try to use a hidden input to save the variable.Here is a demo:

<div>
            @if (Model.EmployeeDetails != null)
            {
                <table id="EmpDetail" class="table table-bordered">
                    <thead>
                        <tr>
                            <th style="width: 30%">Name</th>
                            <th style="width: 70%">Age</th>
                        </tr>
                    </thead>
                    <tbody>
                        @{ string variable = "";}
                        @foreach (DTO.Employee emp in Model.EmployeeDetails)
                        {
                            <tr>
                                <td style="width: 30%">@emp.name</td> 
// Here I need to concatenate with comma separation to a variable 
and after the looping ends send to javascript function
                                <td style="width: 70%">@emp.age</td>
                            </tr>
                            if (variable != "")
                               variable += ",";
                            variable += @emp.name + "," + @emp.age;
                        }
                    </tbody>
                </table>
                <input id="details" hidden  value="@variable"/>
            }
        </div>
        <button onclick="getData()">getData</button>

js(when click button getData,function getData() will be called):

function getData() {
            alert($("#details").val());
        }

result: