如何修復單擊刪除時不顯示的刪除模式

Question

當用戶想要刪除場景時，我想制作一個模式彈出窗口作為確認消息。

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);
        }

索引視圖

@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>

局部視圖

@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

$(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');
    })
})

})

我的視圖完美無缺，當我單擊刪除按鈕時，我只是沒有像我應該的那樣得到任何模態彈出窗口。 我只是忽略了一些非常愚蠢和明顯的東西嗎？

Answer 1

您的代碼在我的項目中運行良好，您需要注意三件事：

1.您使用data-url="@Url.Action($"Delete/{scenario.ScenarioId}")"未指定 controller 名稱。 確保您的Index和Delete操作在同一個 controller 中，否則您需要指定 controller 名稱，如：

data-url="@Url.Action($"Delete/{scenario.ScenarioId}","ControllerName")"

發現錯誤：如果data-url值正確與否，您可以按F12並檢查Elements面板。 或者您可以檢查Console面板是否顯示錯誤消息。

2.你在這里返回局部視圖return PartialView("_DeleteScenarioModelPartial", scenario); ，請確保_DeleteScenarioModelPartial.cshtml位於以下任何文件夾中：

Views/Shared/_DeleteScenarioModelPartial.cshtml Views/ControllerName/_DeleteScenarioModelPartial.cshtml

controller 名稱應與對應於 controller 的Delete操作匹配。 例如，如果Delete操作在ScenarioController中，它將搜索位置： Views/Scenario/_DeleteScenarioModelPartial.cshtml 。

此外，您可以指定局部視圖的整個路徑，例如： return PartialView("~/Views/xxxx/_DeleteScenarioModelPartial.cshtml", scenario);

發現錯誤：您可以在 Visual Studio 中檢查Output面板。

3.請檢查刪除操作中的scenario變量是否有價值。 參考： 如何調試代碼。