Question

我在ASP.NET MVC中第一次加载视图时加载脚本时遇到问题，脚本存在于部分视图中，但是第一次加载页面时不会调用这些脚本。

但是当我第二次使用Ajax调用附加相同的局部视图时，脚本在视图上加载完美，并且部分视图附加的视图上先前出现的组件也可以完美地工作。

这里我进一步详细讨论我的问题，当我通过_Layout视图调用相同的脚本时，这些脚本在部分视图上不起作用，当我在Partial视图上放置相同的脚本时，问题就出现了脚本调用两次，我的函数被调用两次。实际上我使用的是 SignalR 脚本，并且由于两次引用脚本一次在_layout View和第二次在Partial视图上，我的SignalR函数被调用两次而我的所有代码逻辑遗址。

这是我的主页查看代码：

@model IEnumerable<SmartKids.Lib.Core.ViewModels.FileMediaAlbumsVM>


@{
      ViewBag.Title = "Home";
      Layout = "~/Views/Shared/_Layout.cshtml";
    }
<div class="profile-body">
    @*@Html.Partial("ModalMessages")*@
    <div class="row">
            @Html.Partial("_Messages")
    </div>
    <div class="row infinite-scroll">
        <input type="hidden" value="" name="clientScreenWidth" id="clientScreenWidth" />
        @Html.Partial("_AlbumRow", Model)
    </div>
    <div id="loading" class="text-center">
        <i class="fa fa-spinner fa-2x fa-spin"></i>
    </div>
</div>


@section scripts{

<script src="~/Scripts/infiniteScroll.js"></script>
<script type="text/javascript">

    var moreRowsUrl = "/Album/Home"; //the URL to your ActionMethod
    $(window).scroll(scrollHandler);

</script>

        }

这是我的主_Layout代码：

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>@ViewBag.Title - Smart Kids</title>
<link rel="shortcut icon" href="favicon.ico">
<link rel='stylesheet' type='text/css' href='//fonts.googleapis.com/css?family=Open+Sans:400,300,600&amp;subset=cyrillic,latin'>
<!-- CSS Global Compulsory -->
<link href="~/Content/plugins/bootstrap/css/bootstrap.css" rel="stylesheet" />
<link rel="stylesheet" href="~/Content/css/headers/header-default.css" />

<!-- CSS Customization -->
<link rel="stylesheet" href="~/Content/css/custom.css" />

<style type="text/css">
    .fancybox-custom .fancybox-skin {
        box-shadow: 0 0 50px #122;
    }
</style>   



 @RenderSection("metaTags", false)
    @Scripts.Render("~/bundles/modernizr")
</head>
<body>
    <div class="wrapper">
        <!--=== End Header ===-->
        <div class="container" id="main">
            <div class="row">
                <div class="col-md-12">
                    @RenderBody()
                </div>
            </div>
        </div>

    </div>

        <script src="~/Scripts/jquery-1.10.2.js"></script>     
        <script src="~/Scripts/jquery.signalR-2.2.0.min.js"></script>
        <script src="~/signalr/hubs"></script>
        <script src="~/Scripts/albumSignalR.js"></script>

    @RenderSection("scripts", required: false)

</body>
</html>

现在我在部分视图中没有脚本，这是我的部分视图代码：

<div class="widget-extra margin-bottom-15">
            <div class="timeline">                    
                <ul class="timeline-list">                        
                    <li>
                        <a href="@Url.Action("HomeAlbum", "Album", new { aId = item.AlbumId })">
                            <picture class="thumbnail img-responsive">

                                <source media="(min-width: 480px)" srcset="@Url.Content(filepath_mobile), @Url.Content(filepath_mobile) 2x">
                                <source srcset="@Url.Content(filepath_small), @Url.Content(filepath_small) 2x">
                                <img src="@Url.Content(filepath_mobile)" alt="@item.Title">
                            </picture>
                        </a>
                    </li>                        
                </ul>  
            </div>
        </div>

请建议我解决这个问题，我做错了什么或需要解决的问题。

Answer 1

为什么不移动结束脚本
关闭内的标签}

@section scripts{ 
<script src="~/Scripts/infiniteScroll.js"></script>
<script type="text/javascript">

//$(function () {
//    $("div#loading").hide();
//});
var moreRowsUrl = "/Album/Home"; //the URL to your ActionMethod
$(window).scroll(scrollHandler);

 </script>
}

Jquery Scripts不适用于Partial View的首次加载，但可以使用Ajax调用MVC C＃

1 个答案: