First Last

First Last

  • 1.5k
  • 488
  • 5.8k

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.
  1. @model GbngWebClient.Models.BlogPublishedByBlogIdVM    
  2. <h2 class="page-header"><span class="blogtitle">@Session["BlogTitle"]</span></h2>   
  3. @{    
  4.     Layout = "~/Views/Shared/_LayoutUser.cshtml";    
  5. }    
  6.     
  7. @if (ViewBag.errormessage != null)    
  8. {    
  9.     <p class="alert alert-danger" id="errorMessage">@ViewBag.errormessage</p>    
  10. }  
  11. <br />  
  12. <div>    
  13.     <a href="@Url.Action("LoadDropdownBlogCategorysInBlogsPublished", "BlogPublished")">Return To Select a Blog</a>    
  14. </div>    
  15. <br />  
  16. @if (Model != null)    
  17. {    
  18.     <div class="panel panel-default toppanel">    
  19.         <div class="panel-body">    
  20.             <div class="row">    
  21.                 <div class="col-md-2">    
  22.                     @Html.LabelFor(model => model.BlogPublishedByBlogId.CreatedDateTime)    
  23.                     @Html.TextBoxFor(model => model.BlogPublishedByBlogId.CreatedDateTime, new { @class = "form-control", @disabled = "disabled" })    
  24.                 </div>    
  25.                 <div class="col-md-2">    
  26.                     @Html.LabelFor(model => model.BlogPublishedByBlogId.ModifiedDateTime)    
  27.                     @Html.TextBoxFor(model => model.BlogPublishedByBlogId.ModifiedDateTime, new { @class = "form-control", @disabled = "disabled" })    
  28.                 </div>    
  29.             </div>    
  30.             <br />    
  31.     
  32.             <div class="row">    
  33.                 <div>    
  34.                     @Html.DisplayFor(model => model.BlogPublishedByBlogId.BlogContent, new { @class = "form-control blogContent", @disabled = "disabled" })    
  35.                 </div>    
  36.             </div>    
  37.             <br />    
  38.     
  39.             <div class="row">    
  40.                 <div>    
  41.                     @Html.Partial("_BlogLikeOrDislike")    
  42.                 </div>    
  43.             </div>    
  44.             <br />    
  45.     
  46.             <div class="panel-footer">    
  47.                 <button type="button" class="btn btn-primary Comment" data-id="@Model.BlogPublishedByBlogId.BlogId" value="Comment">    
  48.                     <span class="glyphicon glyphicon-comment" aria-hidden="true"></span> Get Comment(s)    
  49.                 </button>    
  50.             </div>    
  51.     
  52.             @* The area dynamically built. It will hold the partial view - BlogPublished/_Comments.cshtml which also holds the partial view - BlogPublished/_CommentReplys.cshtml. *@    
  53.             @* The partial view is shown after the 'Get Comment(s)' button above is clicked. *@    
  54.     
  55.             @* Add comment area. *@    
  56.             <div id="@string.Format("{0}_{1}","commentsBlock", @Model.BlogPublishedByBlogId.BlogId)" style="border: 1px solid #f1eaea; background-color: #eaf2ff;">    
  57.                 @*Centering the button with in-line CSS. *@    
  58.                 <div class="AddCommentArea" style="margin-left: 30%;  margin-bottom: 5px; margin-top: 8px;">    
  59.                     @Html.AntiForgeryToken()    
  60.                     <input type="text" id="@string.Format("{0}_{1}", "comment", @Model.BlogPublishedByBlogId.BlogId)" class="form-control" placeholder="Add a comment..." style="display: inline;" />    
  61.                     @* Button. *@    
  62.                     <button type="button" class="btn btn-primary addComment" data-id="@Model.BlogPublishedByBlogId.BlogId"><span class="glyphicon glyphicon-comment" aria-hidden="true"></span></button>    
  63.                 </div>    
  64.             </div>    
  65.         </div>    
  66.     </div>    
  67. }    
  68.     
  69. @Scripts.Render("~/bundles/jqueryval")    
  70. @Scripts.Render("~/bundles/jquery")    
  71. @Scripts.Render("~/bundles/bootstrap")    
  72. @Styles.Render("~/Content/css")    
  73.     
  74. <!-- Internal JavaScript. -->    
  75. @section Scripts    
  76. {    
  77.     <script type="text/javascript">    
  78.         $(document).ready(function () {    
  79.             // Has ajax calls to controller methods.    
  80.          });    
  81.     </script>    
  82. }  
--- The small partial view - _BlogLikeOrDislike.cshtml.
  1. <div>    
  2.     <a href="#" class="LikeOrDislike" style="margin-left: 5px; font-weight: bold; font-size: 13px;">Like</a>    
  3. </div>    
  4.     
  5. @Scripts.Render("~/bundles/jqueryval")    
  6. @Scripts.Render("~/bundles/jquery")    
  7. @Scripts.Render("~/bundles/bootstrap")    
  8. @Styles.Render("~/Content/css")    
  9.     
  10. <!-- Internal JavaScript. -->    
  11. @section Scripts    
  12. {    
  13.     <script type="text/javascript">    
  14.         $(document).ready(function () {    
  15.             alert('here.');    
  16.             console.log('here.');    
  17.     
  18.             $('.LikeOrDislike').on('click'function () {    
  19.                 // HOW TO REFERENCE THE PARENTS VALUE?.    
  20.                 var blogId = $(this).attr("data-id");    
  21.     
  22.                 alert('here. blogid from parent: ' + blogId);    
  23.     
  24.                 $.ajax({    
  25.                     type: 'GET',    
  26.                     url: '@Url.Action("SetBlogLikeCountOrDislikeCount", "BlogPublished")',    
  27.                     data: { blogId: blogId },    
  28.                     success: function (response) {    
  29.     
  30.                     },    
  31.                     error: function (xhr, ajaxOptions, thrownError) {    
  32.                         alert("Critical Error: something is wrong in the call to SetBlogLikeCountOrDislikeCount! Status: " + xhr.status + ". Error: " + thrownError.toString() + ". Response Text: " + xhr.responseText);    
  33.                     }    
  34.                 })    
  35.             });    
  36.         });    
  37.     </script>    
  38. }

Brought to you by:

Answers (6)