ASP.Net core razor - 遍歷 HTML 表，如何用逗號分隔值並發送到 JavaScript 函數

Question

我正在使用帶有剃刀頁面的 ASP.Net 核心。

我有一個 html 表格，並使用 razor 語法循環這個 HTML 表格中的類對象，如下面的代碼。

現在我想在循環表時獲取值，通過循環保存/連接逗號分隔的值，並將其作為變量發送到 JavaScript 函數。 此保存/連接並將其作為變量發送到 JavaScript 函數部分我不知道該怎么做。 任何幫助將不勝感激。

 <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

您可以嘗試使用隱藏輸入來保存變量。這里是一個演示：

<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（點擊按鈕getData時， function getData() ）：

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

結果：

Answer 2

另一種方法是從您的 PageModel 或 Controller 進行連接。

例如這里是我的雇員模型：

public class EmployeesModel : PageModel
{
    public string EmployeeCommaSeperatedValues { get; set; }
    public List<Employee> EmployeeDetails { get; set; }

    public EmployeesModel()
    {
        EmployeeDetails = new List<Employee>();
        EmployeeDetails.Add(new Employee { name = "John", age = 35 });
        EmployeeDetails.Add(new Employee { name = "Jane", age = 32 });
    }

    public void OnGet()
    {
        if (EmployeeDetails != null)
        {
            foreach (Employee emp in EmployeeDetails)
            {
                if (!string.IsNullOrEmpty(EmployeeCommaSeperatedValues))
                {
                    EmployeeCommaSeperatedValues += ",";
                }
                EmployeeCommaSeperatedValues += $"{emp.name},{emp.age}";
            }
        }
    }
}

我已將屬性EmployeeCommaSeperatedValues添加到模型中。 在OnGet方法中，我運行foreach並將值存儲在EmployeeCommaSeperatedValues 。

由於此屬性在我的 PageModel 中，我可以從視圖中訪問它。

@page
@model dltLater.Pages.EmployeesModel
@using dltLater.Models
@{
}

<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 (Employee emp in Model.EmployeeDetails)
                {
                    <tr>
                        <td style="width: 30%">@emp.name</td>
                        <td style="width: 70%">@emp.age</td>
                    </tr>
                }
            </tbody>
        </table>
    }
</div>

<script type="text/javascript">
    function jsFunctionCall(commaSeperatedValues) {
        console.log(commaSeperatedValues);
    }

    jsFunctionCall("@Model.EmployeeCommaSeperatedValues");
</script>