使用 jquery ajax 模型弹出窗口仅用于视图的一小部分

因此，我有一个名为“编辑用户”的视图，在该视图中，我在下面提供了这部分代码，在用户列表视图中，我在“操作”部分中有名为“ROles”的按钮，所以我想要的是，当我单击该按钮时，只有这部分应该如何弹出我可以实现这一目标吗？在这方面帮助我。 提前致谢

<div class="card">
    <div class="card-header">
        <h3>User Roles</h3>
    </div>
    <div class="card-body">
        @if (Model.Roles.Any())
        {
            foreach (var role in Model.Roles)
            {
                <h5 >@role</h5>
            }
        }
        else
        {
            <h5 class="card-title">None at the moment</h5>
        }
    </div>
    <div class="card-footer">
        <a asp-action="ManageUserRoles" asp-route-userId="@Model.Id"
           class="btn btn-primary">
            Manage Roles
        </a>
    </div>
</div>

这是视图的完整代码

@model EditUserViewModel

@{
    ViewBag.Title = "Edit User";
    Layout = "~/Views/Shared/AdminLTE/_Layout.cshtml";
}

<h1>Edit User</h1>

<form method="post" class="mt-3">
    <div class="form-group row">
        <label asp-for="Id" class="col-sm-2 col-form-label"></label>
        <div class="col-sm-10">
            <input asp-for="Id" disabled class="form-control">
        </div>
    </div>
    <div class="form-group row">
        <label asp-for="FirstName" class="col-sm-2 col-form-label"></label>
        <div class="col-sm-10">
            <input asp-for="FirstName" class="form-control">
        </div>
    </div>
    <div class="form-group row">
        <label asp-for="LastName" class="col-sm-2 col-form-label"></label>
        <div class="col-sm-10">
            <input asp-for="LastName" class="form-control">
        </div>
    </div>
    <div class="form-group row">
        <label asp-for="Email" class="col-sm-2 col-form-label"></label>
        <div class="col-sm-10">
            <input asp-for="Email" class="form-control">
            <span asp-validation-for="Email" class="text-danger"></span>
        </div>
    </div>
    <div class="form-group row">
        <label asp-for="UserName" class="col-sm-2 col-form-label"></label>
        <div class="col-sm-10">
            <input asp-for="UserName" class="form-control">
            <span asp-validation-for="UserName" class="text-danger"></span>
        </div>
    </div>
    

    <div asp-validation-summary="All" class="text-danger"></div>

    <div class="form-group row">
        <div class="col-sm-10">
            <button type="submit" class="btn btn-primary">Update</button>
            <a asp-action="ListUsers" class="btn btn-primary">Cancel</a>
        </div>
    </div>

    <div class="card">
        <div class="card-header">
            <h3>User Roles</h3>
        </div>
        <div class="card-body">
            @if (Model.Roles.Any())
            {
                foreach (var role in Model.Roles)
                {
                    <h5 >@role</h5>
                }
            }
            else
            {
                <h5 class="card-title">None at the moment</h5>
            }
        </div>
        <div class="card-footer">
            <a asp-action="ManageUserRoles" asp-route-userId="@Model.Id"
               class="btn btn-primary">
                Manage Roles
            </a>
        </div>
    </div>

    <div class="card mt-3">
        <div class="card-header">
            <h3>User Claims</h3>
        </div>
        <div class="card-body">
            @if (Model.Claims.Any())
            {
                foreach (var claim in Model.Claims)
                {
                    <h5 >@claim</h5>
                }
            }
            else
            {
                <h5 class="card-title">None at the moment</h5>
            }
        </div>
        <div class="card-footer">
            <a asp-action="ManageUserClaims" asp-route-userId="@Model.Id"
               style="width:auto" class="btn btn-primary">
                Manage Claims
            </a>
        </div>
    </div>
</form>

我尝试过的：

我已经尝试使用部分视图，但没有实现目标，并且不理解任何东西，因为我对 Jquery ajax 没有很好的掌握，所以建议我解决这个问题