jquery - 如何使用 JQuery AJAX 将模型传递给控制器​​？

Question

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

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");
    }

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

"Name=C%23%20vvvvvv&grade=1&SubID=123&BarCode=vvvvvvnnnnnnnnnnnnnn&Objectives=ABC%40abc123&Description=ABC%40abc123&__RequestVerificationToken=CfDJ8Ekvaq-NSQtAn7SGG0DJv7-ETDuOvAlwPoMzNMGyUSfJ6RRc2UY3KRxQbq0VEzBRE-YgHTSeMtnKY8DqTKXk8GoGsvkcB87xEM0-G5zbBO6BtoWLncH1ROE7iE2kiUbjBsPg_pwzZpXPUhS9_Nb14ay02l-N_DSULUT22cTa8zY5zpcyHY5Nsp-mN7tfLYiOGA"

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

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

Answer 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");
      
    }

结果：

Answer 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) { }