使用Ajax将Json数据添加到表中而不刷新MVC中的页面？

Question

我有Order表和OrderNotes表。 OrderNotes中具有外键OrderID。我想使用AJAX将JSON数据插入到OrderNotes表中。以下是我的代码

这是包含Ajax的asp文件

<script>
   $(document).ready(function () {
                $.ajax({
                    url: "Orders/Index",
                    type: 'POST',
                    success: function (data) {
                        $("#divContent").html(data);
                        $('.dropdown').hover(function () {
                            var $text = $(this).closest("tr").find(".nearest").text();
                        $.ajax({
                            url: "OrderNotes/Index?orderId=" + $text + "",
                            type: 'POST',
                            success: function (data) {
                                $(".orderContent").html(data);
                                function CreateOrderNotes() {
                                    var Bywho = $("#By").val();
                                    var NoteBy = $("#Note").val();
                                    var OrderIdgiven = $("#OrderID").val();
                                    var $text = $(this).closest("tr").find(".nearest").text();
                                    $.ajax({
                                        type: "POST",
                                        URL: "OrderNotes/Create",
                                        data: JSON.stringify({
                                            By: Bywho, Note: NoteBy, OrderID: OrderIdgiven
                                        }),
                                        contentType: "application/json",
                                        success: function (result) {
                                            $("#table").append("<tr><td>" +
                                                result.OrderNotesID + "</td><td>" +
                                                result.By + "</td><td>" +
                                                result.Note + "</td><td>" +
                                                result.OrderID + "</td></tr>")
                                        }
                                    });
                                }
                            }
                        });


                    });
                }
            });

        });
    </script>
    <div id="divContent" class="container">
    </div>

订单控制器和视图并不重要，因此已排除了这些文件。

OrderNotes视图和控制器

OrderNotes控制器

namespace Ordernotes.Controllers
{
    public class OrderNotesController : Controller
    {
        private OrderDbContext db = new OrderDbContext();
        // GET: OrderNotes
        public ActionResult Index(int orderid)
        {
            List<OrderNote> OrderNotesforOrderId = new List<OrderNote>();
            if (db.Orders != null)
            {
                List<OrderNote> notesforeachorder = db.OrderNotes.Where(m => m.OrderID == orderid).ToList();
                foreach (var ev in notesforeachorder)
                {
                    OrderNotesforOrderId.Add(ev);
                }
            }
            return PartialView(OrderNotesforOrderId);
        }
        [HttpPost]
        public ActionResult Create(OrderNote orderNote)
        {
            OrderDbContext entities = new OrderDbContext();
            var notes = new OrderNote();
            notes.By =orderNote.By;
            notes.Note = orderNote.Note;
            notes.OrderID = orderNote.OrderID;
            entities.OrderNotes.Add(notes);
            entities.SaveChanges();
            return Json(notes, JsonRequestBehavior.AllowGet);
        }
    }
}

订单注释索引

@model IEnumerable<Ordernotes.Models.OrderNote>
<table class="table" id="table">
    <tr>
        <th>
            @Html.DisplayNameFor(model => model.OrderNoteID)
        </th>
        <th>
            @Html.DisplayNameFor(model => model.Note)
        </th>
        <th>
            @Html.DisplayNameFor(model => model.By)
        </th>
        <th>
            @Html.DisplayNameFor(model => model.OrderID)
        </th>
    </tr>
@foreach (var item in Model) {
    <tr>
        <td>
            @Html.DisplayFor(modelItem => item.OrderNoteID)
        </td>
        <td>
            @Html.DisplayFor(modelItem => item.Note)
        </td>
        <td>
            @Html.DisplayFor(modelItem => item.By)
        </td>
        <td>
            @Html.DisplayFor(modelItem => item.OrderID)
        </td>
    </tr>
}
</table>
<div class="notesfooter div-table">
    @Html.Partial("Create",new Ordernotes.Models.OrderNote())
</div>

OrderNotes创建

@model Ordernotes.Models.OrderNote



<div class="form-horizontal">
    <div class="form-group">
        @Html.LabelFor(model => model.By, htmlAttributes: new { @class = "control-label col-md-2" })
        <div class="col-md-10">
            @Html.TextBoxFor(model => model.By, new { htmlAttributes = new { @class = "form-control" } })
        </div>
    </div>
    <div class="form-group">
        @Html.LabelFor(model => model.Note, htmlAttributes: new { @class = "control-label col-md-2" })
        <div class="col-md-10">
            @Html.TextBoxFor(model => model.Note, new { htmlAttributes = new { @class = "form-control" } })
        </div>
    </div>

    <div class="form-group">
        @Html.LabelFor(model => model.OrderID, htmlAttributes: new { @class = "control-label col-md-2" })
        <div class="col-md-10">
            @Html.TextBoxFor(model => model.OrderID, new { htmlAttributes = new { @class = "form-control", @readonly = "readonly" } })
        </div>
    </div>
    <div class="form-group">
        <div class="col-md-offset-2 col-md-10">
            <a id="savesnotes" onclick="CreateOrderNotes()" class="btn btn-default" >Save</a>
        </div>
    </div>
</div>

只有Ajax的第三次呼叫不起作用。无法弄清楚如何发送JSON数据以及在OrderNotes Create函数中的Create中传递什么参数。