Quote:
I have tried this using Partial view but not achieved the goal and not understanding anything as I have not good grip on Jquery ajax so suggest me the solution for this
The following might be difficult to grasp as per your own admission. I would suggest that you read up some more to get teh understanding of it all, Google returned the following for me -
Using AJAX to load the content of the desired section into a modal[
^]
The way to go about this would be to add a modal container to your HTML where the content will be loaded. Then use JavaScript to trigger an AJAX request when the "Manage Roles" button is clicked. Now load the specific HTML content into the modal container -
Your 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">
<!--
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
Your JavaScript(jQuery) will look like this -
<script src="https://code.jquery.com/jquery-3.6.0.min.js" integrity="sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4=" crossorigin="anonymous"></script>
<script>
$(document).ready(function() {
$('a[data-toggle="manageRolesModal"]').click(function() {
var userId = $(this).data('userid');
$.ajax({
url: '/YourControllerNameHere/ManageUserRolesPartial',
type: 'GET',
data: { userId: userId },
success: function(data) {
$('#manageRolesModalBody').html(data);
$('#manageRolesModal').modal('show');
},
error: function(xhr, status, error) {
console.error(error);
}
});
});
});
</script>
You will need to action something within your Controller -
public IActionResult ManageUserRolesPartial(string userId)
{
var roles = _userService.GetUserRoles(userId);
return PartialView("_UserRolesPartial", roles);
}
Now, run your HTML to show the partial view for your 'User Roles' -
<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>
Follow the link I provided rather than just copying and pasting my code and hope for a solution, I have not tested this but it is spot on to point you in the right direction.