نموذج منبثق باستخدام jquery ajax لجزء صغير فقط من العرض

[ad_1]

لذلك لدي طريقة العرض المسماة تحرير المستخدم وفي هذا العرض لدي هذا الجزء من التعليمات البرمجية الموضح أدناه وفي عرض قائمة المستخدمين لدي زر يسمى 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 لذا اقترح علي الحل لذلك

الحل 1

يقتبس:

لقد حاولت ذلك باستخدام العرض الجزئي ولكني لم أحقق الهدف ولم أفهم أي شيء لأنني لا أملك قبضة جيدة على Jquery ajax لذا اقترح علي الحل لذلك

قد يكون من الصعب فهم ما يلي وفقًا لقبولك الخاص. أود أن أقترح عليك قراءة المزيد لتفهم كل شيء، وقد أعادت Google لي ما يلي – استخدام AJAX لتحميل محتوى القسم المطلوب في شكل مشروط [^]

تتمثل طريقة القيام بذلك في إضافة حاوية مشروطة إلى HTML الخاص بك حيث سيتم تحميل المحتوى. ثم استخدم JavaScript لتشغيل طلب AJAX عند النقر فوق الزر “إدارة الأدوار”. الآن قم بتحميل محتوى 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>

سيبدو جافا سكريبت (jQuery) الخاص بك بهذا الشكل –

جافا سكريبت

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

ستحتاج إلى اتخاذ إجراء ما داخل وحدة التحكم الخاصة بك –

ج #

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

الآن، قم بتشغيل 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>

اتبع الرابط الذي قدمته بدلاً من مجرد نسخ ولصق الكود الخاص بي وأتمنى الحصول على حل، لم أختبر هذا ولكنه على الفور لتوجيهك في الاتجاه الصحيح.

[ad_2]