使用jQuery Ajax发布表单数据

问题描述

我下面有一个引导程序模式代码

state

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

props

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

    @*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>

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

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

我在以上代码中都没有输入

我只是不知道自己做错了什么

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

预先感谢

施莱德

解决方法

为使路由正常工作，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) {
        ...
    },

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

asp.net asp.net-ajax jquery model-view-controller