TECHNOLOGIES
FORUMS
JOBS
BOOKS
EVENTS
INTERVIEWS
Live
MORE
LEARN
Training
CAREER
MEMBERS
VIDEOS
NEWS
BLOGS
Sign Up
Login
No unread comment.
View All Comments
No unread message.
View All Messages
No unread notification.
View All Notifications
Answers
Post
An Article
A Blog
A News
A Video
An EBook
An Interview Question
Ask Question
Forums
Monthly Leaders
Forum guidelines
First Last
NA
648
71.9k
Asp.net partial view in a view not being recognized from within a view
Aug 14 2020 6:18 PM
I have created a little blog and I have a view and have embedded a partial view in it.
The embedded partial view is the 'like' button(link).
It appears in the view but when I click the 'like' anchor, it does not go into the partial view.
I have an alert and console log and they do not appear.
When I click it, the # is appended to the URL.
What am I doing wrong?
Also, I want to reference a value from a button in the parent view.
I try: var blogId = $(this).attr("data-id");
Is that correct?
--- The view - the parent.
@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"
)
<!-- Internal JavaScript. -->
@section Scripts
{
<script type=
"text/javascript"
>
$(document).ready(
function
() {
// Has ajax calls to controller methods.
});
</script>
}
--- The small partial view - _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"
)
<!-- Internal JavaScript. -->
@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>
}
Reply
Answers (
6
)
About Cookies in MVC
One to Many Relationship