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

Partial Views not using parents Resources?

提问人:Lee Meehan 提问时间:11/28/2014 最后编辑:Lee Meehan 更新时间:11/17/2023 访问量:564

问:

我一直在开发 MVC 4 Web 应用程序。我正在将部分视图注入到索引视图中,但是我的部分视图没有使用在布局页面中呈现的资源。例如,我不能对部分内的任何元素使用任何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>
}
C# jQuery ASP.NET-MVC-4

评论

0赞 Amr Elgarhy 11/28/2014
您能否向我们展示一些代码,例如您如何注入 partialview 和 partialview 代码
0赞 Amr Elgarhy 11/28/2014
在你这样做之后,你的jquery选择器不工作了吗?
0赞 Lee Meehan 11/28/2014
在我的加载部分页面并将其插入到我的 div 中后,我无法使用 Jquery 选择任何内容。部分根本没有使用任何脚本,我有一个评级插件,它在我的部分之外工作,但不能在它内部工作。
0赞 11/28/2014
您没有包含足够的代码来确定,但您需要使用事件委托 (jquery ) 来动态添加元素。并确保脚本位于页面底部或包装在 document.ready 中.on()

答:

0赞 Amr Elgarhy 11/28/2014 #1

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

评论

0赞 Lee Meehan 11/28/2014
尝试了这两种方法,脚本由脚本捆绑器处理。仅当部分注入时才会出现问题
0赞 Amr Elgarhy 11/28/2014
注入部分视图时是否遇到任何 JS 错误?您可以使用 Firebug 或 Chrome 开发工具进行检查
0赞 Lee Meehan 11/28/2014
一切都很干净,我一直在使用 chrome 调试器,但什么都没有
0赞 Lee Meehan 11/28/2014 #2

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

0赞 Joel Wiklund 11/17/2023 #3

我遇到了同样的问题,当我添加对资源文件(*.resx)所在路径的引用时,它就消失了。

MyPartialView.cshtml:

@using MyApp.Infrastructure.Localization  <!-- This line solved my problem -->

<div class="row">
    <div class="col s12 align-center">
        <h2>@Language_Resources.String_Start_Your_App</h2>
    </div>
</div>