我一直在研究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>
}
答案 0 :(得分:0)
您拥有的接缝是因为在分配了选择器后使用ajax请求动态地在页面上呈现html,您有两个选择:
1-注入局部视图后重新加载js文件或代码
2-使用on或在您的选择器和事件中使用较旧的jquery版本(如果可能,我建议这样做。)
答案 1 :(得分:0)
<强>解决强>
我实际上做了一些真正的愚蠢。我将脚本放入部分本身以再次加载它们,就像Amr说我以前做过这样,但遗漏了一个抛出整个东西的脚本。无论如何,谢谢你的帮助。非常感谢