使用 jquery ajax post 发布表单数据答案

【问题标题】：Posting formdata using jquery ajax post使用 jquery ajax post 发布表单数据
【发布时间】：2021-01-17 19:13:44
【问题描述】：

我在下面有一个引导模式表单代码

    @*Modal form Create*@
<div class="modal" tabindex="-1" data-backdrop="static" role="dialog" id="DivCreateEnrolledDevices">
    <div class="modal-dialog" @*role="document"*@>
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title">Create New Devices</h5>
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                </button>
            </div>
            <div class="modal-body" id="DivDevicesCreate">
                    <div id="sdvPartial" style="height:200px">

                    </div>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
                <button id="btnSave" type="button" class="btn btn-secondary"  onclick="SaveChanges()" >Save Changes</button>

            </div>
        </div>
    </div>
</div>

我用来在下面显示部分视图代码

 <div class="form-horizontal">
        @*<h4>EnrolledDevicesModel</h4>
    <hr />*@
        <form id="dvCreateFrm">

            @Html.ValidationSummary(true, "", new { @class = "text-danger" })
            <div class="form-group" style="display:none">
                @Html.LabelFor(model => model.DeviceID, htmlAttributes: new { @class = "control-label col-md-2" })
                <div class="col-md-10">
                    @Html.EditorFor(model => model.DeviceID, new { htmlAttributes = new { @class = "form-control" } })
                    @Html.ValidationMessageFor(model => model.DeviceID, "", new { @class = "text-danger" })
                </div>
            </div>
            <div class="form-group" style="display:none">
                @Html.LabelFor(model => model.DeviceKeyID, htmlAttributes: new { @class = "control-label col-md-2" })
                <div class="col-md-10">
                    @Html.EditorFor(model => model.DeviceKeyID, new { htmlAttributes = new { @class = "form-control" } })
                    @Html.ValidationMessageFor(model => model.DeviceKeyID, "", new { @class = "text-danger" })
                </div>
            </div>

            <div class="form-group" style="display:none">
                @Html.LabelFor(model => model.StoreBranchID, htmlAttributes: new { @class = "control-label col-md-2" })
                <div class="col-md-10">
                    @Html.EditorFor(model => model.StoreBranchID, new { htmlAttributes = new { @class = "form-control" }, @value = "0" })
                    @Html.ValidationMessageFor(model => model.StoreBranchID, "", new { @class = "text-danger" })
                </div>
            </div>

            <div class="form-group" style="display:none">
                @Html.LabelFor(model => model.UserID, htmlAttributes: new { @class = "control-label col-md-2" })
                <div class="col-md-10">
                    @Html.EditorFor(model => model.UserID, new { htmlAttributes = new { @class = "form-control" } })
                    @Html.ValidationMessageFor(model => model.UserID, "", new { @class = "text-danger" })
                </div>
            </div>

            <div class="form-group" style="display:none">
                @Html.LabelFor(model => model.EnrolledDate, htmlAttributes: new { @class = "control-label col-md-2" })
                <div class="col-md-10">
                    @Html.EditorFor(model => model.EnrolledDate, new { htmlAttributes = new { @class = "form-control" } })
                    @Html.ValidationMessageFor(model => model.EnrolledDate, "", new { @class = "text-danger" })
                </div>
            </div>

            <div class="form-group">
                @Html.LabelFor(model => model.DeviceName, htmlAttributes: new { @class = "control-label col-md-2" })
                <div class="col-md-10">
                    @Html.EditorFor(model => model.DeviceName, new { htmlAttributes = new { @class = "form-control" } })
                    @Html.ValidationMessageFor(model => model.DeviceName, "", new { @class = "text-danger" })
                </div>
            </div>

            <div class="form-group">
                @Html.LabelFor(model => model.DeviceKey, htmlAttributes: new { @class = "control-label col-md-2" })
                <div class="col-md-10">
                    @Html.DropDownList("ddlDeviceKey", TempData["DeviceKey"] as SelectList, "Click to select")

                    @*@Html.EditorFor(model => model.DeviceKey, new { htmlAttributes = new { @class = "form-control" } })*@
                    @Html.ValidationMessageFor(model => model.DeviceKey, "", new { @class = "text-danger" })
                </div>
            </div>


            <div class="form-group">
                <div class="col-md-offset-2 col-md-10">
                    @*<input type="submit" value="Create" class="btn btn-default" />*@
                    @*<button id="btnCreateDv" type="submit" style="display:none">Submit</button>*@
                    @*@Html.ActionLink("Create","Create","EnrolledDevices",new{@class="btn btn-primary")*@
                </div>
            </div>
        </form>
    </div>

每当单击下面的保存更改按钮时，我都会使用 jquery ajax 发布数据

function SaveChanges() {
$('#btnCreateDv').click()
var token = $('input[name="__RequestVerificationToken"]').val();
var urlCreateDev = $('#urlCreateDev').val()
var frm = $('#dvCreateFrm').serialize();
$.ajax({
    url: '/EnrolledDevices/Create' /*'@Url.Action("Create","EnrolledDevices")'*/ /**/,
    type: 'Post',
    contentType: 'apllication/html; charset-utf-8',
    data: { frm, token },
    datatype: 'html',
    success: function (response) {
        $('#DivCreateEnrolledDevices').modal('hide')
    },
    error: function (xhr, status, error) {

        alert(xhr.responseText);
        alert(xhr.status);
        alert(error);
    }
})

} 我的控制器代码就像

        public ActionResult Create(FormCollection collection)
    {
        LoadFormData( collection);
        try
        {
            // TODO: Add insert logic here

            return RedirectToAction("Index");
        }
        catch
        {
            return View();
        }
    }

但由于某种原因，没有数据被发送到控制器

        private void LoadFormData(FormCollection frm)
    {
        nEnrolledDevicesModel.DeviceKeyID = Convert.ToInt32(frm["DeviceKeyID"]);
        nEnrolledDevicesModel.DeviceKey = frm["DeviceKey"].ToString();
        nEnrolledDevicesModel.DeviceName = frm["DeviceName"].ToString();
    }

我在上面的代码中都得到了 null

我就是想不通我做错了什么

我可以在这里得到一些帮助

提前致谢

施莱德

【问题讨论】：

您的partial view code 是否在模态中呈现？我不太清楚你为什么在模态中调用saveChanges
保存信息
您在发布的代码中有一个类型：“apllication/html”

标签： jquery asp.net model-view-controller asp.net-ajax

【解决方案1】：

为了让路由正常工作，ASP.NET 需要能够映射发布的类型和接收的类型。

您正在发布#dvCreateFrm 的序列化对象，它是整个 HTML 表单，而不仅仅是数据。

var frm = $('#dvCreateFrm').serialize();

我从未见过这种方法（它可能是可以接受的），但通常您只需发布相关数据。

解决您的问题；

创建一个接受单个字符串的控制器并更新您的 JS 帖子以传递单个字符串。

public ActionResult NewEndpoint(string myObject )
{
 ...
}

var myObject = "Somevalue".serialize();
$.ajax({
    url: '/EnrolledDevices/NewEndpoint' /**/,
    type: 'Post',
    contentType: 'application/json; charset-utf-8',
    data: { myObject },
    success: function (response) {
        ...
    },

完成这项工作后，您可以反复添加更多复杂性 - 可以作为单个复杂对象，也可以作为许多单独的字段。

【讨论】：