使用JQuery和MVC3提交某些情况下未完成的事件

Question

我在使用JQuery时遇到了一个非常奇怪的问题。我有一个文件上传表单，用户可以点击两个按钮："保存文件"或"无图片"。这两个调用相同的控制器来管理文件上传字段中是否有图片。

奇怪的是，只有在fileupload字段为空的情况下才会调用控制器get。如果有人选择了一张照片，它就不会进入控制器，这让我认为提交不起作用。但是我的jquery代码被调用了，并且总是返回true。。。

这是文档中的JQuery代码。准备：

$('#ImgForm').on('submit', function () {
var fileUploader = document.getElementById("fileuploader");
$(fileUploader).hide();
var fileUploader = document.getElementById("informations");
$(fileUploader).show();
//Create a new image and insert it into the Images div.  Just to be fancy, 
//we're going to use a "FadeIn" effect from jQuery
var imgDiv = document.getElementById("Images");
loadingImg = new Image();
loadingImg.src = "../../Pictures/ajax-loader.gif";
//Hide the image before adding to the DOM
$(loadingImg).hide();
imgDiv.appendChild(loadingImg);
//Now fade the image in
$(loadingImg).fadeIn(500, null);
return true;
});

以下是MVC视图代码：

@using (Html.BeginForm("UploadImage", "Recipe", FormMethod.Post,
new
{
enctype = "multipart/form-data",
id = "ImgForm",
name = "ImgForm",
target = "UploadTarget"
}))
{
<div id="fileuploader">
<h4>Étape 1: Choisir une photo</h4>
<input id="lefile" type="file" style="display:none" name="imageFile" accept="image/x-png, image/jpeg" />
<div class="input-append">
<input id="photoCover" class="input-large" type="text" />
<a class="btn" onclick="$('input[id=lefile]').click();">Parcourir...</a>
</div>
<script type="text/javascript">
$('input[id=lefile]').change(function () {
$('#photoCover').val($(this).val());
}); 
</script>
<input id="SaveImage" type="submit" class="btn btn-success" value="Sauvegarder l'image" />
<input id="SaveNoImage" type="submit" class="btn btn-danger" value="Aucune photo" />
</div>  
}

我不会发布控制器代码，因为它只是在文件上传为空的情况下进入内部。

知道出了什么问题吗？感谢

非常重要的编辑

今天，我决定回到我的SVN历史，看看发生了什么。我发现了一些非常奇怪的事情。如果我想让它工作，我需要在视图本身中包含jquery(Create.cs.html)。我一直认为在_layout.cshtml中包含jquery.js文件是不合适的，但事实并非如此！所以只有这样，它才能在Chrome中工作。

我在Internet Explorer中仍然有一个错误，它阻止了图像的显示，因为iframe的"加载"上的事件启动了这个："运行时错误Microsoft JScript:访问被拒绝"。它在Chrome中运行非常完美。知道吗？？？

编辑2

评论中要求它在jsfiddle中添加代码。我不太确定它是如何工作的，所以我复制渲染的html，剪切javascript并将其放在javascript窗口中。它现在没有任何作用，我不知道为什么，但至少你可以看到整个画面。希望能有所帮助。(注意，与问题中的代码相比，我做了一些修改，但问题是一样的)。在这里

Answer 1

这里有很多问题：

_layout中的

1. js-ref就足够了，但是，在加载jQuery之前，您正在引用$inline。将所有脚本移到末尾并封装在$(document).ready(function ({ });中，然后可以删除重复的js引用
2. 如果在同一块中声明var fileUploader两次-危险，请重命名其中一个
3. 你从来没有声明loadingImg，所以loadingImg = new Image();行使用了一个隐式声明的全局-如果它不存在，那就很危险(没有完整的代码就无法判断)
4. 一旦修复了这些问题，您将看到表单永远不应该返回到服务器，因为您正在处理提交客户端(在jQuery中)

修复了这些问题后，我在Chrome、FF、IE9和IE10中得到了相同的行为。这是我使用的视图：

@{
ViewBag.Title = "Test";
Layout = "~/Views/Shared/_Layout.cshtml";
}
<h2>Test</h2>
@using (Html.BeginForm("Test", "Home", FormMethod.Post,
new
{
enctype = "multipart/form-data",
id = "ImgForm",
name = "ImgForm",
target = "UploadTarget"
}))
{
<div id="fileuploader">
<h4>Étape 1: Choisir une photo</h4>
<input id="lefile" type="file" style="display:none" name="imageFile" accept="image/x-png, image/jpeg" />
<div class="input-append">
<input id="photoCover" class="input-large" type="text" />
<a class="btn" onclick="$('input[id=lefile]').click();">Parcourir...</a>
</div>
<input id="SaveImage" type="submit" class="btn btn-success" value="Sauvegarder l'image" />
<input id="SaveNoImage" type="submit" class="btn btn-danger" value="Aucune photo" />
</div>  
}
<div id ="UploadTarget">upload target</div>
<div id="Images"></div>
<script type="text/javascript">
$(document).ready(function () {
$('input[id=lefile]').change(function () {
debugger;
$('#photoCover').val($(this).val());
});
$('#ImgForm').on('submit', function () {
alert('in js submit');
var fileUploader = document.getElementById("fileuploader");
$(fileUploader).hide();
var fileUploader1 = document.getElementById("informations");
$(fileUploader1).show();
//Create a new image and insert it into the Images div.  Just to be fancy, 
//we're going to use a "FadeIn" effect from jQuery
var imgDiv = document.getElementById("Images");
var loadingImg = new Image();
loadingImg.src = "/content/335.gif";
//Hide the image before adding to the DOM
$(loadingImg).hide();
imgDiv.appendChild(loadingImg);
//Now fade the image in
$(loadingImg).fadeIn(500, null);
debugger;
return true;
});
});
</script>