首页
学习
活动
专区
圈层
工具
发布
首页
学习
活动
专区
圈层
工具
MCP广场
社区首页 >问答首页 >如何在剃须刀模型中设置输入type=“文件”

如何在剃须刀模型中设置输入type=“文件”
EN

Stack Overflow用户
提问于 2020-10-11 06:32:55
回答 1查看 1.9K关注 0票数 0

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

代码语言:javascript
运行
复制
<input asp-for="CertImageFile" type="file" accept=".jpg, .jpeg, .png">

模型

代码语言:javascript
运行
复制
public IFormFile CertImageFile { get; set; }
EN

回答 1

Stack Overflow用户

发布于 2020-10-12 02:57:10

您可以尝试使用ajax和部分视图:

MyModelClass:

代码语言:javascript
运行
复制
public class MyModelClass
    {
        public IFormFile CertImageFile { get; set; }
    }

查看:

代码语言:javascript
运行
复制
@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();
            }

_Partial:

代码语言:javascript
运行
复制
<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>

主计长:

代码语言:javascript
运行
复制
[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");
        }

结果:

票数 1
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接:

https://stackoverflow.com/questions/64301258

复制
相关文章

相似问题

领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档