使用 $.getJson 方法从 jquery 调用 C# MVC 控制器方法

call an c# mvc controller method from jquery using $.getJson Method

本文关键字:方法 MVC 控制器 调用 getJson 使用 jquery      更新时间:2023-09-26

我显然错过了一些东西,但终其一生都看不到它是什么,所以如果有人能指出我的错误,我将不胜感激。

我有一个简单的详细信息页面,其中包含一个表单,用于向所选详细信息添加注释。

我有一个观点,其中包含以下内容:

@using (Html.BeginForm("Details", "Home", FormMethod.Post, new { id ="commentForm" }))
{
    @Html.AntiForgeryToken()
    @Html.ValidationSummary(true)
    <div class="form-group">
        @Html.LabelFor(model => model.NewComment.Name);
        @Html.TextBoxFor(model => model.NewComment.Name, new { @class = "form-control" })
    </div>
    <div class="form-group">
        @Html.LabelFor(model => model.NewComment.Body);
        @Html.TextAreaFor(model => model.NewComment.Body, new { @class = "form-control" })
    </div>
    <input type="submit" class="btn btn-primary" value="Add Comment" />
} 

然后,此视图调用以下 c# 控制器方法:

        [HttpPost]
        public ActionResult Details(int id,DetailsViewModel model)
        {
            if (!ModelState.IsValid)
                return View(model);
            var content =_data.First(c => c.Id == id);
            content.Comments.Add(model.NewComment);
            return View(new DetailsViewModel(content));
        }

如果我使用表单而不添加任何其他代码来使用 jquery 捕获提交,那么这一切都可以正常工作。

当我将以下 JQuery 代码添加到页面时,上面的服务器代码不会执行(我知道我实际上并没有在上述方法中返回任何 json,但如果该方法没有执行,现在似乎是多余的?

    $(document).ready(function () {
        $("#commentForm").submit(function (event) {
            event.preventDefault();
            var url = $(this).attr('action');
            $.getJSON(url, $(this).serialize(), function (comment) {
                alert(comment)
            });
        });
    });

如果还值得注意的是,如果我在 getjson 调用周围添加任何警报,那么这些警报都会正确触发。

有人对我做错了什么有任何想法吗?

当你使用.getJSON时,它会发出一个GET请求,而你的Details方法只回答POST请求。

试试这个:

$.ajax({
  type: "POST",
  url: url,
  data: $(this).serialize(),
  success: function(comment) {
    alert(comment);
  }
});

尝试发布到控制器。

$.getJSON 正在执行一个 http get 在幕后。您的控制器终端节点需要发布,并且不会接受 http get。

这是一个将提供相同功能的函数(博客参考):

(function ($) {
    $.postJSON = function (url, data) {
        var o = {
            url: url,
            type: "POST",
            dataType: "json",
            contentType: 'application/json; charset=utf-8'
        };
        if (data !== undefined) {
            o.data = JSON.stringify(data);
        }
        return $.ajax(o);
    };
} (jQuery));

只需将其添加到jQuery包含之后的某个地方即可。

当你

使用FormMethod.Post时,$.post()改用 http://api.jquery.com/jQuery.post/