單擊 html 元素時，如何將 html 元素 ID 作為局部變量存儲在 razor 頁面中

Question

所以我有一個我目前在視圖中顯示的國家/地區列表。

@model IEnumerable<CountryViewer.Models.CountryModel>

@{
    ViewData["Title"] = "Index";

}



<h1>Index</h1>

@*<p>
        <a asp-action="Create">Create New</a>
    </p>*@

<div class="container-fluid">
    <div class="row">

        <div class="col">
            <div class="form-group">
                <label for="exampleFormControlSelect1">Example select</label>
                <select class="form-control" id="exampleFormControlSelect1">
                    @foreach (var item in Model)
                    {

                        <option id="@item.Alpha3Code" >
                            @Html.DisplayFor(modelItem => item.Name)



                        </option>

                    }
                </select>
                <button type="submit" class="btn btn-primary" value="selectID">Submit</button>
            </div>



        </div>
        <div class="col">
            <div class="form-horizontal">
                <hr />
                <div class="form-group">
                    <table class="table table-responsive" style="width:400px">
                        <thead>

                            <tr>
                                <th>
                                    @Html.DisplayNameFor(model => model.Alpha3Code)
                                </th>
                                <th>
                                    @Html.DisplayNameFor(model => model.Name)
                                </th>
                                <th>
                                    @Html.DisplayNameFor(model => model.Population)
                                </th>
                                <th>
                                    @Html.DisplayNameFor(model => model.Flag)
                                </th>
                                <th>
                                    @Html.DisplayNameFor(model => model.Capital)
                                </th>
                                <th></th>
                            </tr>
                        </thead>
                        <tbody>
                            @foreach (var item in Model)
                            {

                                <tr>
                                    <td>
                                        @Html.DisplayFor(model => item.Alpha3Code)
                                    </td>
                                    <td>
                                        @Html.DisplayFor(modelItem => item.Name)
                                    </td>
                                    <td>
                                        @Html.DisplayFor(modelItem => item.Population)
                                    </td>
                                    <td>
                                        @Html.DisplayFor(modelItem => item.Flag)
                                    </td>
                                    <td>
                                        @Html.DisplayFor(modelItem => item.Capital)
                                    </td>

                                </tr>
                            }
                            </tbody>
                    </table>

                </div>

            </div>
        </div>
    </div>
</div>

當用戶選擇列表中的一個國家時，我想顯示該信息。 我想這樣做的方法是存儲單擊元素的 ID，然后運行 ​​foreach 循環來過濾並顯示信息。

 <tbody>
                            @foreach (var item in Model)
                            {
                                if (item.Alpha3Code == idselected)
                                {
                                <tr>
                                    <td>
                                        @Html.DisplayFor(model => item.Alpha3Code)
                                    </td>
                                    <td>
                                        @Html.DisplayFor(modelItem => item.Name)
                                    </td>
                                    <td>
                                        @Html.DisplayFor(modelItem => item.Population)
                                    </td>
                                    <td>
                                        @Html.DisplayFor(modelItem => item.Flag)
                                    </td>
                                    <td>
                                        @Html.DisplayFor(modelItem => item.Capital)
                                    </td>

                                </tr>
                                }
                            }
                            </tbody>

我該怎么做呢？ 還是有另一種更簡單的方法？ 我聽說過使用 ajax，但我不知道如何開始。 還有其他建議嗎？

Answer 1

最簡單的方法是在選擇中選擇項目時，進行重定向（例如： http://localhost:1234/yourpage/ {{selectedId}} 或http://localhost:1234/yourpage&selectedId= {{...} })。 然后用它來顯示選定的數據。

另一個更好的解決方案是，向 API 發送 ajax 請求，並接收 JSON 數據，然后使用 JavaScript 綁定這些數據。

如果您的項目列表很小/重量很輕，您甚至可以渲染所有項目並將數據保存在隱藏輸入或 js 變量中。 然后在選擇中選擇一個項目，只需過濾數據以顯示所選項目。