jQuery ajax 数据返回到 json 控制器，值为 null

Question

不知道为什么jQuery ajax 数据发送到控制器时，value 显示为null，比如图片显示成功函数(data) 错误。获取数据为空。 代码第一次测试时，只有一个数据为空，但后来显示所有数据值都为空。 我对代码的哪一部分有问题？

     <script type="text/javascript">
            $(document).ready(function () {
                $("#table1").click('#SelectBtn', function () {
                      
                    var bid = $(this).attr('data-id');
                    var status = $("#enumId option:selected").val();
                    var mess = $('#message-text').val();
                    
                    $('#Submit').click('#enumId', function () {
                            $.ajax({
                                type: 'POST',
                                dataType: 'json',
                                url: '@Url.Action("saveStatus")',
                                data: { id: bid, status:$("#enumId option:selected").val(), Remark:$('#message-text').val() },
                                success: function (data) {
                                    bid.url(data);
                                    status.val('');
                                    mess.val('');
                                    alert("Success, sent data to controller");

                                }, error: function (data) {
                                    alert("Error: " + data);
                                },
                            })
                        })

                    })      
            })
        </script>

     public JsonResult saveStatus(int id, string status, string Remark)
            {
                int approvalId;

                if (id == 0)
                {
                    var staff = db.Staffs.Where(s => s.UserName == User.Identity.Name).FirstOrDefault();
                    RequestForApproval ap = new RequestForApproval
                    {
                        RequestToStaffId = staff.Id,
                        RequestDate = DateTime.Now,


                    };
                    db.RequestForApprovals.Add(ap);
                    db.SaveChanges();
                    approvalId = ap.Id;
                }
                else
                {
                    approvalId = id;
                }
                Status stat = (Status)Enum.Parse(typeof(Status), status);

                ApprovalStatus temp = new ApprovalStatus
                {
                    Id = approvalId,
                    Remark = Remark,
                    Status = stat,
                    AddDate = DateTime.Now

                };
                db.ApprovalStatuses.Add(temp);
                db.SaveChanges();
                var df = db.ApprovalStatuses.Where(s => s.Id == approvalId).ToList();
                return Json(df);
            }

    <table class="table" id="table1">
        <tr>
            <th></th>
            <th>
                Staff Fname
            </th>
            <th>
                RequestDate
            </th>
            <th></th>
        </tr>

        @foreach (var item in Model.GetReApproval)
        {
            <tr>
                <td>
                    <a href="~/Reimbursements/GetOtherDetails/@item.ReimbursementId">@item.ReimbursementId</a>
                </td>
                <td>
                    @item.StaffName

                </td>
                <td>
                    @item.RequestDate
                </td>
                <td>
                    <input type="hidden" value="@item.RequerForApprovalId" />
                    <button type="button" class="btn btn-primary" data-toggle="modal" data-id="@item.RequerForApprovalId" data-target="#exampleModal" id="SelectBtn">Select</button>

                    <div class="modal fade" id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
                        <div class="modal-dialog">
                            <div class="modal-content">
                                <div class="modal-header">
                                    <h4 class="modal-title" id="Title">Select and Confirm</h4>
                                </div>
                                <div class="modal-body">
                                    <form>
                                        <div class="form-group">
                                            <input type="hidden" id="Reid" />
                                            @Html.DropDownList("ApprovalStatus", null, new { @class = "btn btn-info", id = "enumId" })
                                            @*@Html.DropDownList("Index", ViewBag.DropDownList as SelectList,null, new { @class = "btn btn-info",@id="DropDownList" })*@
                                        </div>
                                        <hr />

                                        <div class="form-group" style="visibility:visible" id="remarktext">
                                            <label for="message-text" class="control-label">Remark:</label>
                                            <textarea class="form-control" id="message-text"></textarea>
                                        </div>

                                    </form>
                                </div>
                                <div class="modal-footer">
                                    @*<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
            <button type="button" class="btn btn-primary">Confirme</button>*@
                                    @*<button data-id="@item.ReimbursementId" class="btn btn-primary" id="Submit" onclick="location.href='@Url.Action("AddRequestForApproval","Reimbursements")'">Submit</button>*@
                                    <button data-rid="@item.ReimbursementId" class="btn btn-primary" id="Submit" >Submit</button>
                                    <button class="btn btn-default" data-dismiss="modal" type="reset" id="Clear">Close</button>
                                </div>
                            </div>
                        </div>
                    </div>

                </td>
            </tr>
        }
    </table>

Answer 1

您需要创建一个视图模型或一个类才能在控制器中绑定这些值。

// new model
public class JsonReceiveModel{
    public int Id {get;set;}
    public string Status {get;set;}
    public string Remark {get;set;}
}

// modifed to use model.Id, model.Status, model.Remark
public JsonResult saveStatus(JsonReceiveModel model) {
    int approvalId;

    if (model.Id == 0) {
        var staff = db.Staffs.Where(s => s.UserName == User.Identity.Name).FirstOrDefault();
        RequestForApproval ap = new RequestForApproval {
            RequestToStaffId = staff.Id,
                RequestDate = DateTime.Now,

        };
        db.RequestForApprovals.Add(ap);
        db.SaveChanges();
        approvalId = ap.Id;
    } else {
        approvalId = id;
    }
    Status stat = (Status) Enum.Parse(typeof(Status), status);

    ApprovalStatus temp = new ApprovalStatus {
        Id = approvalId,
            Remark = model.Remark,
            Status = model.Status,
            AddDate = DateTime.Now

    };
    db.ApprovalStatuses.Add(temp);
    db.SaveChanges();
    var df = db.ApprovalStatuses.Where(s => s.Id == approvalId).ToList();
    return Json(df);
}

然后在您的 ajax 调用中包含 contentType: 'application/json'。

$.ajax({
    type: 'POST',
    dataType: 'json',
    url: '@Url.Action("saveStatus")',
    contentType: 'application/json',
    data: {
        id: bid,
        status: $("#enumId option:selected").val(),
        Remark: $('#message-text').val()
    },
    success: function(data) {
        bid.url(data);
        status.val('');
        mess.val('');
        alert("Success, sent data to controller");

    },
    error: function(data) {
        alert("Error: " + data);
    },
})