how to fix delete record using partial view? - asp.net

Question

I want to delete the record from the table with modal but the partial view is not displayed in modal ...
How can I solve this problem !?
And that I can not use onClick !!!
this action for delete in controller:
public IActionResult DelPlatform(int? id)
{
if (id == null)
{
return NotFound();
}
PR_Platform platformModel = _Iunit.PlatformsRepository.GenGetById(id);
if (platformModel == null)
{
return NotFound();
}
return View(platformModel);
}
[HttpPost]
[ValidateAntiForgeryToken]
public IActionResult DelPlatform(int id)
{
_Iunit.PlatformsRepository.GenDeleteById(id);
return RedirectToAction(nameof(PlatformList));
}
this delete button in index view:
<a asp-controller="Platform" asp-action="DelPlatform" asp-route-id="#item.PlatformId" class="btn btn-danger btn-sm waves-effect waves-light" data-toggle="modal" data-target="#delete-modal"><i class="mdi mdi-delete" data-toggle="tooltip" data-placement="top" title="حذف"></i></a>
this script for delete:
<script>
(function ($) {
function Delete() {
var $this = this;
function initilizeModel() {
$("#delete-modal").on('show.bs.modal', function (e) {
}).on('hidden.bs.modal', function (e) {
$(this).removeData('bs.modal');
});
}
$this.init = function () {
initilizeModel();
}
}
$(function () {
var self = new Delete();
self.init();
})
}(jQuery))
</script>
this modal (in shared folder):
<div class="modal fade bs-example-modal-center" tabindex="-1" role="dialog" id="delete-modal" aria-labelledby="mySmallModalLabel" aria-hidden="true">
<div class="modal-dialog modal-dialog-centered">
<div class="modal-content">
<div class="modal-header text-danger">
<h5 class="modal-title mt-0 text-white"><strong>حذف از پایگاه داده</strong></h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-footer mr-auto">
<button type="submit" class="btn btn-primary waves-effect waves-light">حذف شود</button>
</div>
</div>
</div>
this delete action view (for get record name):
#model PR_Platform
#{
Layout = null;
}
<form asp-controller="Platform" asp-action="DelPlatform" method="post">
<div class="modal-body" id="delete-modal">
<p><strong>آیا از حذف <em>"#Model.PlatformName"</em> مطمئن هستید؟</strong></p>
<p class="mb-0"><small>#Model.PlatformName از پایگاه داده حذف خواهد شد</small></p>
</div>
</form>

Answer 1

Please try this:
View:
#{
ViewData["Title"] = "Home Page";
}
<div class="modal fade bs-example-modal-center" tabindex="-1" role="dialog" id="delete-modal" aria-labelledby="mySmallModalLabel" aria-hidden="true">
<div class="modal-dialog modal-dialog-centered">
<div class="modal-content">
<div class="modal-header text-danger">
<h5 class="modal-title mt-0 text-white"><strong>حذف از پایگاه داده</strong></h5>
<form asp-controller="Platform" asp-action="DelPlatform" method="post">
<div class="modal-body" id="delete-modal">
#*<em>"#Model.PlatformName"</em> <small>#Model.PlatformName از پایگاه داده حذف خواهد شد</small>*#
<p><strong>آیا از حذف مطمئن هستید؟</strong></p>
<p class="mb-0"></p>
</div>
<button type="submit">Click if you are sure to Delete</button>
</form>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
#*<div class="modal-footer mr-auto">
<button type="submit" class="btn btn-primary waves-effect waves-light">حذف شود</button>
</div>*#
</div>
</div>
</div>
#*asp-controller="Home" asp-action="DelPlatform" asp-route-id="#item.PlatformId"*#
<a class="btn btn-danger btn-sm waves-effect waves-light" data-toggle="modal" data-target="#delete-modal">Click to Delete<i class="mdi mdi-delete" data-toggle="tooltip" data-placement="top" title="حذف"></i></a>

Answer 2

Here is a whole working demo you could follow:
Model:
public class PR_Platform
{
public int PlatformId { get; set; }
public string PlatformName { get; set; }
}
Main View(Index.cshtml):
Add data-id in the anchor tag for getting the clicked value.
#model IEnumerable<PR_Platform>
#foreach(var item in Model)
{
<a asp-controller="Platform" asp-action="DelPlatform" asp-route-id="#item.PlatformId" data-id="#item.PlatformId" class="btn btn-danger btn-sm waves-effect waves-light" data-toggle="modal" data-target="#delete-modal"><i class="mdi mdi-delete" data-toggle="tooltip" data-placement="top" title="حذف"></i></a>
<a asp-controller="Platform" asp-action="DelPlatform" asp-route-id="#item.PlatformId" data-id="#item.PlatformId" class="btn btn-danger btn-sm waves-effect waves-light" data-toggle="modal" data-target="#delete-modal"><i class="mdi mdi-delete" data-toggle="tooltip" data-placement="top" title="حذف"></i></a>
}
<div class="modal fade bs-example-modal-center" tabindex="-1" role="dialog" id="delete-modal" aria-labelledby="mySmallModalLabel" aria-hidden="true">
<div class="modal-dialog modal-dialog-centered">
<div class="modal-content">
<div class="modal-header text-danger">
<h5 class="modal-title mt-0 text-white"><strong>حذف از پایگاه داده</strong></h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
//add this......
</div>
<div class="modal-footer mr-auto">
<button type="submit" class="btn btn-primary waves-effect waves-light">حذف شود</button>
</div>
</div>
</div>
</div>
JS in main view:
#section Scripts
{
<script>
(function ($) {
function Delete() {
var $this = this;
function initilizeModel() {
$("#delete-modal").on('show.bs.modal', function (e) {
var $button = $(e.relatedTarget); //Button that triggered the modal
var id = $button.data("id"); //get the id
alert(id);
$.ajax({
type: "GET",
url: "/Platform/DelPlatform/"+id,
contentType: "application/json",
success: function (data) {
$(".modal-body").html(data);//load the response html code to the modal
},
error: function (e) {
alert('Error');
}
})
}).on('hidden.bs.modal', function (e) {
$(this).removeData('bs.modal');
});
}
$this.init = function () {
initilizeModel();
}
}
$(function () {
var self = new Delete();
self.init();
})
}(jQuery))
</script>
}
Controller:
public IActionResult DelPlatform(int? id)
{
if (id == null)
{
return NotFound();
}
PR_Platform platformModel = _Iunit.PlatformsRepository.GenGetById(id);
if (platformModel == null)
{
return NotFound();
}
return View(platformModel);
}