如何将UserID传递给控制器并在模态框中显示用户详情

我已经通过以下代码将UserID传递至表格，现在点击View Details按钮后，希望在模态框中显示对应用户的详情。我考虑创建另一个存储过程来获取用户详情并展示在模态框中，但具体该如何实现？

编辑1：已将按钮修改为<a href="~/Views/RIRO/id=@user.UserID"

现有代码 #

视图（View） #

@foreach (var user in Model.RIROUsers) { 
    <tr> 
        <td class="text-center">@(user.FirstName + " " + user.LastName)</td> 
        <td>
            <a href="~/Views/RIRO/id=@user.UserID" class="btn btn-xs btn-primary" data-toggle="modal" data-target="#exampleModal" data-id="@user.UserID">View Details</a>
        </td> 
    </tr> 
}

模态框（Modal） #

<!-- Modal -->
<div class="modal fade" id="exampleModal" tabindex="-1">
    <div class="modal-dialog modal-lg">
        <div class="modal-content">
            <div class="modal-body">
                <div class="row">
                    <div class="col-md-10 col-md-offset-1">
                        <div class="form-group col-md-4 col-md-offset-2">
                            <label for="">* Address</label>
                            <input type="text" class="form-control input-sm" value="">
                            <label for="">* Birthday</label>
                            <input type="text" class="form-control input-sm" value="">
                            <label for="">* Contact</label>
                            <input type="text" class="form-control input-sm" value="">
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

控制器（Controller） #

public ActionResult Index() { 
    var vm = new RIROViewModel(); 
    vm.RIROUsers = new List<ResourceViewModel>(); 
    foreach (var user in db_RIRO.sp_GetAllRIRORoster()) { 
        vm.RIROUsers.Add(new ResourceViewModel() { 
            EID = user.EID, 
            FirstName = user.FirstName, 
            LastName = user.LastName, 
            EmployeeType = user.EmployeeType, 
            ProjectName = user.ProjectName, 
            JobTitle = user.JobTitle, 
            Level = user.CareerLevel, 
            ACNRollOn = user.HireDate, 
            ManagerName = user.Manager, 
            LeadName = user.Supervisor, 
            UserID = user.UserID 
        }); 
    } 
    return View(vm); 
}

咱们可以通过AJAX异步请求来实现，不用刷新页面就能获取并展示用户详情，具体步骤一步步来：

1. 先创建获取用户详情的存储过程 #

在数据库里新建一个存储过程，比如sp_GetUserDetailsByUserID，接收@UserID作为参数，返回该用户的地址、生日、联系方式等你需要展示的详情字段。

2. 添加用户详情的ViewModel #

新建一个UserDetailsViewModel类，用来存储从数据库拿到的用户详情数据：

public class UserDetailsViewModel
{
    public string Address { get; set; }
    public DateTime Birthday { get; set; }
    public string Contact { get; set; }
    // 这里可以根据需求添加其他需要展示的字段
}

3. 在控制器中新增获取详情的Action #

在你的控制器里加一个返回JSON数据的Action，用来调用存储过程并返回用户详情：

public JsonResult GetUserDetails(int userId)
{
    var userDetails = db_RIRO.sp_GetUserDetailsByUserID(userId).FirstOrDefault();
    if (userDetails == null)
    {
        return Json(new { success = false }, JsonRequestBehavior.AllowGet);
    }
    var vm = new UserDetailsViewModel()
    {
        Address = userDetails.Address,
        Birthday = userDetails.Birthday,
        Contact = userDetails.Contact
        // 把存储过程返回的其他字段也对应映射过来
    };
    return Json(new { success = true, data = vm }, JsonRequestBehavior.AllowGet);
}

4. 修改视图和模态框的交互逻辑 #

修正按钮的href属性 #

之前的按钮href有语法错误，改成#就行，因为我们用AJAX处理请求，不需要跳转页面：

<a href="#" class="btn btn-xs btn-primary" data-toggle="modal" data-target="#exampleModal" data-id="@user.UserID">View Details</a>

给模态框的输入框加ID（方便后续填充数据） #

修改模态框里的输入框，给每个输入框加上唯一ID：

<div class="form-group col-md-4 col-md-offset-2">
    <label for="userAddress">* Address</label>
    <input type="text" id="userAddress" class="form-control input-sm" value="">
    <label for="userBirthday">* Birthday</label>
    <input type="text" id="userBirthday" class="form-control input-sm" value="">
    <label for="userContact">* Contact</label>
    <input type="text" id="userContact" class="form-control input-sm" value="">
</div>

添加JavaScript处理AJAX请求 #

在视图底部（或者单独的JS文件里）加这段代码，用来监听模态框的弹出事件，获取用户ID并请求详情数据：

$(document).ready(function() {
    // 模态框弹出前触发的事件
    $('#exampleModal').on('show.bs.modal', function(e) {
        // 从点击的按钮上拿到UserID
        var userId = $(e.relatedTarget).data('id');
        
        // 发送AJAX请求获取详情
        $.ajax({
            url: '@Url.Action("GetUserDetails", "RIRO")', // 替换成你的控制器名称
            type: 'GET',
            data: { userId: userId },
            success: function(response) {
                if (response.success) {
                    // 把返回的数据填充到模态框的输入框里
                    $('#userAddress').val(response.data.Address);
                    // 日期格式可以根据需求调整，这里转成本地日期字符串
                    $('#userBirthday').val(new Date(response.data.Birthday).toLocaleDateString());
                    $('#userContact').val(response.data.Contact);
                } else {
                    alert('没找到该用户的详情数据');
                }
            },
            error: function() {
                alert('获取用户详情失败，请稍后再试');
            }
        });
    });

    // 模态框关闭时清空输入框，避免下次打开显示旧数据
    $('#exampleModal').on('hidden.bs.modal', function() {
        $(this).find('input').val('');
    });
});

5. 测试功能 #

现在点击View Details按钮，模态框弹出时会自动请求对应UserID的用户详情，填充到输入框里；关闭模态框时会清空所有输入框，不会影响下一次使用。

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