MVC：JavaScript 不再工作
Posted
技术标签:
【中文标题】MVC：JavaScript 不再工作【英文标题】：MVC: JavaScripts no longer working 【发布时间】：2018-04-13 15:16:48 【问题描述】：由于某种原因，我认为我的脚本停止工作。他们以前工作过 - 不幸的是我不记得他们在什么时候停止工作，所以我无法真正重现它崩溃的地方。但是，我可以肯定地说我根本没有更改脚本。这是我的看法：
@using errandomWeb.Models
@model errandomWeb.Models.errands
@
ViewBag.Title = "Get It Done For You";
<div id="postErrandContainer" class="manageContainer">
<div id="postErrandHeaderSection" class="manageHeaderSection">
<h1 id="postErrandHeaderTitle" class="manageHeaderTitle">
@ViewBag.Title
</h1>
</div>
<section id="postErrand" class="manageForm">
@using (html.BeginForm("PostErrandToDB", "errandom", FormMethod.Post, new @id = "postErrandForm", @class = "form-horizontal", @role = "form" ))
@Html.AntiForgeryToken()
<!-- user activity tracking section -->
@Html.HiddenFor(m => m.LatitudePosted, new @id = "postErrandLatitudePosted", @class = "userActivity" )
@Html.HiddenFor(m => m.LongitudePosted, new @id = "postErrandLongitudePosted", @class = "userActivity" )
@Html.HiddenFor(m => m.LocationPosted, new @id = "postErrandLocationPosted", @class = "userActivity" )
<!-- autopopulate errand values with current location -->
<script>
$(document).ready(function defaultPostValues()
if (!navigator.geolocation) return;
navigator.geolocation.getCurrentPosition(function (userCoordinates)
geocoder = new google.maps.Geocoder();
userLatLng = new google.maps.LatLng(userCoordinates.coords.latitude, userCoordinates.coords.longitude);
document.getElementById('postErrandLatitudePosted').value = userCoordinates.coords.latitude;
document.getElementById('postErrandLongitudePosted').value = userCoordinates.coords.longitude;
geocoder.geocode( 'latLng': userLatLng , function (results, status)
if (status == google.maps.GeocoderStatus.OK)
var result = results[0];
locationPlaceholder = "";
for (var i = 0, len = result.address_components.length; i < len; i++)
var addressComponent = result.address_components[i];
if (addressComponent.types.indexOf("locality") >= 0) locationPlaceholder = addressComponent.long_name;
if (locationPlaceholder != '')
document.getElementById('postErrandLocationPosted').value = locationPlaceholder;
document.getElementById('postErrandLocationField').value = locationPlaceholder;
window.alert(locationPlaceholder);
);
);
</script>
<div id="postErrandErrandSection" class="manageSection">
<p id="postErrandErrandSectionTitle" class="manageSectionTitle">
errand
</p>
<div id="postErrandPictureArea" class="manageArea row">
@Html.LabelFor(m => m.Picture, new @id = "postErrandPictureLabel", @class = "manageLabel col-xs-offset-1 col-xs-10 col-sm-offset-1 col-sm-10 col-md-offset-1 col-md-3 col-lg-offset-1 col-lg-4" )
<a id="postErrandPictureSelectionButton" class="manageField col-xs-offset-1 col-xs-10 col-sm-offset-1 col-sm-10 col-md-offset0 col-md-7 col-lg-offset-0 col-lg-6" href="#">
select a file...
</a>
@Html.TextBoxFor(m => m.Picture, new @id = "postErrandPictureField", @class = "manageField col-xs-offset-1 col-xs-10 col-sm-offset-1 col-sm-10 col-md-offset-0 col-md-7 col-lg-offset-0 col-lg-6", @type = "file", @style = "display: none" )
</div>
<hr />
<!-- customization of picture selection button -->
<script>
jQuery("#postErrandPictureSelectionButton").click(function ()
$("#postErrandPictureField").click();
$("#postErrandCroppingArea").show();
);
</script>
<script>
$("#postErrandPictureField").change(function ()
var fullFileName = $("#postErrandPictureField").val()
$("#postErrandPictureSelectionButton").html(fullFileName.substr(fullFileName.lastIndexOf('\\') + 1));
);
</script>
<div id="postErrandCroppingArea" class="manageArea row" style="display: none">
<img id="postErrandOriginal" class="postErrandImage" src="" style="display: none" />
<canvas id="postErrandCropped" class="postErrandImage" ></canvas>
<input id="postErrandButtonCrop" class="manageButton col-xs-offset-1 col-xs-10 col-sm-offset-1 col-sm-10 col-md-offset-1 col-md-10 col-lg-offset-1 col-lg-10" type="button" value="Crop" />
<input id="postErrandCropX" class="postErrandData" name="postErrandCropX" type="hidden" />
<input id="postErrandCropY" class="postErrandData" name="postErrandCropY" type="hidden" />
<input id="postErrandCropW" class="postErrandData" name="postErrandCropW" type="hidden" />
<input id="postErrandCropH" class="postErrandData" name="postErrandCropH" type="hidden" />
<input id="postErrandCroppedPicture" class="postErrandData" name="postErrandCroppedPicture" type="hidden" />
</div>
<div id="postErrandLocationArea" class="manageArea row">
@Html.LabelFor(m => m.Location, new @id = "postErrandLocationLabel", @class = "manageLabel col-xs-offset-1 col-xs-10 col-sm-offset-1 col-sm-10 col-md-offset-1 col-md-3 col-lg-offset-1 col-lg-4" )
@Html.TextBoxFor(m => m.Location, new @id = "postErrandLocationField", @class = "manageField col-xs-offset-1 col-xs-10 col-sm-offset-1 col-sm-10 col-md-offset-0 col-md-7 col-lg-offset-0 col-lg-6", @placeholder = "location" )
@Html.ValidationMessageFor(m => m.Location, "", new @id = "postErrandLocationValidation", @class = "manageValidation col-xs-offset-1 col-xs-10 col-sm-offset-1 col-sm-10 col-md-offset-4 col-md-7 col-lg-offset-5 col-lg-6" )
</div>
<!-- place autocomplete for Location -->
<script>
new google.maps.places.Autocomplete((document.getElementById('postErrandLocationField')), types: ['geocode'] );
</script>
<hr />
<!-- time autocomplete for StartDateTime -->
<script>
$(document).ready(function defaultStartDateTime()
startDateTime = new Date();
var h = startDateTime.getHours() + 1;
if (h > 23)
h = "00"
else
if (h < 10)
h = "0" + h
var d = startDateTime.getDate();
if (d < 10)
d = "0" + d
var m = startDateTime.getMonth() + 1;
if (m < 10)
m = "0" + m
var y = startDateTime.getFullYear();
placeholderStartDateTime = "";
placeholderStartDateTime = m + "/" + d + "/" + y + " " + h + ":00";
if (placeholderStartDateTime != '')
document.getElementById('postErrandStartDateTimeField').value = placeholderStartDateTime;
;
)
</script>
<div id="postErrandStartDateTimeArea" class="postErrandArea row">
@Html.LabelFor(m => m.StartDateTime, new @id = "postErrandStartDateTimeLabel", @class = "manageLabel col-xs-offset-1 col-xs-5 col-sm-offset-1 col-sm-5 col-md-offset-1 col-md-5 col-lg-offset-1 col-lg-5" )
@Html.LabelFor(m => m.ASAP, new @id = "postErrandASAPLabel", @class = "manageLabel col-xs-5 col-sm-5 col-md-5 col-lg-5" )
@Html.TextBoxFor(m => m.StartDateTime, new @id = "postErrandStartDateTimeField", @class = "manageField col-xs-offset-1 col-xs-6 col-sm-offset-1 col-sm-4 col-md-offset-5 col-md-3 col-lg-offset-5 col-lg-3", @onblur = "document.getElementById('postErrandEndDateTimeField').value = document.getElementById('postErrandStartDateTimeField').value;" )
@Html.HiddenFor(m => m.StartDateTime, new @id = "postErrandStartDateTimeHiddenField", @class = "manageField col-xs-offset-1 col-xs-10 col-sm-offset-1 col-sm-10 col-md-offset-0 col-md-7 col-lg-offset-0 col-lg-6" )
<div id="postErrandASAPBuffer" class="postErrandBuffer col-xs-3 col-sm-5 col-md-2 col-lg-2"></div>
@Html.CheckBoxFor(m => m.ASAP, new @id = "postErrandASAPField", @class = "manageField col-xs-1 col-sm-1 col-md-1 col-lg-1", @onclick = "document.getElementById('postErrandStartDateTimeHiddenField').value = placeholderStartDateTime; document.getElementById('postErrandStartDateTimeField').disabled=this.checked;" )
@Html.ValidationMessageFor(m => m.StartDateTime, "", new @id = "postErrandStartDateTimeValidation", @class = "manageValidation col-xs-offset-1 col-xs-6 col-sm-offset-1 col-sm-4 col-md-offset-5 col-md-3 col-lg-offset-5 col-lg-3" )
</div>
<div id="postErrandEndDateTimeArea" class="postErrandArea row">
@Html.LabelFor(m => m.EndDateTime, new @id = "postErrandEndDateTimeLabel", @class = "manageLabel col-xs-offset-1 col-xs-5 col-sm-offset-1 col-sm-5 col-md-offset-1 col-md-5 col-lg-offset-1 col-lg-5" )
@Html.LabelFor(m => m.DurationInHours, new @id = "postErrandDurationInHoursLabel", @class = "manageLabel col-xs-5 col-sm-5 col-md-5 col-lg-5" )
@Html.TextBoxFor(m => m.EndDateTime, new @id = "postErrandEndDateTimeField", @class = "manageField col-xs-offset-1 col-xs-6 col-sm-offset-1 col-sm-4 col-md-offset-5 col-md-3 col-lg-offset-5 col-lg-3" )
<div id="postErrandDurationInHoursBuffer" class="postErrandBuffer col-xs-1 col-sm-4 col-md-1 col-lg-1"></div>
@Html.TextBoxFor(m => m.DurationInHours, new @id = "postErrandDurationInHoursField", @class = "manageField col-xs-3 col-sm-2 col-md-2 col-lg-2" )
@Html.ValidationMessageFor(m => m.EndDateTime, "", new @id = "postErrandEndDateTimeValidation", @class = "manageValidation col-xs-offset-1 col-xs-10 col-sm-offset-1 col-sm-10 col-md-offset-4 col-md-7 col-lg-offset-5 col-lg-6" )
@Html.ValidationMessageFor(m => m.DurationInHours, "", new @id = "postErrandDurationInHoursValidation", @class = "manageValidation col-xs-offset-1 col-xs-10 col-sm-offset-1 col-sm-10 col-md-offset-4 col-md-7 col-lg-offset-5 col-lg-6" )
</div>
<hr />
<div id="postErrandOfferingArea" class="postErrandArea row">
@Html.LabelFor(m => m.Currency, new @id = "postErrandCurrencyLabel", @class = "manageLabel col-xs-offset-1 col-xs-4 col-sm-offset-1 col-sm-4 hidden-md hidden-lg" )
@Html.LabelFor(m => m.Offering, new @id = "postErrandOfferingLabel", @class = "manageLabel col-xs-offset-0 col-xs-3 col-sm-offset-0 col-sm-3 col-md-offset-1 col-md-3 col-lg-offset-1 col-lg-4" )
@Html.DropDownListFor(Currencies => Currencies.Currency, new SelectList(ViewBag.currency as List<SelectListItem>, "Value", "Text"), "-select-", new @id = "postErrandCurrencyField", @class = "manageField col-xs-offset-1 col-xs-4 col-sm-offset-1 col-sm-4 col-md-offset-0 col-md-3 col-lg-offset-0 col-lg-2" )
@Html.TextBoxFor(m => m.Offering, new @id = "postErrandOfferingField", @class = "manageField col-xs-offset-0 col-xs-6 col-sm-offset-0 col-sm-6 col-md-offset-0 col-md-4 col-lg-offset-0 col-lg-4", @placeholder = "$$$" )
@Html.ValidationMessageFor(m => m.Currency, "", new @id = "postErrandCurrencyValidation", @class = "manageValidation col-xs-offset-1 col-xs-10 col-sm-offset-1 col-sm-10 col-md-offset-4 col-md-7 col-lg-offset-5 col-lg-6" )
@Html.ValidationMessageFor(m => m.Offering, "", new @id = "postErrandOfferingValidation", @class = "manageValidation col-xs-offset-1 col-xs-10 col-sm-offset-1 col-sm-10 col-md-offset-4 col-md-7 col-lg-offset-5 col-lg-6" )
</div>
<div id="postErrandPriceArea" class="postErrandArea row">
@Html.HiddenFor(m => m.errandTax, new @id = "postErrandTaxField", @class = "postErrandTaxField" )
@Html.LabelFor(m => m.Price, new @id = "postErrandPriceLabel", @class = "manageLabel col-xs-offset-1 col-xs-10 col-sm-offset-1 col-sm-10 col-md-offset-1 col-md-3 col-lg-offset-1 col-lg-4" )
@Html.TextBoxFor(m => m.Price, new @id = "postErrandPriceField", @class = "manageField col-xs-offset-1 col-xs-10 col-sm-offset-1 col-sm-10 col-md-offset-0 col-md-7 col-lg-offset-0 col-lg-6", @disabled = true )
@Html.HiddenFor(m => m.Price, new @id = "postErrandPriceHiddenField", @class = "manageField col-xs-offset-1 col-xs-10 col-sm-offset-1 col-sm-10 col-md-offset-0 col-md-7 col-lg-offset-0 col-lg-6" )
</div>
<!-- calculate errand tax -->
<script>
document.getElementById('postErrandOfferingField').onchange = function () calculateErrandTax() ;
function calculateErrandTax()
var offering = document.getElementById('postErrandOfferingField').value;
var userRating = document.getElementById('postErrandUserRating').value;
var currency = document.getElementById('postErrandCurrencyField').value;
if (offering < 50)
if (userRating > 5 * 0.95)
var price = (offering * 1.12);
document.getElementById('postErrandTaxField').value = 0.12;
document.getElementById('postErrandPriceField').value = currency + " " + price.toFixed(2);
document.getElementById('postErrandPriceHiddenField').value = currency + " " + price.toFixed(2);
else
var price = offering * 1.15;
document.getElementById('postErrandTaxField').value = 0.15;
document.getElementById('postErrandPriceField').value = currency + " " + price.toFixed(2);
document.getElementById('postErrandPriceHiddenField').value = currency + " " + price.toFixed(2);
else if (offering < 100)
if (userRating > 5 * 0.95)
var price = offering * 1.10;
document.getElementById('postErrandTaxField').value = 0.10;
document.getElementById('postErrandPriceField').value = currency + " " + price.toFixed(2);
document.getElementById('postErrandPriceHiddenField').value = currency + " " + price.toFixed(2);
else
var price = offering * 1.12;
document.getElementById('postErrandTaxField').value = 0.12;
document.getElementById('postErrandPriceField').value = currency + " " + price.toFixed(2);
document.getElementById('postErrandPriceHiddenField').value = currency + " " + price.toFixed(2);
else if (offering < 500)
if (userRating > 5 * 0.95)
var price = offering * 1.07;
document.getElementById('postErrandTaxField').value = 0.07;
document.getElementById('postErrandPriceField').value = currency + " " + price.toFixed(2);
document.getElementById('postErrandPriceHiddenField').value = currency + " " + price.toFixed(2);
else
var price = offering * 1.10;
document.getElementById('postErrandTaxField').value = 0.10;
document.getElementById('postErrandPriceField').value = currency + " " + price.toFixed(2);
document.getElementById('postErrandPriceHiddenField').value = currency + " " + price.toFixed(2);
else if (offering >= 500)
if (userRating > 5 * 0.95)
var price = offering * 1.05;
document.getElementById('postErrandTaxField').value = 0.05;
document.getElementById('postErrandPriceField').value = currency + " " + price.toFixed(2);
document.getElementById('postErrandPriceHiddenField').value = currency + " " + price.toFixed(2);
else
var price = offering * 1.07;
document.getElementById('postErrandTaxField').value = 0.07;
document.getElementById('postErrandPriceField').value = currency + " " + price.toFixed(2);
document.getElementById('postErrandPriceHiddenField').value = currency + " " + price.toFixed(2);
;
</script>
</div>
<div id="postErrandButtonSection" class="manageSection">
<div id="postErrandButtonArea" class="manageArea row">
<button id="postErrandButton" class="manageButton col-xs-offset-1 col-xs-10 col-sm-offset-1 col-sm-10 col-md-offset-1 col-md-10 col-lg-offset-1 col-lg-10" type="submit">
Submit
</button>
</div>
</div>
</section>
<div id="postErrandReturnToMenuSection" class="manageReturnToMenuSection">
@Html.ActionLink("Return to Menu", "Index", "", htmlAttributes: new @id = "postErrandReturnToMenuButton", @class = "manageReturnToMenuButton" )
</div>
</div>
@section Scripts
@Scripts.Render("~/bundles/jqueryval")
<!-- jCrop script -->
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script type="text/javascript" src="https://cdn.rawgit.com/tapmodo/Jcrop/master/js/jquery.Jcrop.min.js"></script>
<script type="text/javascript">
$(function ()
if ($('#postErrandCroppingArea').width() > 500)
$('#postErrandPictureField').change(function ()
$('#postErrandOriginal').hide();
var reader = new FileReader();
reader.onload = function (e)
$('#postErrandOriginal').show();
$('#postErrandOriginal').attr("src", e.target.result);
$('#postErrandOriginal').Jcrop(
onChange: SetCoordinates,
onSelect: SetCoordinates,
aspectRatio: 1,
boxWidth: 450,
addClass: 'postErrandCropping'
);
reader.readAsDataURL($(this)[0].files[0]);
);
else
$('#postErrandPictureField').change(function ()
$('#postErrandOriginal').hide();
var reader = new FileReader();
reader.onload = function (e)
$('#postErrandOriginal').show();
$('#postErrandOriginal').attr("src", e.target.result);
$('#postErrandOriginal').Jcrop(
onChange: SetCoordinates,
onSelect: SetCoordinates,
aspectRatio: 1,
boxWidth: 250,
addClass: 'postErrandCropping'
);
reader.readAsDataURL($(this)[0].files[0]);
);
$('#postErrandButtonCrop').click(function ()
var x1 = $('#postErrandCropX').val();
var y1 = $('#postErrandCropY').val();
var height = $('#postErrandCropH').val();
var width = $('#postErrandCropW').val();
var canvas = $("#postErrandCropped")[0];
var context = canvas.getContext('2d');
var img = new Image();
img.onload = function ()
canvas.height = height;
canvas.width = width;
context.drawImage(img, x1, y1, width, height, 0, 0, width, height);
var image = canvas.toDataURL().replace(/^data:image\/[a-z]+;base64,/, "");
$('#postErrandCroppedPicture').val(image);
//$('#postErrandButtonUpload').show();
$('#postErrandCropped').hide();
$('#postErrandButtonCrop').hide();
;
img.src = $('#postErrandOriginal').attr("src");
);
);
function SetCoordinates(c)
$('#postErrandCropX').val(c.x);
$('#postErrandCropY').val(c.y);
$('#postErrandCropW').val(c.w);
$('#postErrandCropH').val(c.h);
$('#postErrandButtonCrop').show();
;
</script>
<!-- pulling in Google Places library -->
<script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyDQXVljq4LT-imCbZkOcC7_IiwcECEm0cc&libraries=places"></script>
<!-- pulling in DateTimePicker -->
<script src="~/Scripts/jquery.datetimepicker.full.min.js"></script>
<script>
jQuery('#postErrandStartDateTimeField').datetimepicker(
format: 'm/d/Y H:i',
step: '30',
minDate: 0,
defaultDate: 0,
defaultTime: 0,
yearStart: 2017,
yearEnd: 2030,
);
</script>
<script>
jQuery('#postErrandEndDateTimeField').datetimepicker(
format: 'm/d/Y H:i',
step: '30',
minDate: 0,
defaultDate: 0,
defaultTime: 0,
yearStart: 2017,
yearEnd: 2030,
);
</script>
奇怪的是，它并不特定于单个脚本，而是会影响除 jCrop、Google Places Lirbary 和 DateTimePicker 之外的所有脚本（所有这些都在我的代码中声明）。
以下是我从控制台得到的信息 - 但不知道该怎么做...
SCRIPT5022: SCRIPT5022: Bootstrap's JavaScript requires jQuery
bootstrap.min.js (6,31)
SCRIPT5007: SCRIPT5007: Unable to get property 'concat' of undefined or null reference
jquery.mobile.min.js (4,5765)
SEC7111: HTTPS security is compromised by http://jcrop-cdn.tapmodo.com/v2.0.0-RC1/js/Jcrop.js
localhost:44356 (1,1)
2 SEC7111: HTTPS security is compromised by http://jcrop-cdn.tapmodo.com/v2.0.0-RC1/css/Jcrop.css
localhost:44356 (1,1)
SCRIPT5022: SCRIPT5022: Bootstrap's JavaScript requires jQuery
bootstrap.min.js (6,31)
SCRIPT5007: SCRIPT5007: Unable to get property 'concat' of undefined or null reference
jquery.mobile.min.js (4,5765)
SEC7111: HTTPS security is compromised by http://jcrop-cdn.tapmodo.com/v2.0.0-RC1/js/Jcrop.js
PostErrand (1,1)
2 SEC7111: HTTPS security is compromised by http://jcrop-cdn.tapmodo.com/v2.0.0-RC1/css/Jcrop.css
PostErrand (1,1)
SCRIPT1009: SCRIPT1009: Expected ''
PostErrand (233,13)
You have included the Google Maps API multiple times on this page. This may cause unexpected errors.
14 SCRIPT5: SCRIPT5: Access is denied.
PostErrand (1,1)
5 SCRIPT5: Access is denied.
common.js (22,123)
【问题讨论】：
您的浏览器控制台是否有任何错误？说他们“不工作”根本没有用。 不-我是新手，所以我什至不知道如何解决那里的错误？它根本没有反应/做这项工作。 按 F12 并查看控制台。几乎肯定会有东西在那里。否则，这个问题是无法回答的。 好的 - 添加它。谢谢！ 好的，这是很多的错误。您现在需要弄清楚每一个的含义 - 这里的问题太多了。 【参考方案1】：好的 - 原因有很多，但你向我展示了如何了解正在发生的事情已经对我帮助很大，所以谢谢你。
<!-- autopopulate errand values with current location -->
<script>
$(document).ready(function defaultPostValues()
if (!navigator.geolocation) return;
navigator.geolocation.getCurrentPosition(function (userCoordinates)
geocoder = new google.maps.Geocoder();
userLatLng = new google.maps.LatLng(userCoordinates.coords.latitude, userCoordinates.coords.longitude);
document.getElementById('postErrandLatitudePosted').value = userCoordinates.coords.latitude;
document.getElementById('postErrandLongitudePosted').value = userCoordinates.coords.longitude;
geocoder.geocode( 'latLng': userLatLng , function (results, status)
if (status == google.maps.GeocoderStatus.OK)
var result = results[0];
locationPlaceholder = "";
for (var i = 0, len = result.address_components.length; i < len; i++)
var addressComponent = result.address_components[i];
if (addressComponent.types.indexOf("locality") >= 0) locationPlaceholder = addressComponent.long_name;
if (locationPlaceholder != '')
document.getElementById('postErrandLocationPosted').value = locationPlaceholder;
document.getElementById('postErrandLocationField').value = locationPlaceholder;
);
);
我只是错过了最后一个
);
</script>
【讨论】：
以上是关于MVC：JavaScript 不再工作的主要内容，如果未能解决你的问题，请参考以下文章
在 ASP.NET MVC 中动态生成 Javascript、CSS
ASP.NET MVC 应用程序：添加了 jQuery 事件来提交按钮单击，现在 jQuery Validate 插件不再工作。