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 class = "page-header" > class = "blogtitle" >@Session[ "BlogTitle" ] @{ Layout = "~/Views/Shared/_LayoutUser.cshtml" ; } @ if (ViewBag.errormessage != null ) { class = "alert alert-danger" id= "errorMessage" >@ViewBag.errormessage } "@Url.Action(" LoadDropdownBlogCategorysInBlogsPublished ", " BlogPublished ")" >Return To Select a Blog @ if (Model != null ) { class = "panel panel-default toppanel" > class = "panel-body" > class = "row" > class = "col-md-2" > @Html.LabelFor(model => model.BlogPublishedByBlogId.CreatedDateTime) @Html.TextBoxFor(model => model.BlogPublishedByBlogId.CreatedDateTime, new { @ class = "form-control" , @disabled = "disabled" }) class = "col-md-2" > @Html.LabelFor(model => model.BlogPublishedByBlogId.ModifiedDateTime) @Html.TextBoxFor(model => model.BlogPublishedByBlogId.ModifiedDateTime, new { @ class = "form-control" , @disabled = "disabled" }) class = "row" > @Html.DisplayFor(model => model.BlogPublishedByBlogId.BlogContent, new { @ class = "form-control blogContent" , @disabled = "disabled" }) class = "row" > @Html.Partial( "_BlogLikeOrDislike" ) class = "panel-footer" > "button" class = "btn btn-primary Comment" data-id= "@Model.BlogPublishedByBlogId.BlogId" value= "Comment" > class = "glyphicon glyphicon-comment" aria-hidden= "true" > Get Comment(s) @* 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. *@ "@string.Format(" {0}_{1} "," commentsBlock ", @Model.BlogPublishedByBlogId.BlogId)" style= "border: 1px solid #f1eaea; background-color: #eaf2ff;" > @*Centering the button with in -line CSS. *@ class = "AddCommentArea" style= "margin-left: 30%; margin-bottom: 5px; margin-top: 8px;" > @Html.AntiForgeryToken() "text" id= "@string.Format(" {0}_{1} ", " comment ", @Model.BlogPublishedByBlogId.BlogId)" class = "form-control" placeholder= "Add a comment..." style= "display: inline;" /> @* Button. *@ "button" class = "btn btn-primary addComment" data-id= "@Model.BlogPublishedByBlogId.BlogId" > class = "glyphicon glyphicon-comment" aria-hidden= "true" > } @Scripts.Render( "~/bundles/jqueryval" ) @Scripts.Render( "~/bundles/jquery" ) @Scripts.Render( "~/bundles/bootstrap" ) @Styles.Render( "~/Content/css" ) @section Scripts { "text/javascript" > $(document).ready( function () { // Has ajax calls to controller methods. }); } --- The small partial view - _BlogLikeOrDislike.cshtml. "#" class = "LikeOrDislike" style= "margin-left: 5px; font-weight: bold; font-size: 13px;" >Like @Scripts.Render( "~/bundles/jqueryval" ) @Scripts.Render( "~/bundles/jquery" ) @Scripts.Render( "~/bundles/bootstrap" ) @Styles.Render( "~/Content/css" ) @section Scripts { "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); } }) }); }); }

First Last · Answer

To solve this problem. In the partial view, I had to remove the: @section Scripts { } and just have the: @Scripts.Render("~/bundles/jquery"). Without it, I was getting: Uncaught ReferenceError: $ is not defined. Apparently the library was not being brought in. Per a suggestion elsewhere, instead of the: $(document).ready(function () and using the @Scripts.Render("~/bundles/jquery"), I could just use: document.addEventListener("DOMContentLoaded", function () and no: @Scripts.Render("~/bundles/jquery") So now the script section is being executed. Now to pass a value from the parent view to the partial view, I had to create a model in the parent view: @{ double parentBlogId = @Model.BlogPublishedByBlogId.BlogId; } and pass it as: @Html.Partial("_BlogLikeOrDislike", parentBlogId) and receive it in the partial view's click function: var parentBlogId = @Model;

First Last · Answer

Jignesh...that does not help as that article describes a differnet behavior than what I am trying to accomplish. I have my partial view already appearing by the fact that I included it in the parent view. Refer to the code and screen shot. I just want the behavior in that once I click the link of that partial view I fire off a controller method from within that partial view. The problem is that it does NOT show my alert to inidcate that it even gets into the partial view's code. It does not seem to enter the code in $(document).ready(function () {...... If I move the partial view's JavaScript code to the parent, it works. I,e the DIV is the only thing that is in the partial view now. Can't a partial view have it's own JavaScript to fire off a controller method? I would want that so I can REUSE this partial view in any parent view.

Jignesh Kumar · Answer

Hi, Please refer this link which will help you, https://www.aspsnippets.com/Articles/Load-Render-Partial-View-in-DIV-using-jQuery-in-ASPNet-MVC.aspx

First Last · Answer

I think you are mis understanding. The partial is visible before I click it but when I click it, the alert in the partial view code does NOT appear. It is not getting into it. I just want the behavior in that once I click the link of that partial view I fire off a controller method from within that partial view. The problem is that it does NOT show my alert to inidcate that it even gets into the partial view's code. It does not seem to enter the code in $(document).ready(function () {...... Why? Can't a partial view have it's own javascript to fire off a contgroller method? I would want that so I can REUSE this partial view in any parent view. Once I see that I actually get into the partial view, then I will write the code to process the click functionality..

Navaneeth Krishnan · Answer

add an div id to bind your response LikeOrDislike click event. $('#divId').html(response) in your ajax success. or var url = '@Url.Action("SetBlogLikeCountOrDislikeCount", "BlogPublished")'; $('.LikeOrDislike').on('click', function () { var blogId = $(this).attr("data-id"); $('#divId').load(url, { blogId: blogId}); })

Farhan Ahmed · Answer

https://www.c-sharpcorner.com/article/different-ways-of-render-partial-view-in-mvc/ https://stackoverflow.com/questions/29142422/rendering-partial-view-on-button-click-in-asp-net-mvc