在 MVC 控制器中刷新 PartialView

Question

在提交將在我的控制器中處理的表單后，我試圖刷新我的部分視圖。 問題是，每當我嘗試從我的控制器刷新它時，我都會被重定向到一個空白頁面，其中包含來自 Partial View 的內容。

局部視圖

@model Smarty.Viewmodels.BugViewModel

<div class="modal fade" id="bugModal" tabindex="-1" role="dialog">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title">Bug Reporting Tool</h5>
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span>&times;</span>
                </button>
            </div>
            <form asp-controller="Smarty" asp-action="SendBugReport" enctype="multipart/form-data">

                @if (!string.IsNullOrWhiteSpace(ViewBag.message))
                {
                    if (!ViewBag.IsError)
                    {
                        <span class="border border-success text-success">@ViewBag.message</span>
                    }
                    else
                    {
                        <span class="border border-danger text-danger">@ViewBag.message</span>
                    }
                }
                <div class="modal-body">
                    <label asp-for="Description" class="control-label"></label>
                    <textarea asp-for="Description" class="form-control"></textarea>
                    <span asp-validation-for="Description" class="text-danger"></span>

                    <label asp-for="FormFile" class="control-label"></label><br />
                    <input asp-for="FormFile" type="file" />
                    <span asp-validation-for="FormFile" class="text-danger"></span>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-dismiss="modal">Schliessen</button>
                    <button type="submit" id="BugReportBtn" class="btn btn-success">Bug Report senden</button>
                </div>
            </form>
        </div>
    </div>
</div>

控制器

public async Task<IActionResult> SendBugReport(BugViewModel viewModel)
   {
    //Process Form

    return PartialView("BugModal", viewModel);
   }

提前致謝！

Answer 1

我被重定向到包含部分視圖內容的空白頁面。

這是預期的，因為您使用return PartialView()它將返回簡單的部分 html 以將其呈現到視圖中。

我想用錯誤消息、成功消息等內容刷新部分視圖

您無法從SendBugReport操作中獲取@ViewBag.message ，它是從主頁的操作中傳遞的。

正如評論所說，首先，您可以使用ajax將表單提交給SendBugReport action。然后該action將message和isError json數據返回給ajax成功函數。 最后，根據isError的值在視圖上呈現message ：

1.部分視圖（Views/Shared/BugModal.cshtml）

@model BugViewModel

<div class="modal fade" id="bugModal" tabindex="-1" role="dialog">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title">Bug Reporting Tool</h5>
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span>&times;</span>
                </button>
            </div>
            <form id="myForm" asp-controller="Smarty" asp-action="SendBugReport" enctype="multipart/form-data">
                <div id="result"></div>
                <div class="modal-body">
                    <label asp-for="Description" class="control-label"></label>
                    <textarea asp-for="Description" class="form-control"></textarea>
                    <span asp-validation-for="Description" class="text-danger"></span>

                    <label asp-for="FormFile" class="control-label"></label><br />
                    <input asp-for="FormFile" id="FormFile" name="FormFile" type="file" />
                    <span asp-validation-for="FormFile" class="text-danger"></span>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-dismiss="modal">Schliessen</button>
                    <button type="button" id="BugReportBtn" class="btn btn-success">Bug Report senden</button>
                </div>
            </form>
        </div>
    </div>
</div>
<script src="~/lib/jquery/dist/jquery.js"></script>
<script src="~/lib/bootstrap/dist/js/bootstrap.bundle.js"></script>
<script>
    $('#BugReportBtn').on('click', function (event) {

        var url = "/Smarty/SendBugReport";

        var description = document.getElementById("Description").value;
        var fileInput = $('#FormFile')[0];
        var formFile = fileInput.files[0];

        var formData = new FormData();
        formData.append("Description", description);
        formData.append("FormFile", formFile);

        $.ajax({
            type: "POST",
            url: url,
            data: formData,
            dataType: "json",
            processData:false,
            contentType: false,
            success: function (data) {
                if (!data.isError) {
                    $("#result").html("<span class='border border-success text-success'>" + data.message + "</span>");
                } else {
                    $("#result").html("<span class='border border-danger text-danger'>" + data.message + "</span>");
                }              
                $('#bugModal').modal('show');

            }

        });


    });
</script>

2.動作

[HttpPost]
    public async Task<JsonResult> SendBugReport(BugViewModel viewModel)
    {
        //Process Form

        string message;
        bool isError;

        //set data to message and isError
        return Json(new { message, isError });

    }