首页新闻找找看学习计划

关于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现在不起作用,只有放在母版页中才起作用,这是自己练习的项目,困扰我好久了。。

StepStep的主页 StepStep | 菜鸟二级 | 园豆:202
提问于:2018-07-03 14:08
< >
分享
最佳答案
0

这个问题是因为你在你写在Index里面的脚本在依赖脚本之前了,所以无效了

你应该在布局页引用脚本后面加上

    @RenderSection("Scripts", false)

然后在index.cshtml里面使用

@section Scripts{
这里面写你需要的脚本即可了
}

因为@RenderBody()内让在依赖脚本后面~你在@RenderBody()里面写脚本是在依赖脚本前面~肯定无效会报错

奖励园豆:5
远扬 | 初学一级 |园豆:86 | 2018-07-03 16:35

非常感谢!解决了困扰我很久的问题,之前没有注意脚本之间依赖性关系,怎么都找不到原因。

现在我把@RenderBody()放到布局页最后就可以了。感谢啦~~

StepStep | 园豆:202 (菜鸟二级) | 2018-07-03 17:21
其他回答(2)
0

路径的问题吧,不贴代码怎么知道

丫的 | 园豆:1575 (小虾三级) | 2018-07-03 14:15
0

你说的问题范围太大了,跟本无从下手,

建议,浏览器运行后运行开发者模式,看看报什么错误

个人天使 | 园豆:202 (菜鸟二级) | 2018-07-03 14:29
清除回答草稿
   您需要登录以后才能回答,未注册用户请先注册