时间戳

首页 > 解决方案 > 我如何告诉 ajax 选择从列表中单击的项目

javascript - 我如何告诉 ajax 选择从列表中单击的项目

问题描述

我试图列出假期中的人，当我单击“Data de Regresso”链接时，我想计算他们的返回日期。我设法做到了，但是当我单击列表中的任何按钮时，它总是传递列表中的第一个 ID，而不是我单击的项目的 ID。我对此有点陌生。我真的很感激任何帮助。我使用 asp.net 框架 MVC 5。

这是查看代码：

<div class="col-4">
    <div class="card">
        <div class="card-header text-white" style="background-color: #4d4d4f;">
            Férias
        </div>
        <div class="card-body">
            <table class="table">
                <thead>
                    <tr>
                        <td>Nome</td>
                        <td></td>
                    </tr>
                </thead>
                <tbody>
                    @if (Model.PessoasDFVM.Count == 0)
                    {
                        <tr>
                            Ninguém de férias.
                        </tr>
                    }
                    else
                    {
                        foreach (PortalInternoBBG.Web.Models.HomePage.PessoaDFVM pessoaDeFerias in Model.PessoasDFVM)
                        {
                            <tr>
                                <td>@pessoaDeFerias.Nome</td>
                                <td>
                                    <div id="ResponseDiv">
                                        <a href="#" onclick="GetDataDeRetorno('@pessoaDeFerias.IDstring')">
                                            Data de Regresso
                                        </a>
                                    </div>
                                </td>
                            </tr>
                        }
                    }
                </tbody>
            </table>
        </div>
    </div>

和ajax函数：

    function GetDataDeRetorno(id) {
        var stringID = id;
        $.ajax({
            url: urlCalculaDataDeRetorno,
            data: { "id": stringID },
            type: "POST",
            success: function (data) {
                $('#ResponseDiv').replaceWith("<div>" + data + "</div>");
            },
            failure: function (response) {
                alert(response.responseText);
            },
            error: function (response) {
                alert(response.responseText);
            }
        });
    }

标签： javascriptasp.netajaxrazor

解决方案

附加具有唯一 ID 的 div 类，以便您可以在它的帮助下更改 ajax 响应中的 div 数据。

请在 html 中更改以下代码。

<div class="ResponseDiv_@pessoaDeFerias.IDstring">
   <a href="#" onclick="GetDataDeRetorno('@pessoaDeFerias.IDstring')">
   Data de Regresso
   </a>
</div>

并使用以下代码成功实现 ajax

success: function (data) {
                $('.ResponseDiv_' +stringID).replaceWith("<div>" + data + "</div>");
            }

推荐阅读