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

当我按下＆＃34;显示评论＆＃34;链接它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

对不起，如果我错过了包含的东西，但我有很多代码。如果您需要了解其他信息，请告诉我们。

我也很感激我的错误所在的一些建议。

Answer 1

您的代码从postEl的数据属性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标记中，锚标记没有这样的数据属性。因此，如果你添加它，你的代码将能够获得post 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>

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

1 个答案: