JavaScript确认会自动发布表单

Question

我有一个部分视图,其中包含用于上载文件的文件输入.此视图上的用户将从其工作站中选择一个文件,然后单击上载按钮.上载单击会将表单提交给操作方法,并解析文件并返回相同的视图以自动填充视图上的几个字段.

一切都是完美的.我在现有视图中添加了一个新要求,如下所示:

需求

用户选择一个文件并单击上传按钮.单击上载按钮后,会向用户显示一个JavaScript确认对话框,其中包含两个按钮选项,然后将表单提交给控制器操作方法.这些按钮是"Buffer Run Parsing"和"Normal Parsing".单击任何这些按钮将发布到控制器操作方法.

在post上的控制器动作方法中,我的目标是捕获他们按下的按钮,并根据按下的按钮我相应地选择文件解析逻辑.

问题

我创建了一个JavaScript函数,它显示了两个按钮,但对话框自动消失,表单发布到控制器.我希望它不发布,直到我点击任一确认按钮.

这是我在做的事情:

主要观点:

@using (Html.BeginForm("Create", "RunLogEntry", FormMethod.Post, new { id = "form", enctype = "multipart/form-data"}))
{
    <div id="main">
        @Html.Partial("_RunLogEntryPartialView", Model)
    </div>
}

局部视图:

<button name="submit" class="art-button" type="submit" value="Upload" onclick="initUploadDailog();return false;"
    style="width: 100px">
    Upload</button>

<div id="uploadConfirmation" style="font-size: 10px; font-weight: normal; overflow: scroll;
    width: 800px; height: 450px; display: none;">
</div>

JS功能:

 function initUploadDailog(e) {
        currentForm = $(this).closest('form');
        UploadDialog = $("#uploadConfirmation").dialog({
            modal: true,
            width: 400,
            autoOpen: true,
            title: 'Please select parsing type for Test Completed Computation',
            buttons: {
                "Normal Parsing": function () {
                    $("#hiddenInput").val("Normal");
                    alert(currentForm.innerHtml());
                    currentForm.submit();
                },
                "Buffer Parsing": function () {
                    $("#hiddenInput").val("Buffer Run");
                    currentForm.submit();
                }
            }
        });
    }

控制器:

   [HttpPost]
        [AcceptVerbs(HttpVerbs.Post)]
        public ActionResult Create(RunLogEntry runLogEntry, String ServiceRequest, string Hour, string Minute, string AMPM,
                                     string submit, IEnumerable<HttpPostedFileBase> file, String AssayPerformanceIssues1, List<string> Replicates)
        {
}

Answer 1

恭喜!你遇到了一个非常模糊的bug,很难排除故障!

问题在于你的标记; 你的按钮有属性name="submit".如图所示删除它:

<button class="art-button" type="submit" value="Upload" onclick="initUploadDailog();return false;" style="width: 100px">Upload</button>

当你打电话时currentForm.submit(),它不会调用本机form.submit()函数; 它试图使用按钮元素作为一个功能!

这是你的代码的工作jsFiddle.

一点点历史:由于全能的Internet Explorer,具有name属性集的元素会自动转换为可通过JavaScript直接访问的对象(或子对象).这最初是由IE团队多年前考虑过的(虽然没有遵循JavaScript/EMCA标准),并且由于大量遗留网站,WebKit(Chrome,Safari)和Gecko(Firefox)实现了相同的破坏行为.