c# - Ajax 调用在 ASP MVC 中无法正常运行

Question

所以我正在尝试为博客创建一个评论部分。我无法在我的 jquery 中识别打开的博客文章 ID。

我从 chrome 控制台收到这些错误

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

postid 应该在双斜线之间，但不是。当我在 ajax 调用中手动输入 postID 时，它工作得很好。

Api Controller 正在暴露来自数据库的评论，相关代码如下。

[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);
        }

当我按下“显示评论”链接时，chrome 控制台会给我之前提到的错误。我下面部分 View 中的相关代码。下面最重要的一行只是第一行。

<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

您的代码正在从 postEl 的数据属性 post-id 获取帖子 ID。 postEl 可以是被点击的同一个 anchor 标记，或者它是 blog-post css 类的父级。

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

但是在您的 HTML 标记中， anchor 标记没有这样的数据属性。因此，如果您添加它，您的代码将能够获取帖子 ID 并使用它来构建 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>