दृश्य के केवल छोटे हिस्से के लिए jquery AJAX का उपयोग करके मॉडल पॉपअप

तो मेरे पास एडिट यूजर नामक दृश्य है और उस दृश्य में मेरे पास नीचे दिए गए कोड का यह भाग है और उपयोगकर्ता सूची दृश्य में मेरे पास रोल्स इन एक्शन भाग नामक बटन है, इसलिए मैं जो चाहता हूं वह यह है कि जब मैं उस बटन पर क्लिक करता हूं तो केवल यह भाग पॉपअप होना चाहिए कैसे क्या मैं इसे हासिल कर सकता हूं, इस संबंध में मेरी मदद करें। अग्रिम में धन्यवाद

<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 में एक मोडल कंटेनर जोड़ें जहां सामग्री लोड की जाएगी। फिर “भूमिकाएँ प्रबंधित करें” बटन पर क्लिक करने पर 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>

मेरे कोड को केवल कॉपी और पेस्ट करने और समाधान की आशा करने के बजाय मेरे द्वारा दिए गए लिंक का अनुसरण करें, मैंने इसका परीक्षण नहीं किया है लेकिन यह आपको सही दिशा दिखाने के लिए बिल्कुल उपयुक्त है।

समाधान 1

コメント