Как сохранить идентификатор элемента html в качестве локальной переменной на страницах бритвы при нажатии на элемент html

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>

Когда пользователь выбирает одну из стран в списке, я хочу отобразить эту информацию. Я подумал сделать это, чтобы сохранить идентификатор выбранного элемента, а затем запустить foreach l oop для фильтрации, а затем отобразить информацию.

 <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 = {{...}}). Затем используйте его для отображения выбранных данных.

Другое лучшее решение: выполните запрос ajax обратно к вашему API и получите данные JSON, затем свяжите эти данные, используя JavaScript.

Если ваш список элементов небольшой / легкий, вы можете даже отобразить все элементы и сохранить данные в скрытом вводе или в переменной js. Затем, выбрав элемент в вашем списке, просто отфильтруйте данные для отображения выбранного элемента.