c# - Razor Pages 中确认模态之后的信息模态

Question

我想显示一个显示“记录已成功删除”的信息模式。单击确认模式内的按钮后。

这是我显示确认模式的代码

Controller

public IActionResult Delete()
{
   return PartialView("_ModalDelete");
}

_ModalDelete.cshtml

@using Data.ViewModels.Modal

@using (Html.BeginForm())
{
    @await Html.PartialAsync("_ModalHeader", new ModalHeader { Heading = "Delete" })

    <div class="modal-body form-horizontal">
        Are you sure you want to delete this record?
    </div>

    @await Html.PartialAsync("_ModalFooter", new ModalFooter { SubmitButtonText = "Delete" })
}

示例截图:

这部分似乎没问题。没有遇到任何问题。但是在单击删除按钮后，它会像整个 View 一样显示我的模态。见下文:

这是我的代码:

Controller - 用于点击删除按钮后发布数据

[HttpPost]
public async Task<IActionResult> Delete(int id)
{
    try
    {
        var validationResult = await new RegionHandler(_regionService).CanDelete(id);
        if (validationResult == null)
        {
            await _regionService.DeleteById(id);

            return PartialView("_ModalInfo", new Tuple<string, string>(Constants.Message.Info, Constants.Message.RecordSuccessDelete));
        }

        ModelState.AddModelError(validationResult);
    }
    catch (Exception ex)
    {
        var exceptionMessage = await Helpers.GetErrors(ex, _emailService);
        ModelState.AddModelError(new ValidationResult(exceptionMessage));
    }

    ModelState.AddModelError(string.Empty, "Invalid delete attempt.");

    return PartialView("_ModalInfo", new Tuple<string, string>(Constants.Message.Error, ModelState.ToString()));
}

_ModalInfo.cshtml

@using Data.ViewModels.Modal
@model Tuple<string,string>

@await Html.PartialAsync("_ModalHeader", new ModalHeader { Heading = Model.Item1})

<div class="modal-body form-horizontal">
    @Model.Item2
</div>

@await Html.PartialAsync("_ModalFooter", new ModalFooter { CancelButtonText = "OK", OnlyCancelButton = true})

Answer 1

随着表单的提交，您将往返于服务器，服务器将发布一个全新的 html 页面(即使您的 html 代码只是部分)。

要删除问题模态并将其替换为原始页面(区域列表)中的消息模态，您将必须使用 javascript(用于发布和替换)。

如果你想坚持往返，让 Delete 方法返回一个完整的 html 页面，它集成了消息对话框(就像区域列表集成了问题对话框)。