我之前已在 Chrome 中的应用程序中成功测试了此 MVC 功能，但最近也在 IE (10) 和 Firefox 中进行了测试。
当我混合页面上的提交按钮(将模型值发送到其 Controller 以运行查询并生成报告)时，它现在只能在 Firefox 中运行(这三个浏览器中的每一个确实都有自己独特的特征 - 它们在其中相对于它们的同类(闪闪发光的紫色和金色)来说，它们是 Shiny 的或“暗淡的”——但是 Chrome 和 Firefox 似乎失去了提交按钮的点击处理程序和相应的 Controller 方法之间的连接。
在 Chrome 和 IE 中按下提交按钮后，该应用程序似乎只是挂起；我的断点(第一个断点位于 Controller 类中相应的 [HttpPost] ActionResult 的开头)未达到。事实上，应用程序似乎在按下按钮后卡住了——之后右键单击提交按钮不会在上下文菜单中提供“检查该元素”。
[HttpPost]
public ActionResult ReceiptCriteria(SalesReceiptCriteriaModel model)
{
if (ModelState.IsValid) // <-- there is a breakpoint here; only Firefox reaches it
{
. . .
在 Firefox 中，它运行并命中断点。
什么可能导致 Chrome 和 IE 以这种方式失败，而 Firefox 却在继续？
更新
为了响应 Moby 的请求，以下是相关 View 的 jQuery:
View 中的 HTML 非常通用； jQuery 是:
$("#submit_button").click(function() {
// http://stackoverflow.com/questions/18192288/how-can-i-compare-date-time-values-using-the-jqueryui-datepicker-and-html5-time
var begD = $.datepicker.parseDate('mm/dd/yy', $('#BeginDate').val());
var endD = $.datepicker.parseDate('mm/dd/yy', $('#EndDate').val());
if (begD > endD) {
alert('Begin date must be before End date');
$('#BeginDate').focus();
return false;
}
else if (begD.toString() == endD.toString()) {
var dteString = begD.getFullYear() + "/" + (begD.getMonth() + 1) + "/" + begD.getDate();
var begT = new Date(dteString + " " + $('#BeginTime').val());
var endT = new Date(dteString + " " + $('#EndTime').val());
if (begT > endT) {
alert('Begin date must be before End date');
$('#BeginTime').focus();
return false;
}
}
$("#NumberOfResults").css("visibility", "visible");
$("#NumberOfResults").html("Please wait...");
EnableButton("submit_button", false);
// If all are selected, don't enumerate them; just set it at "All" (change of case, from 'all' to 'All', shows that the logic did execute)
var deptsList = $('#depts').checkedBoxes();
if (deptsList.length < deptsArray.length) {
$('#deptHeader span').html(deptsList.join(", "));
}
else if (deptsList.length == deptsArray.length) {
$('#deptHeader span').html("All");
}
// " "
var sitesList = $('#sites').checkedBoxes();
$('#sitesHeader span').html(sitesList.join(", "));
if (sitesList.length < sitesArray.length) {
$('#sitesHeader span').html(sitesList.join(", "));
}
else if (sitesList.length == sitesArray.length) {
$('#sitesHeader span').html("All");
}
$('#hiddenDepts').val(deptsList);
$('#hiddenSites').val(sitesList);
var UPCs = $('#UPC').val();
if (UPCs == "All") {
$('#UPC').val("1"); // take everything (1 and greater)
}
var resultsText = jQuery.trim($("#spanNumberOfResults").text());
if (resultsText != "") {
$("#NumberOfResults").css("visibility", "visible");
if (resultsText == "0") {
$("#NumberOfResults").css("color", "red");
} else {
var href = '/@ConfigurationManager.AppSettings["ThisApp"]/TLDCriteria/LoadReport';
var report_parms = {
GUID: "@Model.GUID",
SerialNumber: "@Model.SerialNumber",
ReportName: "@Model.ReportName"
};
window.open(href, "report_window", "resizable=1, width=850, left=" + (screen.width / 2 - 425));
}
}
}); // end of submit button click
function EnableButton(id, enable) {
if (enable) {
$("#" + id).removeAttr("disabled")
.removeClass("bottomButtonDisabled")
.removeClass("bottomButtonEnabled")
.addClass("bottomButtonEnabled");
} else {
$("#" + id).attr("disabled", "true")
.removeClass("bottomButtonDisabled")
.removeClass("bottomButtonEnabled")
.addClass("bottomButtonDisabled");
}
}
更新2
我的 .js 和 .css 引用资料可能会或可能不会阐明这个问题:
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.9.2/jquery-ui.min.js" type="text/javascript" defer > </script>
<script src="@Url.Content("~/Scripts/jquery.validate.min.js")" type="text/javascript" defer> </script>
<script src="@Url.Content("~/Scripts/jquery.validate.unobtrusive.min.js")" type="text/javascript" defer> </script>
<script src="@Url.Content("~/Scripts/jquery-migrate-1.2.0.min.js")" type="text/javascript"> </script>
<script src="@Url.Content("~/Scripts/anytime.compressed.js")" type="text/javascript"> </script>
<script src="@Url.Content("~/Scripts/dynamicCheckboxes.js")" type="text/javascript" > </script>
。 。 .
<link href="http://code.jquery.com/ui/1.9.2/themes/smoothness/jquery-ui.css" rel="stylesheet" type="text/css" />
<link href="@Url.Content("~/Content/dynamicCheckboxes.css")" rel="stylesheet" type="text/css" />
<link href="@Url.Content("~/Content/anytime.compressed.css")" rel="stylesheet" type="text/css" />
<!--[if lt IE 9]>
<script src="/Scripts/html5shiv.js"> </script>
<![endif]-->
更新3
Chrome 开发者工具中的“网络”选项卡看起来像怀俄明州中部(什么也没有)，底部有一条消息通知我“没有捕获到任何请求。重新加载页面以查看有关该网络的详细信息”网络事件。”
当我忠实地按下 F5 时，它显示了所有访问的 .js 和 .css 文件，最后(在顶部)显示了我正在看的页面。不过，混合“查看报告”不会导致选项卡中出现更多事件。不过，我确实看到了放置在提交按钮单击处理程序末尾的 console.log() 消息，即:“使其到达提交按钮单击的末尾”
控制台中也有一个错误消息，但是:
Failed to load resource: the server responded with a status of 400 (Bad Request) http://localhost/%3C%=%20System.Configuration.ConfigurationManager.AppSettings[%22ThisApp%22]%20%%3E/Content/Images/SSCSsprite.png
只是无法加载资源，不会造成其他困惑，对吧？
更新4
根据 Simon Halsey 的提示，我发现在 Chrome 中单步执行 jQuery 时，它无法通过此测试:
if (resultsText != "") {
...显然它不在 Firefox 中，我认为它在 IE 中也失败(我会用捷克语来确定这两种情况，并更新它)。
后来:Firefox 中也是“”...第一次，它也失败了 - 无法继续。第二次通过了，不过……？？？
最佳答案
有两个选项:
- 由于 JavaScript 错误，没有请求
- 您的请求签名与 Controller 方法不相符
A. 浏览器对某些 JavaScript 函数有不同的行为。这就是 jQuery 如此流行的原因之一。
找到它的最有效方法是在每个浏览器中逐行调试 javascript。
可能就是这个原因。
B. 另外你的 javascript 对我来说很奇特。我猜您正在捕获 sumbit 按钮单击并即时修改输入值。
我建议使用 $.post 或 $.ajax 和 PreventDefault 来代替。 它会让你的 JavaScript 更加清晰和简单。
C. 要分析从浏览器发送的请求，我建议使用 fiddler。 http://fiddler2.com/
关于asp.net-mvc - 什么会在 Chrome 和 IE 中将我的 View 和 Controller 相互解除 Hook ，但在 Firefox 中却不会？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/18217489/