是否可以使用 Ajax 表单提交传递路由值？

Question

问题：如何使用 Ajax 将路由值连同表单传递给控制器？

我通常使用这样的 Ajax 提交表单

        function AjaxFormSubmit(frm) {
            var form = `#${frm}`;
            $(form).submit(function (e) {
                e.preventDefault(); 
                var actionUrl = $(form).attr('action');

                $.ajax({
                    type: "POST",
                    url: actionUrl,
                    processData: false,
                    contentType: false,
                    data: $(form).serialize(), 
                    success: function (data) {
                        alert(data); 
                    }
                });
            });
        }

用法：

        <button onclick="AjaxFormSubmit('formName')" class="btn btn-primary">Create</button>

表格本身

   <form id="formName" asp-action="Create" asp-route-id="somedata">
    .... some fields

然后我成功提交了表单但是我从来没有得到路由值asp-route-id

我是这样在C#控制器端接收的

    [HttpPost]
    [ValidateAntiForgeryToken]
    public IActionResult Create(TheModel modelName, [FromQuery]string id)
    {
        ......
        return Json(id);
    }

或...[FromRoute]string id

none 个正在工作

我得到一个值为 null 的空白页面!!

最后，如何使用 Ajax 将路由值连同表单传递给控制器？

Answer 1

基本上，如果我们想使用表单向我们的服务器提交数据，我们会像这样编写您的代码，但不会集成 ajax，在我的代码片段中，我添加了 2 个按钮，一个是使用表单数据提交，另一个使用ajax发送数据：

    @model TestFormModel

<div class="row">
    <div class="col-md-4">
        <form method="post" id="formName" asp-action="CreateAction" asp-route-id="somedata">
            <div class="form-group">
                <label asp-for="prop1" class="control-label"></label>
                <input asp-for="prop1" class="form-control" />
            </div>
            <div class="form-group">
                <label asp-for="prop2" class="control-label"></label>
                <input asp-for="prop2" class="form-control" />
            </div>
            <div class="form-group">
                <input type="submit" value="Create" class="btn btn-primary" />
            </div>
        </form>
         <button onclick="AjaxFormSubmit('formName')" class="btn btn-primary">CreateByAjax</button>
    </div>
</div>
<script>
    function AjaxFormSubmit(frm) {
        var form = `#${frm}`;
        console.log($(form).serialize());
        $.ajax({
            type: "POST",
            url: "https://localhost:44385/home/CreateAction",
            data: {
                prop1:$("#prop1").val(),
                prop2:$("#prop2").val(),
                id:"somedata"
            }, 
            success: function (data) {
                alert(data); 
            }
        });
    }
</script>

添加控制台日志，我们可以看到表单中没有id 属性。

是否可以使用 Ajax 表单提交传递路由值？

is it possible to pass route value using Ajax form submit?

jquery

ajax

asp.net-core

routes

form-submit