每个列表项的 PartialView

Question

我有一个项目列表，每一行都有一个编辑按钮，它应该打开一个包含要编辑的元素数据的局部视图。在我用来填充 tge 数据表的循环中，我还为每个行元素创建了部分视图。

当我点击按钮时，它总是打开第一个元素的局部视图，即使我按下第 N 个元素也是如此。

如何获取打开相应局部视图的代码？

代码：

<table class="table table-hover" id="tabela_rota">
    <thead>
        <tr>
            <th>

            </th>
            <th>
                Cliente
            </th>
            <th>
                Rota
            </th>
            <th>
                Distância Ideal
            </th>
            <th>
                Ativa
            </th>
            <th></th>
        </tr>
    </thead>
    <tbody>
        @foreach (var item in Model)
        {
            <partial>
                @{await Html.RenderPartialAsync("Edit", item);}
            </partial>

            <tr>
                <td width="15">
                </td>
                <td width="15%">
                    @Html.DisplayFor(modelItem => item.id_cliente)
                </td>
                <td width="25%">
                    @Html.DisplayFor(modelItem => item.nome)
                </td>
                <td width="15%">
                    @Html.DisplayFor(modelItem => item.distancia_ideal)
                </td>
                <td width="10%">
                    @Html.DisplayFor(modelItem => item.activa)
                </td>
                <td>
                    <button type="button" class="btn btn-outline-primary" onclick="openNavEdit()">
                        Editar
                    </button>
                    <button type="button" class="btn btn-outline-danger">Delete</button>
                </td>
            </tr>
        }
    </tbody>
</table>

JS函数：

function openNavEdit() {
    document.getElementById("mySidepanelEdit").style.width = "350px";
}

查看：

@model GestaoCircuitos.Models.Rota

@{
    ViewData["Title"] = "Editar";
}
<div id="mySidepanelEdit" class="sidepanel">
    <div id="top_title">
        <h6 id="nova_rota">Editar Rota</h6>
        <button class="closebtn" onclick="closeNavEdit()">&times;</button>
    </div>

    <div class="row form-row-rotas">
        <div class="col-12">
            <form asp-action="Edit" class="form-rotas">
                <div asp-validation-summary="ModelOnly" class="text-danger"></div>
                <input type="hidden" asp-for="id" />
                <div class="form-label-group">
                    <input id="nome" class="form-control" placeholder="Nome" />
                    <label asp-for="nome" class="control-label">Nome</label>
                    <span asp-validation-for="nome" class="text-danger"></span>
                </div>
                <div class="form-label-group">
                    <input type="text" asp-for="distancia_ideal" class="form-control" placeholder="Distância ideal" />
                    <label asp-for="distancia_ideal" class="control-label">Distância ideal</label>
                    <span asp-validation-for="distancia_ideal" class="text-danger"></span>
                </div>
                <div class="form-group form-check">
                    <label class="form-check-label">
                        <input class="form-check-input" asp-for="activa" /> Ativa
                    </label>
                </div>
                <div class="form-group">
                    <input type="submit" value="Editar" class="btn btn-primary" />
                </div>
            </form>
        </div>
    </div>
</div>


@section Scripts {
    @{await Html.RenderPartialAsync("_ValidationScriptsPartial");}
}

Answer 1

因为你是根据ID打开的。 ID 属性在整个文档中必须是唯一的。如果你 select 在一个 ID 上，你只会得到第一个元素。

您必须为每个编辑模式提供唯一 ID 或 class 到 select 的来源。试试这个：

@model GestaoCircuitos.Models.Rota

@{
    ViewData["Title"] = "Editar";
}
<div id="sidepanel-edit-@(item.id)" class=" sidepanel">
    <div id="top_title">
        <h6 id="nova_rota">Editar Rota</h6>
        <button class="closebtn" onclick="closeNavEdit(@(item.id))">&times;</button>
    </div>

    <div class="row form-row-rotas">
        <div class="col-12">
            <form asp-action="Edit" class="form-rotas">
                <div asp-validation-summary="ModelOnly" class="text-danger"></div>
                <input type="hidden" asp-for="id" />
                <div class="form-label-group">
                    <input id="nome" class="form-control" placeholder="Nome" />
                    <label asp-for="nome" class="control-label">Nome</label>
                    <span asp-validation-for="nome" class="text-danger"></span>
                </div>
                <div class="form-label-group">
                    <input type="text" asp-for="distancia_ideal" class="form-control" placeholder="Distância ideal" />
                    <label asp-for="distancia_ideal" class="control-label">Distância ideal</label>
                    <span asp-validation-for="distancia_ideal" class="text-danger"></span>
                </div>
                <div class="form-group form-check">
                    <label class="form-check-label">
                        <input class="form-check-input" asp-for="activa" /> Ativa
                    </label>
                </div>
                <div class="form-group">
                    <input type="submit" value="Editar" class="btn btn-primary" />
                </div>
            </form>
        </div>
    </div>
</div>


@section Scripts {
    @{await Html.RenderPartialAsync("_ValidationScriptsPartial");}
}

以上，我们为每个edit编辑表单添加了一个唯一的id。然后我们可以在主模板中引用那些唯一的id属性：

<table class="table table-hover" id="tabela_rota">
    <thead>
        <tr>
            <th>

            </th>
            <th>
                Cliente
            </th>
            <th>
                Rota
            </th>
            <th>
                Distância Ideal
            </th>
            <th>
                Ativa
            </th>
            <th></th>
        </tr>
    </thead>
    <tbody>
        @foreach (var item in Model)
        {
            <partial>
                @{await Html.RenderPartialAsync("Edit", item);}
            </partial>

            <tr>
                <td width="15">
                </td>
                <td width="15%">
                    @Html.DisplayFor(modelItem => item.id_cliente)
                </td>
                <td width="25%">
                    @Html.DisplayFor(modelItem => item.nome)
                </td>
                <td width="15%">
                    @Html.DisplayFor(modelItem => item.distancia_ideal)
                </td>
                <td width="10%">
                    @Html.DisplayFor(modelItem => item.activa)
                </td>
                <td>
                    <button type="button" class="btn btn-outline-primary" onclick="openNavEdit(@(item.id)">
                        Editar
                    </button>
                    <button type="button" class="btn btn-outline-danger">Delete</button>
                </td>
            </tr>
        }
    </tbody>
</table>

你的 Javascript 看起来像：

function openNavEdit(id) {
    document.getElementById("sidepanel-edit-" + id).style.width = "350px";
}
function closeNavEdit(id) {
    document.getElementById("sidepanel-edit-" + id).style.width = "0";
}

请注意，我假设您的模型具有 id 属性。

每个列表项的 PartialView

PartialView on each list items

partial-views

asp.net-core-3.1