PartialView out of view

Question

I Have a problem with PartialView, after call some action, the return view render out of view, like another view..

HTML PartialView

<form asp-action="SendFoo" asp-controller="Foo" method="post" enctype="multipart/form-data">
    <input type="file" name="files" />
    <input type="file" name="files" />
    <button type="submit">Send Foo</button>
</form>

API

[HttpPost]
public async Task<IActionResult> SendFoo(IList<IFormFile> files)
{
    //do something

    return PartialView("_FooSendData");
}

Layout

<div class="container-fluid">
    <div id="partialViewContainer">
        @{Html.RenderPartial("_FooSendData"); }
    </div>
</div>

but el Partial View look like this

So. How the partial view call post action, wait response, and show response in the same view...

Answer 1

You need to post use Ajax or javascript and update PartialView:

$('#MySubmitButtonId').live('click', function (event) {
    $.post(
        '@Url.Action("PostAction", "Post")', 
        { content: 'GetpostDetails' }, 
        function(result) {
            $('#MyPartialContainerId').html(result);
        }
    );
});

For upload the file:

$(document).ready(function () {
        $("#Upload").click(function () {
            var formData = new FormData();
            var totalFiles = document.getElementById("FileUpload").files.length;
            for (var i = 0; i < totalFiles; i++)
            {
                var file = document.getElementById("FileUpload").files[i];

                formData.append("FileUpload", file);
            }
            $.ajax({
                type: "POST",
                url: '/Controller/Action',
                data: formData,
                dataType: 'json',
                contentType: false,
                processData: false,
                success: function (response) {
                     $('#MyPartialContainerId').html(response);
                },
                error: function (er) {
                    alert("er");
                }
            });
        });
    });