asp.net-core-mvc - 如何在剃须刀中从模型中设置输入类型=“文件”

Question

我有一个多步骤表单，其中包含多个文件类型的输入。在某些步骤中，我调用提交按钮，然后再次返回同一页面而不上传任何文件，因为我不想在此步骤中上传这些文件。例如，用户输入所有信息并选择他想要的文件，然后我转到控制器并返回页面以向他显示确认页面。如何使用模型属性填充输入文件？他再次提交文件属性不应为空的页面。

<input asp-for="CertImageFile" type="file" accept=".jpg, .jpeg, .png">

模型

public IFormFile CertImageFile { get; set; }

标签： asp.net-core-mvcrazor-pages

Answer 1

您可以尝试使用 ajax 和局部视图：

我的模型类：

public class MyModelClass
    {
        public IFormFile CertImageFile { get; set; }
    }

看法：

@model MyModelClass
<div class="row">
    <div class="col-md-6">
        <div>
            <input asp-for="CertImageFile" type="file" accept=".jpg, .jpeg, .png">
        </div>
        <button onclick="Confirm()">confirm</button>
    </div>
    <div id="modal"></div>
</div>
@section scripts{
    <script type="text/javascript">
        function Confirm() {
            $.ajax({
                url: "TestPartial",
                type: "POST",
               
                success: function (data) {
                    //put partial view to div
                    $("#modal").html(data);
                    $("#cartModal").modal('show');
                }
            });
        }
        function Submit() {
            var pdata = new FormData();
            var files = $("#CertImageFile").get(0).files;
            pdata.append('CertImageFile', files[0]);
            $.ajax({
                url: "Submit",
                type: "POST",
                data: pdata,
                processData: false,
                contentType: false,
                success: function (data) {
                 //you can do something or redirect to other page after post the data

                }
            });
            
        }
    </script>
}

Controller:

    [HttpPost]
            public IActionResult Save(MyModelClass myModelClass)
            {
                return Ok();
            }

_部分的：

<div class="modal fade cart-modal" id="cartModal" tabindex="-1" role="dialog" aria-labelledby="ModalLabel" aria-hidden="true">
        <div class="modal-dialog" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    Tip:
                </div>
                <div class="modal-body">
                   Do you want to submit the file?

                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-dismiss="modal" onclick="Submit()">submit</button>
                    <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
                    
                </div>
            </div>
        </div>
    </div>

控制器：

[HttpPost]
        //pass IFormFile to action
        public IActionResult Submit(MyModelClass myModelClass)
        {
            return Ok();
        }
        //view call action to pass partial view
        public IActionResult TestPartial() {
            return PartialView("_Partial");
        }

结果：