如何使用 JQuery AJAX 将模型传递给控制器？答案

【问题标题】：How to pass model to controller using JQuery AJAX?如何使用 JQuery AJAX 将模型传递给控制器？
【发布时间】：2020-08-25 00:21:47
【问题描述】：

我制作了调用IActionResult 的AJAX。但我不能将模型传递给它我只是传递一个字符串。我的问题是如何改为传递模型？

AJAX

    $('#CreateLesson').on('submit', function (e) {
        e.preventDefault();
        
        var lesson = $(this).serialize();

        $.ajax({
        type: "POST",
        url: '@Url.Action("Create", "Lessons")',
        dataType: "json",
        async: false,
        contentType: "application/json; charset=utf-8",
        data: JSON.stringify(lesson),
        success: function (data) { alert("succes"); },
        error: function (error) {
            console.log(error);
            alert(JSON.stringify(error));
        }
        });
    });

控制器

    [HttpPost]
    //[ValidateAntiForgeryToken]
    public IActionResult Create([FromBody]string lesson)
    {
        if (ModelState.IsValid)
        {
            _context.Add(lesson);
            _context.SaveChanges();
            return PartialView("_MyLessons", lesson);
        }
        return RedirectToAction("AjaxMetho", "Account");
        //return PartialView("Create");
    }

出来的文字很奇怪。它的字段比模型多。我的模型只有名称、等级、目标、描述。

“名称= C％23％20vvvvvv＆等级= 1＆子ID = 123＆条形码= vvvvvvnnnnnnnnnnnnnn与目标= ABC％40abc123＆描述= ABC％40abc123＆__ RequestVerificationToken = CfDJ8Ekvaq-NSQtAn7SGG0DJv7-ETDuOvAlwPoMzNMGyUSfJ6RRc2UY3KRxQbq0VEzBRE-YgHTSeMtnKY8DqTKXk8GoGsvkcB87xEM0-G5zbBO6BtoWLncH1ROE7iE2kiUbjBsPg_pwzZpXPUhS9_Nb14ay02l-N_DSULUT22cTa8zY5zpcyHY5Nsp-mN7tfLYiOGA” P>

当我尝试在没有 stringify 的情况下传递模型并更改 IActionResult 的参数以获取课程模型而不是字符串时，我得到 null !!

我应该怎么做才能通过模型探测？

【问题讨论】：

标签： jquery asp.net-mvc asp.net-core jquery-ajax

【解决方案1】：

看起来您想通过 Ajax 提交表单中的数据，然后在后台接收模型。这是一个简单的例子（我在formData中传递了数据，所以控制器不需要[FromBody]）：

查看：

 <form method="post" id="CreateLesson" enctype="multipart/form-data">
        <div asp-validation-summary="ModelOnly" class="text-danger"></div>
        <h4>Name</h4>
        <input type="text" class="form-control" name="name" value="" />
        <h4>Grade</h4>
        <input type="text" class="form-control" name="grade" value="" />
        <h4>Objectives</h4>
        <input type="text" class="form-control" name="objectives" value="" />
        <h4>Description</h4>
        <input type="text" class="form-control" name="description" value="" />
        <input type="submit" value="Create" class="btn btn-primary" />
    </form>

你认为的Js：

@section Scripts{
<script>
    $('#CreateLesson').submit(function (e) {
    e.preventDefault();

        var formData = new FormData($('#CreateLesson')[0]);
 
    $.ajax({
            type: "POST",
            url: "/Lessons/Create",
            async: true,
            data: formData,
            cache: false,
            processData: false,
            contentType: false,
            success: function (data) {
                console.log("Ok")
            },
            error: function (data) {
            }
        });
</script>}

你的控制器：

public IActionResult Create()
    {
        return View();
    }

    [HttpPost]
    //[ValidateAntiForgeryToken]
    public IActionResult Create(Lesson lesson)
    {
       
        return RedirectToAction("AjaxMetho", "Account");
      
    }

结果：

【讨论】：

我看到它在工作，但它对我不起作用！！我发现这个简单的解决方案 => 已发布。感谢您的努力和时间。

【解决方案2】：

我找到了一个更简单的解决方案

// View
//<form id="CreateLesson" asp-action="Create" asp-controller="Lessons" method="post" enctype="multipart/form-data">

// Ajax
$('#CreateLesson').on('submit', function (e) {

    e.preventDefault();
    var lesson = $(this).serialize();
    var Url = $(this).attr('action');
    $.post(Url, lesson);

});

// Controller
//public JsonResult Create(Lesson lesson) { }

【讨论】：