使用Ajax和MVC C＃的无部分视图的开放模式

Question

我在视图的底部有一个模式部分，在顶部有一个用户列表，每个用户都有一个按钮。我将通过单击按钮在底部打开用户详细信息模式。我有一个将用户ID传递给我的控制器的ajax（）。我知道我可以进行局部视图，但是有办法将其传递给视图底部的模态吗？

@model IEnumerable<MVC_TimeSh.Models.UsersViewModel>
<table class="table table-bordered table-striped table-hover">
                    <thead>
                        <tr>
                            <th>
                                @Html.DisplayNameFor(m => m.IdShortened)
                            </th>
                            <th>
                                @Html.DisplayNameFor(m => m.Name)
                            </th>
                            <th>
                                @Html.DisplayNameFor(m => m.Role)
                            </th>
                            <th>
                                @Html.DisplayNameFor(m => m.PhoneNumber)
                            </th>
                            <th>
                                @Html.DisplayNameFor(m => m.Email)
                            </th>
                            <th>
                                @Html.DisplayNameFor(m => m.UserName)
                            </th>
                            <th>
                                @Html.DisplayNameFor(m => m.Birthday)
                            </th>
                            <th>
                                @Html.DisplayNameFor(m => m.DateCreated)
                            </th>
                            <th>
                                View Details
                            </th>
                        </tr>
                    </thead>

                    @foreach (var item in Model)
                    {
                        <tbody>
                            <tr>
                                <td>
                                    @Html.DisplayFor(mi => item.IdShortened)
                                </td>
                                <td>
                                    @Html.DisplayFor(mi => item.Name)
                                </td>
                                <td>
                                    @Html.DisplayFor(mi => item.Role)
                                </td>
                                <td>
                                    @Html.DisplayFor(mi => item.PhoneNumber)
                                </td>
                                <td>
                                    @Html.DisplayFor(mi => item.Email)
                                </td>
                                <td>
                                    @Html.DisplayFor(mi => item.UserName)
                                </td>
                                <td>
                                    @Html.DisplayFor(mi => item.Birthday)
                                </td>
                                <td>
                                    @Html.DisplayFor(mi => item.DateCreated)
                                </td>
                                <td>
                                    <a href="#" onclick="ShowUserDetails(id = Modal.UserId)"
                                       class="btn btn-primary">View</a>

                                    @*@Html.ActionLink("Modal", "DetailsModal", 
                                     new { id = item.UserId })*@
                                    <input type="button" value="Open" onclick="UserDetails(this)" 
                                           data-assigned-id="@item.UserId" />

function UserDetails(details) {
        var id = $(details).data("assigned-id");
        //$('#contentBody').html(id);application/json '{userId:"'+id+'"}',
        //$('#modalViewUser').modal('show'); "Url.Action("UserDetails", "Users")",
        $.ajax({
            url: '/Users/UserDetails',
            contentType: "text",
            data: { userId : id },
            dataType: "html",
            success: function (data) {
                $("#contentBody").html(data);
                $("#modalViewUser").modal("show");
            },
            failure: function (data) {
                alert(data.responseText);
            },
            error: function (data) {
                alert(data.responseText);
            }
        });
    }
    //data: '{ userId: "'+ id +'" }',     ; charset-utf-8
    function OpenMyModal(id) {

        $('#modalViewUser').modal('show');
    }

    function ShowUserDetails(id) {
        var url = '@Url.Content("~/")' + "Users/UserDetails";
        $.ajax({
            type: "POST",
            url: url,
            data: '{ UserId: "' + id + '" }',
            contentType: "application/json; charset-utf-8",
            dataType: "html",
            success: function (response) {
                $('#contentBody').html(response);
                $('#modalViewUser').modal('show');
            },
            failure: function (response) {
                alert(response.responseText);
            },
            error: function (response) {
                alert(response.responseText);
            }
        });
    }
</script>


<!-- DETAILS MODAL FOR SPECIFIED USER -->
<div class="modal fade" id="modalViewUser" role="dialog">
    <div class="modal-dialog modal-lg">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal">&times;</button>
                <h4 class="modal-title">
                    <span class="glyphicon glyphicon-user"></span>
                    Member Detail
                </h4>
            </div>
            <div class="modal-body" id="contentBody">
                test
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
            </div>
        </div>
    </div>
</div>

<div id="details-modal" style="display:none">
    <h4>test test test</h4>
</div>

controller
 public async Task<ActionResult> UserDetails(string userId)
    {
        try
        {
            if(userId == null)
            {
                return new HttpStatusCodeResult(HttpStatusCode.BadRequest);
            }
            var user = await UserManager.FindByIdAsync(userId);
            UsersViewModel model = new UsersViewModel()
            {
                UserId = user.Id,
                IdShortened = user.Id.Substring(0, 10),
                Birthday = user.Birthday.ToString(),
                Name = user.Name,
                DateCreated = user.DateCreated.ToString(),
                Email = user.Email,
                PhoneNumber = user.PhoneNumber,
                UserName = user.UserName

            };

            return PartialView("UserDetails", model);
        }
        catch(Exception ex)
        {
            Console.Write(ex.Message);
            TempData["Error"] = "Error retrieving User Details";
            return RedirectToAction("UserDashboard", "Users");
        }
    }