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!

Do you need the Partial View to appear on the page refresh? If not you can just return the `View` you want to navigate to instead (`View("SomeView", viewModel);`) — Dortimer, Jan 03 '20 at 17:25
@Dortimer No, I want to refresh the Partial View with content like Error Messages, Success messages etc. — Vins, Jan 03 '20 at 18:39
That's doing a full POST. You need to use AJAX as shown here: https://stackoverflow.com/questions/35202804/submitting-a-razor-form-using-jquery-ajax-in-mvc6-using-the-built-in-functionali — Steve Greene, Jan 03 '20 at 20:17
if you only want the partial view to update, you should consider just creating a full page/controller for it and placing it in an iframe. (Or process the form via javascript...) Otherwise just return... the partial will be refreshed along with the page. — pcalkins, Jan 03 '20 at 22:05
I deleted the answer I submitted. @SteveGreene is correct. I don't believe there is an alternative. — Shai Cohen, Jan 04 '20 at 11:35

score 1 · Accepted Answer · answered Jan 06 '20 at 08:39

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

    }

Refresh PartialView in MVC Controller

1 Answers1