Ajax вызов не работает должным образом в ASP MVC

Question

Итак, я пытаюсь создать раздел комментариев для блога. У меня возникли проблемы с идентификацией открытого идентификатора сообщений в моем jquery.

Я получаю эти ошибки из хромированной консоли

GET http://localhost:46223/api/posts//comments 

сообщения дан должен быть между ними двойным слэшем, но его нет. Когда я вручную вводим postID внутри вызова ajax, он работает отлично.

Контроллер Api выставляет комментарии из базы данных, соответствующий код ниже.

[Route("api/posts/{postId:long}/comments")] 
    public class CommentsController : Controller 
    { 
     readonly BlogDataContext _dbContext; 
     public CommentsController(BlogDataContext db) 
     { 
      _dbContext = db; 

     } 
     // GET: api/values 
     [HttpGet] 
     public IQueryable<Comment> Get(long postId) 
     { 
      return _dbContext.Comments.Where(x => x.PostId == postId); 
     } 

Когда я нажимаю «Показать комментарии» ссылку она хромированная консоль дает мне ошибку я говорил ранее. Соответствующий код из моего частичного обзора ниже. Самая важная строка снизу - только первая.

<a href="#" class="show-comments">Show Comments</a> 
         <div class="comments-container hide"> 
          <h3>Comments</h3> 
          <div class="comments"> 
          </div> 
          <hr /> 
          <div> 
           <a href="#" class="add-comment">Add a comment</a> 
           <div class="new-comment hide"> 
            <form role="form"> 
             <div class="form-group"> 
              <textarea name="Body" class="new-comment form-control" placeholder="Enter comment here..."></textarea> 
              <button type="submit" class="btn btn-default">Create Comment</button> 
             </div> 
            </form> 
           </div> 
          </div> 
         </div> 

Соответствующие фрагменты кода из моих .js

$(document).on('click', '.show-comments', function (evt) { 
     evt.stopPropagation(); 
     new Post(this).showComments(); 
     return false; 
    }); 

function Post(el) { 

    var $el = $(el), 
     postEl = $el.hasClass('blog-post') ? $el : $el.parents('.blog-post'), 
     postId = postEl.data('post-id'), 
     addCommentEl = postEl.find('.add-comment'), 
     newCommentEl = postEl.find('.new-comment'), 
     commentEl = newCommentEl.find('[name=Body]'), 
     commentsContainer = postEl.find('.comments-container'), 
     commentsEl = postEl.find('.comments'), 
     showCommentsButton = postEl.find('.show-comments'), 
     noCommentsEl = postEl.find('.no-comments'); 



    return { 
     addComment: addComment, 
     renderComment: renderComments, 
     showAddComment: showAddComment, 
     showComments: showComments, 
    }; 

function showComments() { 
     PostCommentService.getComments(postId).then(renderComments); 
    } 


var PostCommentService = (
    function PostCommentService() { 

     function call(postId, method, data) { 
      return $.ajax({ 
       // RESTful Web API URL: /api/posts/{postId}/comments 
       url: ['/api/posts', postId, 'comments'].join('/'), // If I Change the 'postId' here to an integer of an existing postId, it works perfectly. 
       type: method, 
       data: JSON.stringify(data), 
       contentType: 'application/json' 
      }); 
     } 

     return { 

      // Add comment by calling URL with POST method and passing data 
      addComment: function (comment) { 
       return call(comment.PostId, 'POST', comment); 
      }, 

      // Get comments by calling URL with GET method 
      getComments: function (postId) { 
       return call(postId, 'GET'); 
      } 
     }; 
    })(); 

Full .js file

Я извиняюсь, если я пропустил включить что-то, но у меня есть много кода. Если вам нужно знать что-нибудь еще, дайте мне знать.

Я также был бы благодарен только за некоторые предложения, где может быть моя ошибка.

Answer 1

Ваш код получает идентификатор сообщения из атрибута данных post-id postEl. postEl может быть одним и тем же тегом привязки, который был щелкнул или был родителем с классом blog-post css.

var $el = $(el), 
postEl = $el.hasClass('blog-post') ? $el : $el.parents('.blog-post'), 
postId = postEl.data('post-id'), 

Но в вашей разметке HTML такой атрибут данных для тега привязки отсутствует. Так что, если вы добавите, что ваш код будет иметь возможность получить идентификатор сообщения и использовать его для создания URL-адреса

<a href="#" class="show-comments blog-post" data-post-id="250">Show Comments</a> 

Я жестко закодирован 250 в качестве значения для атрибута data-post-id. Вы можете заменить его значением, исходящим из вашей модели.

<a href="#" class="show-comments blog-post" data-post-id="@Model.PostId">Show Comments</a>