jquery - 使用@url.action调用部分 View 点击使用jquery

Question

调用@url.action上的部分 View 。我正在使用 url.action 显示记录，并希望在用户单击记录时加载部分 View 。

这是我的代码，当用户单击它时我想调用部分 View 。

<td>
<a href="@Url.Action("Details", new { id=item.TeamId})">
 @Html.DisplayFor(modelItem => item.TeamName)
</a>
</td>

这是我在其中放置部分 View 的 Div

<div id="detailsPlace" class="dialog_content3" style="display:none"></div>
         @Html.Partial("_TeamDetails")
    </div>

这是我想要渲染的部分 View

@model light.ViewModels.ViewDetailTeam
@{
    var item = Model.Team;
}

    <div class="dialogModal_header">@Html.Label(item.TeamName)</div>
    <div class="dialogModal_content">
        <div class="main-content">
            <div class="navi-but">
                    @Html.Label(item.TeamName)
                </div>
                    @Html.Label(item.Description)
                </div>
            </div>
        </div>

这是我的 Controller

public ActionResult Details(int id)
        {

            lightCoreModel.User loggedInUser = new lightCoreModel.User();


                ViewDetailTeam viewDetailTeam = new ViewDetailTeam();
                ViewData["DetailModel"] = viewDetailTeam;
                viewDetailTeam.Retrieve(id);
                return PartialView("_TeamDetails",viewDetailTeam);

        }
now i am facing this problem with pop up its showing me the following screen.

Answer 1

您需要 Ajax 来完成此操作。首先，使用以下代码在 View 中添加脚本 block :

<script type="text/javascript">
    $(function () {
        $('.details').click(function () {
            var $buttonClicked = $(this);
            var id = $buttonClicked.attr('data-id');

            $.ajax({
                url: '@Url.Action("Details")',
                type: 'GET',
                data: { id: id },
                success: function (partialView) {
                    $('#detailsPlace').html(partialView);
                    $('#detailsPlace').show();
                }
            });
        });
    });
</script>

然后将 anchor 标记更改为:

<a href="#" class="details" data-id="@item.TeamId">Details</a>

只要单击具有详细信息类的元素，就会触发 ajax 调用。单击后，存储在 data-id 属性中的 Id 将被传递到 Controller 。当您的 Controller 将分部 View 传回时，分部 View 将在ajax调用的成功函数中加载，并且将显示detailsPlace，因为它的显示设置为无。