Ajax调用在ASPMVC中无法正常工作

本文关键字：常工作 工作 调用 ASPMVC Ajax | 更新日期: 2023-09-27 18:25:54

所以我试图为博客创建一个评论部分。我在jquery中识别打开的博客文章id时遇到问题。

我从铬控制台得到这些错误

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

完整的.js文件

如果我错过了包含一些内容，我很抱歉，但我有很多代码。如果你还需要知道什么，请告诉我。

我也非常感谢您对我的错误提出的一些建议。

Ajax调用在ASPMVC中无法正常工作

您的代码从postEl的数据属性post-id获取post id。postEl可以是被点击的同一个锚标记，也可以是blog-postCss类的父标记。

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

但是在HTML标记中，锚点标记没有这样的数据属性。因此，如果你添加了这个，你的代码将能够获得帖子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>
相关文章：