Model popup menggunakan jquery ajax hanya untuk sebagian kecil tampilan

Jadi saya memiliki tampilan bernama Edit Pengguna dan dalam tampilan itu saya memiliki bagian kode yang disediakan di bawah ini dan dalam tampilan daftar pengguna saya memiliki tombol bernama ROles di bagian Aksi jadi yang saya inginkan adalah ketika saya mengklik tombol itu hanya bagian ini yang akan muncul bagaimana dapatkah saya mencapai ini, bantu saya dalam hal ini. Terima kasih sebelumnya

<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>

Ini adalah Kode Pandangan yang lengkap

@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>

Apa yang saya coba:

Saya telah mencoba ini menggunakan tampilan Parsial tetapi tidak mencapai tujuan dan tidak memahami apa pun karena saya belum menguasai Jquery ajax dengan baik, jadi sarankan saya solusi untuk ini

Solusi 1

Mengutip:

Saya telah mencoba ini menggunakan tampilan Parsial tetapi tidak mencapai tujuan dan tidak memahami apa pun karena saya belum menguasai Jquery ajax dengan baik, jadi sarankan saya solusi untuk ini

Berikut ini mungkin sulit untuk dipahami menurut pengakuan Anda sendiri. Saya menyarankan Anda membaca lebih banyak lagi untuk memahami semuanya, Google mengembalikan yang berikut untuk saya – Menggunakan AJAX untuk memuat konten bagian yang diinginkan ke dalam modal [^]

Cara melakukannya adalah dengan menambahkan wadah modal ke HTML Anda tempat konten akan dimuat. Kemudian gunakan JavaScript untuk memicu permintaan AJAX ketika tombol “Kelola Peran” diklik. Sekarang muat konten HTML tertentu ke dalam wadah modal –

HTML Anda –

HTML

!-- Add your modal container... -->
<div class="modal fade" id="manageRolesModal" tabindex="-1" role="dialog" aria-labelledby="manageRolesModalLabel" aria-hidden="true">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title" id="manageRolesModalLabel">User Roles</h5>
        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
          <span aria-hidden="true">×</span>
        </button>
      </div>
      <div class="modal-body" id="manageRolesModalBody">
        <!-- The content that you want to see as per your post will be loaded here... -->
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
      </div>
    </div>
  </div>
</div>

JavaScript Anda (jQuery) akan terlihat seperti ini –

JavaScript

<script src="https://code.jquery.com/jquery-3.6.0.min.js" integrity="sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4=" crossorigin="anonymous"></script>

<script>
  $(document).ready(function() {
    //Handle the click event for your "Manage Roles" button...
    $('a[data-toggle="manageRolesModal"]').click(function() {
      var userId = $(this).data('userid');

      //Now make an AJAX request to load the content you want...
      $.ajax({
        url: '/YourControllerNameHere/ManageUserRolesPartial',
        type: 'GET',
        data: { userId: userId },
        success: function(data) {
          $('#manageRolesModalBody').html(data); //Load all the content into your created modal body...
          $('#manageRolesModal').modal('show'); //Now show your modal...
        },
        error: function(xhr, status, error) {
          console.error(error);
        }
      });
    });
  });
</script>

Anda perlu melakukan sesuatu di dalam Pengontrol Anda –

public IActionResult ManageUserRolesPartial(string userId)
{
    //Fetch roles for the user selected with the 'userId' that was returned...
    //I am assuming you have a method to retrieve roles based on userId...
    var roles = _userService.GetUserRoles(userId);

    return PartialView("_UserRolesPartial", roles);
}

Sekarang, jalankan HTML Anda untuk menampilkan tampilan sebagian ‘Peran Pengguna’ Anda –

HTML

<div class="card">
    <div class="card-header">
        <h3>User Roles</h3>
    </div>
    <div class="card-body">
        @if (Model.Any())
        {
            foreach (var role in Model)
            {
                <h5>@role</h5>
            }
        }
        else
        {
            <h5 class="card-title">None at the moment</h5>
        }
    </div>
    <div class="card-footer">
        <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
    </div>
</div>

Ikuti tautan yang saya berikan daripada hanya menyalin dan menempelkan kode saya dan berharap solusinya, saya belum mengujinya tetapi ini tepat untuk mengarahkan Anda ke arah yang benar.