防止嵌套表单的按钮提交整个表单答案

【问题标题】：Prevent button of nested form to submit whole form防止嵌套表单的按钮提交整个表单
【发布时间】：2020-04-13 16:59:07
【问题描述】：

在我看来：

<form asp-action="Edit">
        <div asp-validation-summary="ModelOnly" class="text-danger"></div>
        <input type="hidden" asp-for="Id" />

        <div class="form-group">
            <label asp-for="foto" class="control-label">Afbeelding</label>
            @{
                if (Model.foto == null)
                {
                    <form  asp-controller="Upload" asp-action="SaveFoto" classenctype="multipart/form-data">

                        <div class="form-group row">
                            <div class="custom-file">
                                <input class="form-control custom-file-input" type="file" name="image"/>
                                <label class="custom-file-label">Bladeren....</label>
                                </div>                              
                        </div>
                        <div class="form-group">
                            <button type="submit">OK</button>
                        </div>
                        <img src="@ViewData["Filelocation"]" />
                    </form>
                }
                else
                {
                    <label>er is al een foto</label>
                }
            }
        </div>            
        <div class="form-group">
            <input type="submit" value="Save" class="btn btn-primary" />
        </div>
    </form>

我有一个表格来更新整个记录，但有一个嵌套表格来上传照片文件。如何防止照片文件按钮发布整个表单？

我有这个 JS：

<script>
    $(document).ready(function (e) {
        e.preventDefault();
        $(".custom-file-input").on("change",
            function () {
                console.log('processing');
                var filename = $(this).val().split("\\").pop();
                $(this).next(".custom-file-label").html(filename);
            })

    });
</script>

控制器：

[HttpPost]
    [ValidateAntiForgeryToken]
    public async Task<IActionResult> SaveFoto(IFormFile image)
    {
        string foto = null;
        if (ModelState.IsValid)
        {
            if (image != null && image.Length > 0)
            {
                var imagepath = @"\images\speelgoed";
                var uploadpath = env.WebRootPath;
                var uniquefilename = Guid.NewGuid().ToString();
                var filename = Path.GetFileName(uniquefilename + '.' + image.FileName.Split('.')[1].ToLower());
                string fullpath = uploadpath + filename;

                imagepath = imagepath + @"\";
                var filepath = @".." + Path.Combine(imagepath, filename);
                using (var filestream = new FileStream(fullpath, FileMode.Create))
                {
                    await image.CopyToAsync(filestream);
                }

                ViewData["Filelocation"] = filepath;
            }

            return View();


        }

        return View();
    }

此时，我什至无法调试，因为我在控制器上放置的断点没有被命中... 有什么建议？谢谢，詹姆斯

【问题讨论】：

向内部表单添加一个提交事件处理程序并在其中调用e.preventDefault()。

标签： javascript html asp.net asp.net-core

【解决方案1】：

你不能在 HTML 中拥有这个功能和结构，因为我们不能将一个表单输入作为另一个表单输入的子输入，我们不能使用嵌套表单输入

stackoverflow 中的另一个答案： Can you nest html forms?

【讨论】：