[英]How do i fix my delete modal that doesnt show up when i click delete
I want to make a modal popup as a confirmation message when the user wants to delete a scenario.当用户想要删除场景时,我想制作一个模式弹出窗口作为确认消息。
Controller
Controller
public async Task<IActionResult> Index()
{
HttpContext.Session.Clear();
var viewModel = new ScenarioIndexViewModel();
var scenarios = await _scenarioManager.GetAllScenariosAsync();
foreach (var scenario in scenarios)
{
viewModel.ScenarioIndexItems.Add(
new ScenarioIndexItemViewModel
{
ScenarioId = scenario.Id,
ScenarioName = scenario.Title,
ScenarioDescription = scenario.Description
});
}
return View(viewModel);
}
[HttpGet]
public IActionResult Delete(Guid id)
{
Scenario scenario = _scenarioManager.GetScenarioByScenarioId(id);
return PartialView("_DeleteScenarioModelPartial", scenario);
}
Index view
索引视图
@model ScenarioIndexViewModel
<div id="PlaceHolder"></div>
<div class="card-header howestBlue whiteText centerAlign"><h1>Scenarios</h1></div>
<table class="table">
<thead class="noBorder">
<tr class="font-m">
<th>Titel</th>
<th>Beschrijving</th>
</tr>
</thead>
<tbody>
@foreach (var scenario in Model.ScenarioIndexItems)
{
<tr class="font-m">
<td><a class="noDecoration" asp-controller="Scenario" asp-action="Details" asp-route-id="@scenario.ScenarioId" >@scenario.ScenarioName</a></td>
<td><a class="noDecoration" asp-controller="Scenario" asp-action="Details" asp-route-id="@scenario.ScenarioId" >@scenario.ScenarioDescription</a></td>
<td class="rightAlign">
<button class="btn btn-success">
<i class="fas fa-pencil-alt"></i>
</button>
<button type="button" class="btn btn-danger" data-toggle="ajax-modal" data-target="#deleteScenario"
data-url="@Url.Action($"Delete/{scenario.ScenarioId}")">
<i class="fas fa-trash-alt"></i>
</button>
</td>
</tr>
}
</tbody>
</table>
<div>
<a class="btn btn-danger" asp-controller="Home" asp-action="Index">
<i class="fas fa-arrow-circle-left"></i>
Ga terug
</a>
</div>
Partial View
局部视图
@using Howest.BaVpl.Core.Case.Entities
@model Scenario
<div class="modal fade" id="deleteScenario">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<h4 class="modal-title" id="deleteScenarioLabel">Ben je zeker dat je dit scenario wilt verwijderen?</h4>
<button type="button" class="close" data-dismiss="modal">
<span>x</span>
</button>
</div>
<div class="modal-body">
<form action="Delete">
<div class="form-group">
<input type="hidden" asp-for="@Model.Id" />
<label asp-for="Title">@Model.Title</label>
</div>
</form>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-primary" data-dismiss="modal">Sluiten</button>
<button type="button" class="btn btn-primary" data-save="modal">Verwijderen</button>
</div>
</div>
</div>
</div>
JavaScript
JavaScript
$(function () {
const PlaceHolderElement = $('#PlaceHolder');
$('button[data-toggle="ajax-modal"]').click(function (event) {
const url = $(this).data('url');
const decodeUrl = decodeURIComponent(url);
$.get(decodeUrl).done(function (data) {
PlaceHolderElement.html(data);
PlaceHolderElement.find('.modal').modal('show');
})
})
PlaceHolderElement.on('click', '[data-save="modal"]', function (event) {
event.preventDefault();
const form = $(this).parents('.modal').find('form');
const actionUrl = form.attr('action');
const sendData = form.serialize();
$.post(actionUrl, sendData).done(function (data) {
PlaceHolderElement.find('.modal').modal('hide');
})
})
}) })
my view works perfectly, i just dont get any modal popup like im supposed to when i click the delete button.我的视图完美无缺,当我单击删除按钮时,我只是没有像我应该的那样得到任何模态弹出窗口。 Am i just overlooking something really dumb and obvious?
我只是忽略了一些非常愚蠢和明显的东西吗?
Your code works fine in my project, three things you need note:您的代码在我的项目中运行良好,您需要注意三件事:
1.You use data-url="@Url.Action($"Delete/{scenario.ScenarioId}")"
without specifying the controller name. 1.您使用
data-url="@Url.Action($"Delete/{scenario.ScenarioId}")"
未指定 controller 名称。 Be sure your Index
and Delete
action in the same controller, otherwise you need specify the controller name like:确保您的
Index
和Delete
操作在同一个 controller 中,否则您需要指定 controller 名称,如:
data-url="@Url.Action($"Delete/{scenario.ScenarioId}","ControllerName")"
Error found : you can press F12
and check the Elements
panel if the data-url
value is correct or not.发现错误:如果
data-url
值正确与否,您可以按F12
并检查Elements
面板。 Or you can check the Console
panel if it shows error message.或者您可以检查
Console
面板是否显示错误消息。
2.You return partial view here return PartialView("_DeleteScenarioModelPartial", scenario);
2.你在这里返回局部视图
return PartialView("_DeleteScenarioModelPartial", scenario);
, be sure the _DeleteScenarioModelPartial.cshtml
located in any of the folders below: ,请确保
_DeleteScenarioModelPartial.cshtml
位于以下任何文件夹中:
Views/Shared/_DeleteScenarioModelPartial.cshtml Views/ControllerName/_DeleteScenarioModelPartial.cshtml
Views/Shared/_DeleteScenarioModelPartial.cshtml Views/ControllerName/_DeleteScenarioModelPartial.cshtml
The controller name should match the Delete
action corresponding controller. controller 名称应与对应于 controller 的
Delete
操作匹配。 For example, if the Delete
action is in ScenarioController
, it will search for location: Views/Scenario/_DeleteScenarioModelPartial.cshtml
.例如,如果
Delete
操作在ScenarioController
中,它将搜索位置: Views/Scenario/_DeleteScenarioModelPartial.cshtml
。
Also, you can specific the whole path of your partial view like: return PartialView("~/Views/xxxx/_DeleteScenarioModelPartial.cshtml", scenario);
此外,您可以指定局部视图的整个路径,例如:
return PartialView("~/Views/xxxx/_DeleteScenarioModelPartial.cshtml", scenario);
Error found : you can check the Output
panel in visual studio.发现错误:您可以在 Visual Studio 中检查
Output
面板。
3.Please check scenario
variable in Delete action if it has value or not. 3.请检查删除操作中的
scenario
变量是否有价值。 Refer to: How to debug code .参考: 如何调试代码。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.