我之前在 Chrome 中的应用程序中成功测试了此 MVC 功能,但最近也在 IE (10) 和 Firefox 中进行了测试。
当我在将模型值发送到其控制器以运行查询和生成报告的页面上混合提交按钮时,它现在只能在 Firefox 中工作(这三个浏览器中的每一个确实都有自己独特的特征——它们在哪里发光或“相对于他们的同类(闪烁着紫色和金色的光芒)来说,“沉闷”——但 Chrome 和 Firefox 似乎已经失去了提交按钮的点击处理程序和相应的控制器方法之间的联系。
在 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 的请求,这里是相关视图的 jQuery:
视图中的 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中也是“”……第一次通过,它也失败了——不会继续下去。第二次通过,它通过了,虽然......?