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

因此，我正在尝试为博客创建评论部分。我在标识jquery中打开的博客文章ID时遇到问题。

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

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

postid应该在双斜线之间，但不能在双斜线之间。当我在ajax调用中手动输入postID时，它可以正常工作。

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

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

<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

很抱歉，如果我错过了一些内容，但是我有很多代码。如果您需要了解其他任何信息，请告诉我。

对于可能会出现错误的一些建议，我也将不胜感激。

最佳答案

您的代码从postEl的data属性post-id获取帖子ID。 postEl可以是与单击相同的锚标记，也可以是blog-post css类的父标记。

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

但是在您的HTML标记中，anchor标签没有此类数据属性。因此，如果您添加该代码，则您的代码将能够获取帖子ID并使用该ID来构建网址

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