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

<强>恭喜！你遇到了一个非常模糊的错误，很难排除故障！

问题在于你的标记;您的按钮具有属性name="submit"。如图所示将其删除：

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

当您致电currentForm.submit()时，不调用原生form.submit()功能; 尝试将button元素用作函数！

以下是您的代码working jsFiddle。

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

Answer 2

您需要做几件事。

首先，将Modal设置为true。 False意味着它不会阻止用户点击页面旁边的其他内容。

其次，您需要更改提交按钮上的onclick以包含;return false;它应该显示onclick=initUploadDailog();return false;"这将阻止表单在单击提交按钮后简单地提交。< / p>

第三，一旦选择了适当的按钮，对话框本身就需要提交表单。见这里：jquery dialog: confirm the click on a submit button

Answer 3

我看到2个解决方案。首先，如果您只想按照惯例使用所有内容，请尝试将onclick="initUploadDailog();return false;"更改为onclick="return initUploadDailog();"。然后我认为您的浏览器会在发布表单之前等待返回true或false。

但是，如果你想按照预期的方式使用jQuery，你就会想要查看jQuery的event.preventDefault()。首先，为您的按钮添加id="art-button"之类的ID。接下来，将您的函数更改为绑定到按钮单击（我喜欢使用.bind vs .click以获得浏览器兼容性）。

改变这个：

function initUploadDailog(e) {
    // Your code
}

对此：

$("#art-button").bind('click', function(e) {
    e.preventDefault();
    // Your code
    $("#form-id").submit();
});

您还可以绑定到实际的表单提交，阻止默认设置，并使用AJAX发布您的数据。

JavaScript确认会自动发布表单

3 个答案: