部分视图不使用父级资源?

时间:2014-11-27 16:25:24

标签: c# jquery asp.net-mvc-4

我一直在研究MVC 4网络应用。我将部分视图注入到我的索引视图中,但是我的部分视图没有使用在我的布局页面中呈现的资源。例如,我不能在partial内的任何元素上使用任何jquery函数。那么有什么可能导致这个问题吗?

我实际上是通过两种方式完成的:通过剃刀和jquery。我想使用jquery,但它在渲染后不会使用它。

<script>
        $("#Display div").click(function () {
            var id = $(this).first().find("input").attr("value");
            $.ajax({                
                    type: 'GET',
                    url: '@Url.Content("~/Home/GetActors")',
                    data: {id:id},
                    success: function (result)
                    {
                        $('#Display').html(result);
                    }
                });
        });
</script>                                        

`@Ajax.ActionLink("Edit", "GetActors", new { id = actor.ActorId }, new AjaxOptions { HttpMethod = "POST", UpdateTargetId = "Display", InsertionMode = InsertionMode.Replace })`


        public PartialViewResult GetActors(int id)
    {
        return PartialView("GetActors",Db.Actors.Find(id));
    }

布局视图

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width" />
    <title>@ViewBag.Title</title>
    @Styles.Render("~/Content/css")
    @Scripts.Render("~/bundles/modernizr")
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css"/>
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap-theme.min.css">
    <link href="~/Content/bootstrap-rating.css" rel="stylesheet" />
</head>
<body style="background:url(http://res.cloudinary.com/arcangel210291/image/upload/v1416947586/1389017_do9nat.jpg) no-repeat fixed; background-size:cover;">
    <nav class="navbar navbar-inverse" role="navigation" style="border-radius:0px;">
        <div class="container">
            <ul class="nav navbar-nav">
                <li><a><span style="color:#B99A77" class="glyphicon glyphicon-facetime-video"></span></a></li>
                <li><a>Movies</a></li>
                <li><a>Actors</a></li>
            </ul>
            <form class="navbar-form navbar-left" role="search">
                <div class="input-group">

                    <div class="input-group-btn">
                        <button type="button" class="btn dropdown-toggle btnMovies" data-toggle="dropdown">ALL<span class="caret"></span></button>
                        <ul class="dropdown-menu" role="menu">
                            <li><a>Somthing</a></li>
                        </ul>
                    </div>

                   <input type="text" class="form-control" placeholder="Search" />

                    <span class="input-group-btn">
                        <button type="button" class="btn btnMovies"><span class="glyphicon glyphicon-search"></span></button>
                    </span>
                </div>
            </form>
        </div>
    </nav>

    <div class="container glass" id="NavContainer">
    @RenderBody()
    </div>

    @Scripts.Render("~/bundles/jquery")
    @Scripts.Render("~/bundles/jqueryval")
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/js/bootstrap.min.js"></script>
    @Scripts.Render("~/bundles/starrating");
    @RenderSection("scripts", required: false)
</body>
</html>

索引

@model IEnumerable<S00133799_CA2.Models.MovieModels.Movie>

    <nav class="navbar navbar-inverse container" id="userControls">
        <ul class="nav nav-pills nav-justified">
            <li role="presentation">@Ajax.ActionLink("Create New!", "","", new AjaxOptions() { HttpMethod = "POST", UpdateTargetId = "Display", InsertionMode = InsertionMode.Replace }, new { @class = "btn btn-default btnMovies" })</li>
        </ul>
        <ul class="nav nav-pills nav-justified">
            <li role="presentation" ><p class="navbar-text"><span class="glyphicon glyphicon-list"></span> Sort By : </p></li>
            <li role="presentation">@Ajax.ActionLink("Name △", "OrderBy", new { OrderType = "Name" }, new AjaxOptions() { HttpMethod = "POST", UpdateTargetId = "Display", InsertionMode = InsertionMode.Replace }, new { @class = "btn btn-default btnMovies" })</li>
            <li role="presentation">@Ajax.ActionLink("Date △", "OrderBy", new { OrderType = "Date" }, new AjaxOptions() { HttpMethod="POST", UpdateTargetId="Display", InsertionMode= InsertionMode.Replace }, new { @class = "btn btn-default btnMovies" })</li>
            <li role="presentation">@Ajax.ActionLink("Rating △", "OrderBy",new { OrderType = "Rating" }, new AjaxOptions() { HttpMethod="POST", UpdateTargetId="Display", InsertionMode = InsertionMode.Replace }, new { @class = "btn btn-default btnMovies" })</li>
            <li role="presentation">@Ajax.ActionLink("All Movies", "OrderBy", new { OrderType = "ChangeToMovies" }, new AjaxOptions { HttpMethod = "GET", UpdateTargetId = "Display", InsertionMode = InsertionMode.Replace }, new { @class = "btn btn-default btnMovies" })</li>
            <li role="presentation">@Ajax.ActionLink("All Actors", "OrderBy", new { OrderType = "ChangeToActors" }, new AjaxOptions { HttpMethod = "GET", UpdateTargetId = "Display", InsertionMode = InsertionMode.Replace }, new { @class = "btn btn-default btnMovies" })</li>
        </ul>
    </nav>
    <div id="Display" class="row">
        @foreach (var movie in Model)
        {
           <div class='col-xs-6 col-md-4'>
                <div class='thumbnail' style="cursor:pointer">
                    <img src="@movie.MovieImage" class="img-responsive" style="height:310px; width:100%" alt='...'/>
                    <div class='caption text-center panel panel-warning' style='margin-bottom:3%;padding:0;'>
                        <h4 style='background: #B99A77;color: #ffffff;margin-top: 0;padding: 2%;border-radius: 2px;'>@Html.DisplayFor(modle=>movie.MovieName)</h4>
                        <h5><b class="text-center">@Html.DisplayFor(model=> movie.ReleaseDate)</b></h5>
                        <input type="hidden" value="@movie.MovieId" />
                    </div>
                </div>
            </div>
        }       
    </div>
    <nav class="navbar navbar-inverse container" id="footernav">
        <ul class="pager">
            @if((int)Session["PageNo"] != 0)
            {<li class="disabled"><a>Previous</a></li>}
            else{
                <li> @Ajax.ActionLink("Previous", "Previous", "", new AjaxOptions { HttpMethod="GET", UpdateTargetId="Display", InsertionMode=InsertionMode.Replace })</li>
                }
            <li>@Ajax.ActionLink("Next", "Next", "", new AjaxOptions { HttpMethod="GET", UpdateTargetId="Display", InsertionMode=InsertionMode.Replace })</li>
        </ul>
    </nav>

@section scripts
{
    <script>
        $(document).ready(function(){
            $("#Display div").on("click",function () {
                var id = $(this).first().find("input").attr("value");
                $.ajax({                
                    type: 'GET',
                    url: '@Url.Content("~/Home/GetMovies")',
                    data: {id:id},
                    success: function (result)
                    {
                        $("#userControls").hide();
                        $("#footernav").hide();
                        $('#Display').html(result);
                    }
                });
            });
        });
    </script>
}

2 个答案:

答案 0 :(得分:0)

您拥有的接缝是因为在分配了选择器后使用ajax请求动态地在页面上呈现html,您有两个选择:
1-注入局部视图后重新加载js文件或代码 2-使用on或在您的选择器和事件中使用较旧的jquery版本(如果可能,我建议这样做。)

答案 1 :(得分:0)

<强>解决
我实际上做了一些真正的愚蠢。我将脚本放入部分本身以再次加载它们,就像Amr说我以前做过这样,但遗漏了一个抛出整个东西的脚本。无论如何,谢谢你的帮助。非常感谢