Razor页面中确认模式后的信息模式

Question

我想显示一个信息模式，上面写着“记录已成功删除”。单击确认模态中的按钮后。

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

调节器

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

示例截图：

这一点似乎没问题。没遇到任何问题。但是点击“删除”按钮后，它会像整个视图一样显示我的模态。见下文：

这是我的代码：

控制器 - 单击删除按钮后的数据发布

[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页面，它整合了消息对话框（就像region-list集成了问题对话框一样）。

Answer 2

终于找到了答案。所以基本上我只修改了一切，以便控制器的模型验证仍然存在。

继承我的代码：

对于表格标记

<tr>
    <td>
        @Html.DisplayFor(modelItem => item.RegionName)
    </td>
    <td>
        @Html.DisplayFor(modelItem => item.RegionCode)
    </td>
    <td>
        @Html.DisplayFor(modelItem => item.RegionKey)
    </td>
    <td>
        @Html.DisplayFor(modelItem => item.Description)
    </td>
    <td class="text-center">
        <a asp-action="Edit" asp-route-id="@item.RegionId"><i class="fa fa-edit text-info"></i></a>
        <a href="#" onclick="showDeleteConfirmation('@string.Format(Constants.Message.DeletePrompt, item.RegionName)', event, @item.RegionId)"><i class="fa fa-trash text-danger"></i></a>
    </td>
</tr>

它在下面调用javascript函数：

@section Scripts{
    <script type="text/javascript">
        function showDeleteConfirmation(message, event, id) {
            event.preventDefault();

            showConfirmationModal(message).then(function () {
                $("#id").val(id);
                $("#formDelete").submit();
            });
        }
    </script>
}

其中showConfirmationModal()是一个使用bootbox.js的promise函数（包装bootstrap模式以便于使用的库）。

site.js

function showConfirmationModal(message, title = "Confirm", size = "medium", confirmText = "Yes", canceltext = "No") {
    const deffered = $.Deferred();

    bootbox.confirm({
        title: title,
        message: message,
        size: size,
        buttons: {
            confirm: {
                label: confirmText,
                className: "btn-success"
            },
            cancel: {
                label: canceltext,
                className: "btn-danger"
            }
        },
        callback: function (result) {
            if (result) {
                deffered.resolve(result);
            } else {
                deffered.reject(result);
            }
        }
    });

    return deffered.promise();
}

在回调中，它将在下面提交隐藏的表单。当然不要忘记设置要删除的ID。

删除操作的隐藏表单

<form method="post" asp-action="Delete" id="formDelete" class="hidden">
    <input type="hidden" id="id" name="id" />
    <input type="hidden" asp-for="Item1.RegionName" name="RegionName" />
    <input type="hidden" asp-for="Item1.Page" name="Page" />
    <input type="hidden" asp-for="Item1.SortBy" name="SortBy" />
    <input type="hidden" asp-for="Item1.SortOrder" name="SortOrder" />
</form>

为了显示信息消息（为了成功删除），我创建了一个部分视图，以便在临时数据或TempData中设置数据时进行模态显示。这是在_Layout.cshtml页面下添加的：

_Modlskriptsinitkkshtml

@using Data.Utilities
@{
    var text = TempData[Constants.Common.ModalMessage];
    if (text != null && !text.Equals(string.Empty))
    {
        <script type="text/javascript">
            showDefaultModal("@text");
        </script>
    }
}

所以在我的控制器成功删除后，我将只使用其键设置TempData，如下所示：

调节器

[HttpPost]
public async Task<IActionResult> Delete(int id, RegionSearchViewModel searchViewModel)
{
    try
    {
        var validationResult = await new RegionHandler(_regionService).CanDelete(id);
        if (validationResult == null)
        {
            await _regionService.DeleteById(id);
            TempData[Constants.Common.ModalMessage] = Constants.Message.RecordSuccessDelete;

            return RedirectToAction(nameof(List), searchViewModel);
        }

        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 RedirectToAction(nameof(List), searchViewModel);
}

我不确定这是否是目前为止最好的方法。请提供有关如何改进此代码的建议。谢谢！