Asp.net partial view in a view not being recognized from within a view

Question

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>
}