4

我有一个部分视图，其中包含用于上传文件的文件输入。此视图上的用户将从他们的工作站中选择一个文件并单击上传按钮。上传点击将表单提交给一个动作方法，文件被解析并返回相同的视图以自动填充视图上的一些字段。

一切照原样，运行良好。我正在向现有视图添加一个新要求，如下所示：

要求

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

在发布后的控制器操作方法中，我的目标是捕获他们按下的按钮，并根据按下的按钮相应地选择文件解析逻辑。

问题

我创建了一个 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)
        {
}
4

3 回答 3

13

恭喜！您遇到了一个非常晦涩难懂的错误并且很难排除故障！

问题在于您的标记；你的按钮有属性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/EMC 标准），并且由于大量的遗留网站，WebKit（Chrome、Safari）和 Gecko（Firefox）已经实现了相同的破坏行为。

于 2013-04-05T03:01:27.520 回答
1

您需要做几件事。

首先，设置Modal为真。False 表示它不会阻止用户点击页面上除框外的其他内容。

其次，您需要将onclick提交按钮上的更改为包含;return false; 它应该为onclick=initUploadDailog();return false;" 这将防止表单在单击提交按钮后简单地提交。

第三，一旦选择了适当的按钮，对话框本身就需要提交表单。请参见此处：jquery 对话框：确认单击提交按钮

于 2013-03-28T22:24:48.700 回答
1

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

但是，如果您想按照预期的方式使用 jQuery，您将需要查看 jQuery 的event.preventDefault()。首先，给你的按钮一个 ID，比如id="art-button". 接下来，将您的函数更改为绑定到按钮单击（我喜欢使用 .bind 与 .click 以实现浏览器兼容性）。

改变这个：

function initUploadDailog(e) {
    // Your code
}

对此：

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

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

于 2013-04-06T00:44:47.500 回答