How do i fix my delete modal that doesnt show up when i click delete

Question

I want to make a modal popup as a confirmation message when the user wants to delete a scenario.

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

$(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?

Answer 1

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. Be sure your Index and Delete action in the same controller, otherwise you need specify the controller name like:

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. Or you can check the Console panel if it shows error message.

2.You return partial view here return PartialView("_DeleteScenarioModelPartial", scenario); , be sure the _DeleteScenarioModelPartial.cshtml located in any of the folders below:

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

The controller name should match the Delete action corresponding controller. For example, if the Delete action is in ScenarioController , it will search for location: Views/Scenario/_DeleteScenarioModelPartial.cshtml .

Also, you can specific the whole path of your partial view like: return PartialView("~/Views/xxxx/_DeleteScenarioModelPartial.cshtml", scenario);

Error found : you can check the Output panel in visual studio.

3.Please check scenario variable in Delete action if it has value or not. Refer to: How to debug code .