Modèle contextuel utilisant jquery ajax pour seulement une petite partie de la vue

la programmation


J’ai donc la vue nommée Modifier l’utilisateur et dans cette vue, j’ai cette partie de code fournie ci-dessous et dans la vue de la liste des utilisateurs, j’ai un bouton nommé ROles in Action, donc ce que je veux, c’est lorsque je clique sur ce bouton, seule cette partie devrait apparaître comment puis-je y parvenir, aidez-moi à cet égard. Merci d’avance

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

Ceci est le code complet de la vue 

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

Ce que j’ai essayé :

J’ai essayé cela en utilisant la vue partielle mais je n’ai pas atteint l’objectif et je ne comprends rien car je n’ai pas une bonne maîtrise de Jquery ajax, alors proposez-moi la solution pour cela

Solution 1

Citation:

J’ai essayé cela en utilisant la vue partielle mais je n’ai pas atteint l’objectif et je ne comprends rien car je n’ai pas une bonne maîtrise de Jquery ajax, alors proposez-moi la solution pour cela

Ce qui suit peut être difficile à comprendre, selon votre propre aveu. Je vous suggère de lire davantage pour bien comprendre tout cela, Google m’a renvoyé ce qui suit : Utiliser AJAX pour charger le contenu de la section souhaitée dans un modal[^]

La façon de procéder serait d’ajouter un conteneur modal à votre HTML où le contenu sera chargé. Utilisez ensuite JavaScript pour déclencher une requête AJAX lorsque vous cliquez sur le bouton « Gérer les rôles ». Chargez maintenant le contenu HTML spécifique dans le conteneur modal –

Votre HTML –

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>

Votre JavaScript (jQuery) ressemblera à ceci :

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>

Vous devrez agir quelque chose dans votre contrôleur –

C#
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);
}

Maintenant, exécutez votre code HTML pour afficher la vue partielle de vos « Rôles utilisateur » –

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>

Suivez le lien que j’ai fourni plutôt que de simplement copier et coller mon code et espérer une solution, je n’ai pas testé cela mais il est parfait pour vous orienter dans la bonne direction.

コメント

タイトルとURLをコピーしました