PartialView视野外

Question

我对PartialView有一个问题，在调用一些操作后，返回视图呈现出视图之外，就像另一个视图..

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

布局

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

但是是这样的

​

​

所以。部分视图如何调用post操作、等待响应和在同一视图中显示响应.

Answer 1

您需要发布使用Ajax或javascript并更新PartialView：

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

上传文件：

$(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");
                }
            });
        });
    });