jQuery ajax 函数在我的项目中无法正常工作

Question

我想通过Ajax函数按id加载数据到div

commentList

。我需要使用 Ajax 通过表单标签将数据发送到名为

CreateComment

的操作。创建评论后，我需要再次按 id

commentList

加载 div 中的数据。但表单标签不会发送数据，并且加载视图后数据也不会加载到 div

commentList

。

这是表单标签：

<form class="active" asp-controller="Product" asp-action="CreateComment" id="review_form"
      data-ajax="true" data-ajax-method="post" data-ajax-mode="replace"
      data-ajax-update="#listcomment" data-ajax-success="Success">
    <input type="hidden" name="comment.ProductId" value="@Model.ProductId" />
    <label>
            متن
    </label>
    <textarea name="comment.Comment" id="comment_Comment"></textarea>
    <button class="form-btn" type="submit">ثبت نظر</button>
</form>

这就是动作

CreateComment

:

 public IActionResult CreateComment(ProductComment comment)
 {
     comment.CreateDate = DateTime.Now;
     comment.IsDelete = false;
     comment.UserId = _userService.GetUserIdByUserName(User.Identity.Name);

     _productService.AddComment(comment);

     return View("ShowComments", _productService.GetProductComments(comment.ProductId));
 }

这是我要通过Ajax加载数据的div：

 <div class="small-12 medium-5 large-5 columns" id="commentList">
     <div class="fr-border"></div>
 </div>

这是ajax函数：

<script src="/js/jquery.unobtrusive-ajax.min.js"></script>
<script>
    function Success() {
        $("#comment_Comment").val("");
    }
    
    $(function () {
        $("#commentList").load("/Product/ShowComments/@(Model.ProductId)");
    });
</script>

Answer 1

如果你的

ShowComments

是局部视图，你可以使用

return PartialView

和

Html.PartialAsync

方法来调用它。这是一个例子供您参考：

控制器：

public IActionResult CreateComment(ProductComment comment)
 {
     comment.CreateDate = DateTime.Now;
     comment.IsDelete = false;
     comment.UserId = _userService.GetUserIdByUserName(User.Identity.Name);

     _productService.AddComment(comment);

     return PartialView("ShowComments", _productService.GetProductComments(comment.ProductId));
 }

ShowComments.cshtml：

@model IEnumerable<ProductComment>

    @foreach (var comment in Model)
    {
        <div class="comment">
            <p>@comment.Text</p>
            <small>@comment.CreateDate.ToString("yyyy-MM-dd HH:mm:ss")</small>
        </div>
    }

索引.cshtml：

<form id="commentForm" method="post" asp-action="CreateComment" asp-controller="Product">
    <input type="hidden" name="ProductId" value="101" />
    <textarea name="Text" placeholder="add comment"></textarea>
    <button type="submit">ثبت نظر</button>
</form>
<div id="commentList">
    @await Html.PartialAsync("ShowComments", (object)Model)

</div>

@section Scripts {
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
    <script>
        $(document).ready(function () {
            $('#commentForm').on('submit', function (event) {
                event.preventDefault(); 

                $.ajax({
                    url: '@Url.Action("CreateComment", "Product")',
                    type: 'POST',
                    data: $(this).serialize(),
                    success: function (response) {
                        $('#commentList').html(response); 
                    },
                    error: function (xhr, status, error) {
                        console.error('Error:', error);
                    }
                });
            });
        });
    </script>
}

添加示例评论后：

有关部分视图的更多信息，请参阅此链接。