Asp.net 视图中的部分视图未在视图中被识别
Asp.net partial view in a view not being recognized from within a view
我创建了一个小博客,我有一个视图并在其中嵌入了部分视图。
嵌入的局部视图是 'like' 按钮 (link).
它出现在视图中,但是当我单击 'like' 锚点时,它没有进入局部视图。
我有警报和控制台日志,但它们没有出现。
当我点击它时,# 会附加到 URL。
我做错了什么?
另外,我想从父视图中的按钮引用一个值。
我尝试:var blogId = $(this).attr("data-id");
对吗?
--- 视图 - 父视图。
@model GbngWebClient.Models.BlogPublishedByBlogIdVM
<h2 class="page-header"><span class="blogtitle">@Session["BlogTitle"]</span></h2>
@{
Layout = "~/Views/Shared/_LayoutUser.cshtml";
}
@if (ViewBag.errormessage != null)
{
<p class="alert alert-danger" id="errorMessage">@ViewBag.errormessage</p>
}
<br />
<div>
<a href="@Url.Action("LoadDropdownBlogCategorysInBlogsPublished", "BlogPublished")">Return To
Select a Blog</a>
</div>
<br />
@if (Model != null)
{
<div class="panel panel-default toppanel">
<div class="panel-body">
<div class="row">
<div class="col-md-2">
@Html.LabelFor(model => model.BlogPublishedByBlogId.CreatedDateTime)
@Html.TextBoxFor(model => model.BlogPublishedByBlogId.CreatedDateTime, new { @class = "form-control", @disabled = "disabled" })
</div>
<div class="col-md-2">
@Html.LabelFor(model => model.BlogPublishedByBlogId.ModifiedDateTime)
@Html.TextBoxFor(model => model.BlogPublishedByBlogId.ModifiedDateTime, new { @class = "form-control", @disabled = "disabled" })
</div>
</div>
<br />
<div class="row">
<div>
@Html.DisplayFor(model => model.BlogPublishedByBlogId.BlogContent, new { @class = "form-control blogContent", @disabled = "disabled" })
</div>
</div>
<br />
<div class="row">
<div>
@Html.Partial("_BlogLikeOrDislike")
</div>
</div>
<br />
<div class="panel-footer">
<button type="button" class="btn btn-primary Comment" data-id="@Model.BlogPublishedByBlogId.BlogId" value="Comment">
<span class="glyphicon glyphicon-comment" aria-hidden="true"></span> Get Comment(s)
</button>
</div>
@* The area dynamically built. It will hold the partial view - BlogPublished/_Comments.cshtml which also holds the partial view - BlogPublished/_CommentReplys.cshtml. *@
@* The partial view is shown after the 'Get Comment(s)' button above is clicked. *@
@* Add comment area. *@
<div id="@string.Format("{0}_{1}","commentsBlock", @Model.BlogPublishedByBlogId.BlogId)" style="border: 1px solid #f1eaea; background-color: #eaf2ff;">
@*Centering the button with in-line CSS. *@
<div class="AddCommentArea" style="margin-left: 30%; margin-bottom: 5px; margin-top: 8px;">
@Html.AntiForgeryToken()
<input type="text" id="@string.Format("{0}_{1}", "comment", @Model.BlogPublishedByBlogId.BlogId)" class="form-control" placeholder="Add a comment..." style="display: inline;" />
@* Button. *@
<button type="button" class="btn btn-primary addComment" data-id="@Model.BlogPublishedByBlogId.BlogId"><span class="glyphicon glyphicon-comment" aria-hidden="true"></span></button>
</div>
</div>
</div>
</div>
}
@Scripts.Render("~/bundles/jqueryval")
@Scripts.Render("~/bundles/jquery")
@Scripts.Render("~/bundles/bootstrap")
@Styles.Render("~/Content/css")
@section Scripts
{
<script type="text/javascript">
$(document).ready(function () {
// Has ajax calls to controller methods.
});
</script>
}
--- 小局部视图 - _BlogLikeOrDislike.cshtml.
<div>
<a href="#" class="LikeOrDislike" style="margin-left: 5px; font-weight: bold; font-size: 13px;">Like</a>
</div>
@Scripts.Render("~/bundles/jqueryval")
@Scripts.Render("~/bundles/jquery")
@Scripts.Render("~/bundles/bootstrap")
@Styles.Render("~/Content/css")
@section Scripts
{
<script type="text/javascript">
$(document).ready(function () {
alert('here.');
console.log('here.');
$('.LikeOrDislike').on('click', function () {
// HOW TO REFERENCE THE PARENTS VALUE?.
var blogId = $(this).attr("data-id");
alert('here. blogid from parent: ' + blogId);
$.ajax({
type: 'GET',
url: '@Url.Action("SetBlogLikeCountOrDislikeCount", "BlogPublished")',
data: { blogId: blogId },
success: function (response) {
},
error: function (xhr, ajaxOptions, thrownError) {
alert("Critical Error: something is wrong in the call to SetBlogLikeCountOrDislikeCount! Status: " + xhr.status + ". Error: " + thrownError.toString() + ". Response Text: " + xhr.responseText);
}
})
});
});
</script>
}
在部分视图中,我必须删除:
@section Scripts
{
}
周边JavaScript
并且只有:
@Scripts.Render("~/bundles/jquery").
没有它,我得到:未捕获的 ReferenceError:$ 未定义。
库未被引入。
根据建议而不是:
$(document).ready(function ()
和
@Scripts.Render("~/bundles/jquery")
我可以使用:
document.addEventListener("DOMContentLoaded", function ()
没有
@Scripts.Render("~/bundles/jquery")
所以现在正在执行脚本部分。
现在,要将值从父视图传递到分部视图,我必须在父视图中创建一个模型:
@{
double parentBlogId = @Model.BlogPublishedByBlogId.BlogId;
}
并将其传递为:
<div class="row">
<div>
@Html.Partial("_BlogLikeOrDislike", parentBlogId)
</div>
</div>
并在局部视图的点击函数中接收:
var parentBlogId = @Model;
我创建了一个小博客,我有一个视图并在其中嵌入了部分视图。 嵌入的局部视图是 'like' 按钮 (link).
它出现在视图中,但是当我单击 'like' 锚点时,它没有进入局部视图。 我有警报和控制台日志,但它们没有出现。
当我点击它时,# 会附加到 URL。
我做错了什么? 另外,我想从父视图中的按钮引用一个值。 我尝试:var blogId = $(this).attr("data-id");
对吗?
--- 视图 - 父视图。
@model GbngWebClient.Models.BlogPublishedByBlogIdVM
<h2 class="page-header"><span class="blogtitle">@Session["BlogTitle"]</span></h2>
@{
Layout = "~/Views/Shared/_LayoutUser.cshtml";
}
@if (ViewBag.errormessage != null)
{
<p class="alert alert-danger" id="errorMessage">@ViewBag.errormessage</p>
}
<br />
<div>
<a href="@Url.Action("LoadDropdownBlogCategorysInBlogsPublished", "BlogPublished")">Return To
Select a Blog</a>
</div>
<br />
@if (Model != null)
{
<div class="panel panel-default toppanel">
<div class="panel-body">
<div class="row">
<div class="col-md-2">
@Html.LabelFor(model => model.BlogPublishedByBlogId.CreatedDateTime)
@Html.TextBoxFor(model => model.BlogPublishedByBlogId.CreatedDateTime, new { @class = "form-control", @disabled = "disabled" })
</div>
<div class="col-md-2">
@Html.LabelFor(model => model.BlogPublishedByBlogId.ModifiedDateTime)
@Html.TextBoxFor(model => model.BlogPublishedByBlogId.ModifiedDateTime, new { @class = "form-control", @disabled = "disabled" })
</div>
</div>
<br />
<div class="row">
<div>
@Html.DisplayFor(model => model.BlogPublishedByBlogId.BlogContent, new { @class = "form-control blogContent", @disabled = "disabled" })
</div>
</div>
<br />
<div class="row">
<div>
@Html.Partial("_BlogLikeOrDislike")
</div>
</div>
<br />
<div class="panel-footer">
<button type="button" class="btn btn-primary Comment" data-id="@Model.BlogPublishedByBlogId.BlogId" value="Comment">
<span class="glyphicon glyphicon-comment" aria-hidden="true"></span> Get Comment(s)
</button>
</div>
@* The area dynamically built. It will hold the partial view - BlogPublished/_Comments.cshtml which also holds the partial view - BlogPublished/_CommentReplys.cshtml. *@
@* The partial view is shown after the 'Get Comment(s)' button above is clicked. *@
@* Add comment area. *@
<div id="@string.Format("{0}_{1}","commentsBlock", @Model.BlogPublishedByBlogId.BlogId)" style="border: 1px solid #f1eaea; background-color: #eaf2ff;">
@*Centering the button with in-line CSS. *@
<div class="AddCommentArea" style="margin-left: 30%; margin-bottom: 5px; margin-top: 8px;">
@Html.AntiForgeryToken()
<input type="text" id="@string.Format("{0}_{1}", "comment", @Model.BlogPublishedByBlogId.BlogId)" class="form-control" placeholder="Add a comment..." style="display: inline;" />
@* Button. *@
<button type="button" class="btn btn-primary addComment" data-id="@Model.BlogPublishedByBlogId.BlogId"><span class="glyphicon glyphicon-comment" aria-hidden="true"></span></button>
</div>
</div>
</div>
</div>
}
@Scripts.Render("~/bundles/jqueryval")
@Scripts.Render("~/bundles/jquery")
@Scripts.Render("~/bundles/bootstrap")
@Styles.Render("~/Content/css")
@section Scripts
{
<script type="text/javascript">
$(document).ready(function () {
// Has ajax calls to controller methods.
});
</script>
}
--- 小局部视图 - _BlogLikeOrDislike.cshtml.
<div>
<a href="#" class="LikeOrDislike" style="margin-left: 5px; font-weight: bold; font-size: 13px;">Like</a>
</div>
@Scripts.Render("~/bundles/jqueryval")
@Scripts.Render("~/bundles/jquery")
@Scripts.Render("~/bundles/bootstrap")
@Styles.Render("~/Content/css")
@section Scripts
{
<script type="text/javascript">
$(document).ready(function () {
alert('here.');
console.log('here.');
$('.LikeOrDislike').on('click', function () {
// HOW TO REFERENCE THE PARENTS VALUE?.
var blogId = $(this).attr("data-id");
alert('here. blogid from parent: ' + blogId);
$.ajax({
type: 'GET',
url: '@Url.Action("SetBlogLikeCountOrDislikeCount", "BlogPublished")',
data: { blogId: blogId },
success: function (response) {
},
error: function (xhr, ajaxOptions, thrownError) {
alert("Critical Error: something is wrong in the call to SetBlogLikeCountOrDislikeCount! Status: " + xhr.status + ". Error: " + thrownError.toString() + ". Response Text: " + xhr.responseText);
}
})
});
});
</script>
}
在部分视图中,我必须删除:
@section Scripts
{
}
周边JavaScript
并且只有:
@Scripts.Render("~/bundles/jquery").
没有它,我得到:未捕获的 ReferenceError:$ 未定义。 库未被引入。
根据建议而不是:
$(document).ready(function ()
和
@Scripts.Render("~/bundles/jquery")
我可以使用:
document.addEventListener("DOMContentLoaded", function ()
没有
@Scripts.Render("~/bundles/jquery")
所以现在正在执行脚本部分。
现在,要将值从父视图传递到分部视图,我必须在父视图中创建一个模型:
@{
double parentBlogId = @Model.BlogPublishedByBlogId.BlogId;
}
并将其传递为:
<div class="row">
<div>
@Html.Partial("_BlogLikeOrDislike", parentBlogId)
</div>
</div>
并在局部视图的点击函数中接收:
var parentBlogId = @Model;