需要 AJAX 调用帮助的 HttpPost

Question

请问我的代码中还需要什么，到目前为止我有这个：

  <script type="text/javascript">
 function PostNewsComment(newsId) {
  $.ajax({
    url: "<%= Url.Action("AddCommentOnNews", "Home", new { area = "News" }) %>?newsId=" + newsId + "&newsComment=" + $("#textareaforreply").val(), success: function (data) {
      $("#news-comment-content").html(data + $("#news-comment-content").html());
      type: 'POST'
    }
  });
}
$("#textareaforreply").val("");
</script>

和

    [HttpPost]
[NoCache]
public ActionResult AddCommentOnNews(int newsId, string newsComment)
{
  if (!String.IsNullOrWhiteSpace(newsComment))
  {
    var currentUser = ZincService.GetUserForId(CurrentUser.UserId);
    ZincService.NewsService.AddCommentOnNews(newsId, newsComment, currentUser.UserId);

    Zinc.DataModels.News.NewsCommentsDataModel model = new DataModels.News.NewsCommentsDataModel();
    var today = DateTime.UtcNow;
    model.CommentDateAndTime = today;
    model.NewsComment = newsComment;
    model.Firstname = currentUser.Firstname;
    model.Surname = currentUser.Surname;
    model.UserId = CurrentUser.UserId;
    return View("NewsComment", model);
  }

  return null;
}


<div class="actions-right">    
  <a href="javascript:PostNewsComment(<%: Model.News.NewsId %>);" class="button" id="post_button"><%: Html.Resource(Resources.Global.Button.Reply) %></a>                
</div>

我不知道这是如何工作的，因为它在 FF 中不起作用？？？ 另一件事是我不能通过 return null 我必须通过 JSON false ???

有什么帮助吗？ 谢谢

Answer 1

您应该对请求参数进行编码。现在你已经用强连接将它们连接到请求中，这是一种错误的方法。有一个名为 data 的属性允许您将参数传递给 AJAX 请求并将正确的 url 编码留给框架：

function PostNewsComment(newsId) {
    $.ajax({
        url: '<%= Url.Action("AddCommentOnNews", "Home", new { area = "News" }) %>', 
        type: 'POST',
        data: { 
            newsId: newsId, 
            newsComment: $('#textareaforreply').val() 
        },
        success: function (data) {
            $('#news-comment-content').html(data + $('#news-comment-content').html());
        }
    });
}

此外，您还没有显示您在何处以及如何调用此 PostNewsComment 函数，但如果在单击链接或提交按钮时发生这种情况，请确保您已通过返回 false 取消默认操作，就像这样：

$('#someLink').click(function() {
    PostNewsComment('123');
    return false;
});

另一件事是我不能通过 return null 我必须通过 JSON false ???

在这种情况下，您可以让控制器操作返回 JsonResult：

return Json(new { success = false });

然后在你的成功回调中你可以测试这个条件：

success: function (data) {
    if (!data.success) {
        // the server returned a Json result indicating a failure
        alert('Oops something bad happened on the server');
    } else {
        // the server returned the view => we can go ahead and update our DOM
        $('#news-comment-content').html(data + $('#news-comment-content').html());
    }
}

您可能应该注意的另一件事是评论文本中存在危险字符，例如< 或>。为了允许这些字符，我建议您构建一个视图模型并使用 [AllowHtml] 属性装饰相应的属性：

public class NewsViewModel
{
    public int NewsId { get; set; }

    [AllowHtml]
    [Required]
    public string NewsComment { get; set; }
}

现在您的控制器操作显然会将视图模型作为参数：

[HttpPost]
[NoCache]
public ActionResult AddCommentOnNews(NewsViewModel viewModel)
{
    if (!ModelState.IsValid)
    {
        var currentUser = ZincService.GetUserForId(CurrentUser.UserId);
        ZincService.NewsService.AddCommentOnNews(viewModel.NewsId, viewModel.NewsComment, currentUser.UserId);

        var model = new DataModels.News.NewsCommentsDataModel();
        var today = DateTime.UtcNow;
        model.CommentDateAndTime = today;
        model.NewsComment = newsComment;
        model.Firstname = currentUser.Firstname;
        model.Surname = currentUser.Surname;
        model.UserId = CurrentUser.UserId;
        return View("NewsComment", model);
    }

    return Json(new { success = false });
}