提问人:Lee Meehan 提问时间:11/28/2014 最后编辑:Lee Meehan 更新时间:11/17/2023 访问量:564
部分视图不使用父母资源?
Partial Views not using parents Resources?
问:
我一直在开发 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>
}
答:
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>
下一个:部分视图不使用父母资源?
评论
.on()