ASP.NET MVC中使用C#向控制器传递Id参数失效的问题咨询

存在的问题 #

• HTML规范问题：循环生成的按钮重复使用了相同的id="btnSave"，id在页面中必须全局唯一，导致jQuery选择器无法正确匹配点击的目标按钮
• 数据绑定缺失：没有将每条数据对应的Id存储到按钮上，JS无法获取到需要传递的Id参数
• 脚本调用逻辑错误：定义了PassToContoller函数但没有在页面中调用，点击事件从未被绑定到按钮上
• 逻辑冗余：如果需求是跳转至ListCoach页面传递Id，使用AJAX完全多余，直接拼接跳转链接即可实现

修复方案 #

1. 优先选择无AJAX的简单方案（推荐） #

直接修改视图中a标签的跳转链接，拼接Id参数即可，无需编写JS代码：

<div class="container">
    <div class="row">
        @foreach (var item in Model)
        {
            <div class="col-md-4">
                <div class="card" style="width: 18rem;">
                    <img src="~/Content/no_foto.png" class="card-img-top" alt="...">
                    <div class="card-body">
                        <h5 class="card-title">@item.Name</h5>
                        <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
                        <div class="textButton">
                            <!-- 直接拼接Id到跳转链接，点击即可正常传递参数到控制器 -->
                            <a href="~/TrainingType/ListCoach?id=@item.Id" class="btn btn-primary">查看教练信息</a>
                        </div> 
                    </div>
                </div>
            </div>
        }
    </div>
</div>

2. 必须使用AJAX的修复方案 #

如果确实需要异步提交再跳转，按如下方式修改：

第一步修改视图代码

将重复id替换为class，使用data-*属性存储每条数据的Id：

<div class="container">
    <div class="row">
        @foreach (var item in Model)
        {
            <div class="col-md-4">
                <div class="card" style="width: 18rem;">
                    <img src="~/Content/no_foto.png" class="card-img-top" alt="...">
                    <div class="card-body">
                        <h5 class="card-title">@item.Name</h5>
                        <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
                        <div class="textButton">
                            <button class="btn btn-primary btn-save" data-id="@item.Id">提交</button>
                        </div> 
                    </div>
                </div>
            </div>
        }
    </div>
</div>
<script src="@Url.Content("~/scripts/ManagerAccount.js")" type="text/javascript"></script>

第二步修改JS代码

删除原来的PassToContoller函数，直接绑定按钮点击事件：

$(function(){
    // 绑定所有提交按钮的点击事件
    $(".btn-save").click(function () {
        // 获取当前按钮绑定的Id
        let targetId = $(this).data("id");
        $.ajax({
            type: "Get",
            url: '/TrainingType/ListCoach',
            data: { id: targetId },
            success: function (res) {
                // 若需要渲染ListCoach返回的视图，替换当前页面内容即可
                // document.body.innerHTML = res;
                window.location.href = '/appUser/ManageAccount';
            },
            error: function () {
                $("#loader").fadeOut("slow");
                console.log("error1");
            }
        });
    });
})

内容的提问来源于stack exchange，提问作者Boris