Refresh PartialView in MVC Controller

Question

I'm trying to refresh my Partial View after submitting a form which will be processed in my controller. The problem is that whenever I try to refresh it form my controller, I get redirected to a blank page with content from the Partial View.

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>

Controller

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

    return PartialView("BugModal", viewModel);
   }

Thanks in advance!

Answer 1

I get redirected to a blank page with content from the Partial View.

That is expected because you use return PartialView() which will return the simple partial html to render it into the view.

I want to refresh the Partial View with content like Error Messages, Success messages etc

You could not get @ViewBag.message from the SendBugReport action, it is passed from the action of main page.

As the comment has said that, first of all, you could use ajax to submit the form to SendBugReport action.Then the action return message and isError json data to ajax success function. Finally, you render message on the view based on the value of isError :

1.Partial View (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.Action

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

    }