关于asp.net mvc 项目内容页js加载不出的问题
0
[已解决问题]
解决于 2018-07-03 17:22
如题，目前遇到的情况是只有母版页中的js可起作用，写在内容页中加载不出来，不清楚什么原因。
新手，请教大家，感谢！
问题补充：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="~/Content/Site.css?@DateTime.Now.Date" rel="stylesheet" type="text/css" />
<link href="~/Content/bootstrap.min.css" rel="stylesheet" type="text/css" />
<link href="/css/font-awesome.min.css" rel="stylesheet" type="text/css">
<link href="/slider/flexslider.css" rel="stylesheet" type="text/css" media="screen" />
<link href="/css/templatemo_style.css" rel="stylesheet" type="text/css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<script src="~/Scripts/modernizr-2.6.2.js"></script>
<script src="/slider/modernizr.js"></script>
</head>
<body>
@RenderBody()
<script src="~/Scripts/jquery-1.10.2.min.js"></script>
<script src="~/Scripts/bootstrap.min.js"></script>
<script src="~/Scripts/jquery.min.js"></script>
<script src="~/Scripts/jquery.singlePageNav.js"></script>
<script src="~/Scripts/templatemo_custom.js"></script>
<script src="~/Scripts/jquery.validate.js"></script>
<script src="~/Scripts/jquery.validate.unobtrusive.js"></script>
<script defer src="/slider/jquery.flexslider.js"></script>
<script type="text/javascript">
//这段js不能放在index文件里 那样就在div里面了
$(window).load(function () {
$('.flexslider').flexslider({
animation: "slide",
start: function(slider){
$('body').removeClass('loading');
$('.menu').singlePageNav();
}
});
});
//$('#go-top').click(function(event) {
// event.preventDefault();
// jQuery('html, body').animate({scrollTop: 0}, 1000);
// return false;
//});
$('#myTab a').click(function (e) {
e.preventDefault()
$(this).tab('show')
});
$('#UploadedFile').on("change", function (e) {
var selectedFile = ($("#UploadedFile"))[0].files[0];//FileControl.files[0];
if (selectedFile) {
var FileSize = 0;
var imageType = /image.*/;
if (selectedFile.size > 1048576) {
FileSize = Math.round(selectedFile.size * 100 / 1048576) / 100 + " MB";
}
else if (selectedFile.size > 1024) {
FileSize = Math.round(selectedFile.size * 100 / 1024) / 100 + " KB";
}
else {
FileSize = selectedFile.size + " Bytes";
}
// here we will add the code of thumbnail preview of upload images
$("#FileType").text("type : " + selectedFile.type);
$("#FileSize").text("Size : " + FileSize);
}
if (selectedFile.type.match(imageType)) {
var reader = new FileReader();
reader.onload = function (e) {
$("#preview_box").empty();
var dataURL = reader.result;
var img = new Image()
img.src = dataURL;
img.className = "thumb";
$("#preview_box").append(img);
};
reader.readAsDataURL(selectedFile);
}
function UploadFile() {
var form = $('#FormUpload')[0];
var dataString = new FormData(form);
$.ajax({
url: '/Uploader/UploadPic', //Server script to process data
type: 'POST',
xhr: function () { // Custom XMLHttpRequest
var myXhr = $.ajaxSettings.xhr();
if (myXhr.upload) { // Check if upload property exists
//myXhr.upload.onprogress = progressHandlingFunction
myXhr.upload.addEventListener('progress', progressHandlingFunction,
false); // For handling the progress of the upload
}
return myXhr;
},
//Ajax events
success: successHandler,
error: errorHandler,
complete: completeHandler,
// Form data
data: dataString,
//Options to tell jQuery not to process data or worry about content-type.
cache: false,
contentType: false,
processData: false
});
}
});
</script>
</body>
</html>
@model Practice.Models.ViewModels.PictureViewModel @{ ViewBag.Title = "Input"; var photo = WebImage.GetImageFromRequest("UploadedFile"); } <div class="container"> <div class="row"> @using (Html.BeginForm("input", "scenery", FormMethod.Post,new {@class= "form-horizontal",role ="form"})) { <div class="panel panel-default col-md-4 col-md-offset-4"> <h2 style="text-align:center">图片插入</h2> <form id="FormUpload" enctype="multipart/form-data" method="post"> <span class="btn btn-success fileinput-button"> <i class="glyphicon glyphicon-plus"></i> <span>添加图片</span> <input type="file" name="UploadedFile" id="UploadedFile" onclick="UploadFile()"/> </span> <div id="preview_box"></div> </form> @*<span class="btn btn-success"> <i class="glyphicon glyphicon-plus" ></i> <span>添加图片</span> <input type="file" name="UploadedFile" id="UploadedFile" /> </span>*@ @*<div class="panel-body center"> <input id="img_input" type="file" accept="image/*" data-url="/scenery/imageUpload" /> <label for="img_input" id="img_label">选择图片</label> <div id="preview_box"></div> <br> </div>*@ <div> <p id="FileType"></p> <p id="FileSize"></p> </div> <div class="form-group"> @Html.LabelFor(m => m.Description, new {@class="col-md-3"}) @Html.TextAreaFor(m => m.Description,new {@class="col-md-7"}) </div> <div class="form-group"> @Html.LabelFor(m => m.PeopleWith, new { @class = "col-md-3" }) @Html.TextBoxFor(m => m.PeopleWith, new { @class = "col-md-7" }) </div> <div class="form-group"> @Html.LabelFor(m => m.Place, new { @class = "col-md-3" }) @Html.TextBoxFor(m => m.Place, new { @class = "col-md-7" }) </div> <div class="form-group"> @Html.LabelFor(m => m.Date, new { @class = "col-md-3" }) @Html.TextBoxFor(m => m.Date, new { @class = "col-md-7" }) </div> <div class="form-group"> @Html.LabelFor(m => m.Message, new { @class = "col-md-3" }) @Html.TextAreaFor(m => m.Message, new { @class = "col-md-7" }) </div> <div class="form-group"> @Html.LabelFor(m => m.MessageDate, new { @class = "col-md-3" }) @Html.TextBoxFor(m => m.MessageDate, new { @class = "col-md-7" }) </div> <div class="form-group"> @Html.LabelFor(m => m.Tag, new { @class = "col-md-3" }) @Html.TextBoxFor(m => m.Tag, new { @class = "col-md-7" }) </div> <div class="form-group"> <button class="btn-default" type="submit">提交</button> </div> </div> } </div> </div> <script type="text/javascript"> $('#go-top').click(function(event) { event.preventDefault(); jQuery('html, body').animate({scrollTop: 0}, 1000); return false; }); </script>
上面分别是母版和内容页中的代码，遇到的问题是下面页面中的js现在不起作用，只有放在母版页中才起作用，这是自己练习的项目，困扰我好久了。。
最佳答案
0
这个问题是因为你在你写在Index里面的脚本在依赖脚本之前了,所以无效了
你应该在布局页引用脚本后面加上
@RenderSection("Scripts", false)
然后在index.cshtml里面使用
@section Scripts{
这里面写你需要的脚本即可了
}
因为@RenderBody()内让在依赖脚本后面~你在@RenderBody()里面写脚本是在依赖脚本前面~肯定无效会报错
奖励园豆：5
非常感谢！解决了困扰我很久的问题，之前没有注意脚本之间依赖性关系，怎么都找不到原因。
现在我把@RenderBody()放到布局页最后就可以了。感谢啦~~
其他回答(2)
0
路径的问题吧，不贴代码怎么知道
0
你说的问题范围太大了，跟本无从下手，
建议，浏览器运行后运行开发者模式，看看报什么错误