حذف یک رکورد از لیست طریق فرم مدال بوت استرپ
در قطعه کد زیر بعد از زدن دکمه حذف صفحه تاریک اما فرم مدال نمایش داده نمیشود.
index.cshtml
@model IEnumerable<Inspection.Models.tblEquipType>
@using Inspection.PublicClass
<div class="row center-block box box-success" style="box-shadow:2px 2px 7px 3px gray;">
<div class="panel panel-primary col-md-8 col-md-offset-2" style="margin-top:25px; margin-bottom:25px;">
<div class="panel-body">
<div>
<a class="btn btn-primary" asp-controller="EquipType" asp-action="Create">
<i class="fa fa-plus"></i>
افزودن نوع دستگاه جدید
</a>
</div>
</div>
<hr style="height:1px; background-color:gray;" />
<table class="table table-responsive text-center">
<thead>
<tr style="font-size:15px; font-weight:600;">
<td>@Html.DisplayNameFor(model => model.Type)</td>
<td>@Html.DisplayNameFor(model => model.Description)</td>
<td>عملیات</td>
</tr>
</thead>
<tbody>
@foreach (var item in Model)
{
<tr>
<td>@item.Type</td>
<td>@item.Description</td>
<td>
<a class="btn btn-info" asp-controller="EquipType" asp-action="Edit" asp-route-id="@item.TypeId">
<i class="fa fa-pen"></i>
ویرایش
</a>
<a class="btn btn-danger" asp-controller="EquipType" asp-action="Delete"
asp-route-id=@item.TypeId data-toggle="modal" data-target="#modal-action-equiptype">
<i class="fa fa-trash"></i>
حذف
</a>
</td>
</tr>
}
</tbody>
</table>
</div>
</div>
@Html.Partial("_Modal", new BootstrapModel { ID = "modal-action-equiptype", Size = ModalSize.Medium })
@section PanelScripts{
<script src="~/js/modal-js/EquipType-index.js"></script>
}
Delete.cshtml
@Model Inspection.Models.tblEquipType
@{
Layout = null;
}
<form asp-controller="EquipType" asp-action="Delete">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
<h4 class="modal-title">حذف دسته بندی</h4>
</div>
<div class="modal-body form-horizontal">
آیا از حذف نوع دستگاه @Model.Type مطمین هستید؟
</div>
<div class="modal-footer" style="text-align:left;">
<button class="btn btn-default" type="button" data-dismiss="modal">برگشت</button>
<button class="btn btn-danger" type="submit">
حذف
</button>
</div>
</form>
پاسخ هوش مصنوعی
برای اینکه فرم مدال بعد از زدن دکمه حذف نمایش داده شود، باید از جاوا اسکریپت برای بارگذاری محتوای مدال استفاده کنید. به این ترتیب، به جای اینکه به صفحه Delete بروید، می توانید محتوای مدال را به صورت داینامیک با استفاده از AJAX بارگذاری کنید.
در زیر یک نمونه از نحوه انجام این کار آورده شده است:
$(document).ready(function() {
$('.btn-danger[data-toggle="modal"]').on('click', function(e) {
e.preventDefault();
var id = $(this).attr('asp-route-id');
// بارگذاری محتوای مدال
$.get('@Url.Action("Delete", "EquipType")', { id: id }, function(data) {
$('#modal-action-equiptype .modal-content').html(data);
$('#modal-action-equiptype').modal('show');
});
});
});
همچنین اطمینان حاصل کنید که آدرس URL برای متد Delete در کنترلر به درستی تنظیم شده است تا محتوای مدال به درستی بارگذاری شود. در این قسمت، کد AJAX محتوای مدال را از سرور بارگذاری کرده و آن را در مدال نمایش می دهد.
اگر هنوز مدال نمایش داده نمی شود، می توانید کنسول مرورگر را بررسی کنید تا ببینید آیا خطایی وجود دارد یا خیر. همچنین، بررسی کنید که تمام فایل های CSS و JS مورد نیاز برای بوت استرپ به درستی بارگذاری شده اند.
<form asp-controller="EquipType" asp-action="Delete" method="post">
" method="post رو ننوشتین
مشکل شما این هست که نحوه نمایش فرم مودال در بوت استرپ 4 رو نمی دونید. لینک زیر دقیقا به همین سوال پاسخ داده.
- آموزش استفاده از پلاگین گردونه شانس در Asp.net core به همراه سورس
- نمایش متن به صورت فرمت شده در CkEditor
- آموزش استفاده از SignalR در Asp.net Core با مثال عملی
- ادغام چند گزارش استیمول سافت بصورت پی دی اف در یک فایل
- نحوه تغییر استایل کامپوننت select2 چگونه است ؟
- چگونه امنیت پروژه را در Asp.net Core افزایش دهیم ؟
- ارسال پارامتر در دستور window.open جی کویری
- ارسال پارامتر از طریق جاوااسکریپت با کلیک روی تگ a
- خطای 500 زمان اجرا شدن پروژه روی هاست
- کویری نویسی در استیمول سافت جهت فیلتر اطلاعات
- کار با CkEditor با قابلیت آپلود عکس
- خطا در ایجاد migration در Asp.net core
- تفاوت های Asp.net core و Asp.net mvc چیه؟
- دلیل اسپم شدن ایمیل های ارسالی از سرور
- نحوه لایه بندی پروژه Core و اضافه کردن به IIS
- ارسال ایمیل در Asp.net core
- آیا میشه در mvc core از کامپونت استفاده کرد
- آپلود فایل در Asp.net core چگونه است؟
- حذف کامل یک رکورد در جدول ریلیشن شده
- اشکال در آپلود فایل ویدیو در mvc core 2