Modelo emergente usando jquery ajax solo para una pequeña parte de la vista

programación

[ad_1]

Entonces tengo la vista llamada Editar usuario y en esa vista tengo esta porción del código proporcionada a continuación y en la vista de lista de usuarios tengo un botón llamado ROles en la parte Acción, así que lo que quiero es que cuando haga clic en ese botón solo esta parte debería aparecer como ¿Puedo lograr esto? Ayúdame en este sentido. Gracias de antemano

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

Este es el Código completo de la Vista 

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

Lo que he probado:

Intenté esto usando la vista parcial pero no logré el objetivo y no entendí nada porque no tengo buen control de Jquery ajax, así que sugiérame la solución para esto.

Solución 1

Cita:

Intenté esto usando la vista parcial pero no logré el objetivo y no entendí nada porque no tengo buen control de Jquery ajax, así que sugiérame la solución para esto.

Lo siguiente puede ser difícil de comprender según usted mismo admite. Le sugiero que lea un poco más para comprenderlo todo. Google me devolvió lo siguiente: Usando AJAX para cargar el contenido de la sección deseada en un modal[^]

La forma de hacerlo sería agregar un contenedor modal a su HTML donde se cargará el contenido. Luego use JavaScript para activar una solicitud AJAX cuando se haga clic en el botón “Administrar roles”. Ahora cargue el contenido HTML específico en el contenedor modal –

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

Su JavaScript (jQuery) se verá así:

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>

Necesitará realizar algo dentro de su Controlador:

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

Ahora, ejecute su HTML para mostrar la vista parcial de sus ‘Roles de usuario’ –

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>

Siga el enlace que le proporcioné en lugar de simplemente copiar y pegar mi código y esperar una solución. No lo he probado, pero es perfecto para indicarle la dirección correcta.

[ad_2]

コメント

Título y URL copiados