以前、Chrome のアプリでこの MVC 機能を正常にテストしましたが、IE (10) と Firefox でも最近テストしました。
クエリを実行してレポートを生成するためにモデル値をコントローラーに送信するページの送信ボタンをマッシュすると、Firefox でのみ機能するようになりました (3 つのブラウザーにはそれぞれ固有の特徴があります。コホートとの関係では鈍い」（紫と金色に光る）-しかし、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 がこのように失敗する原因は何でしょうか?
アップデート
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() msg が表示されます。
コンソールにもエラー メッセージが1 つありますが、これは次のとおりです。
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 でも "" です...そして、最初は失敗しました - 続行しません。2回目は通じたけど…???