Использование Ajax добавить данные Json в таблицу, не обновляя страницу в MVC? - PullRequest
0 голосов
/ 06 сентября 2018

У меня есть таблица заказов и таблица OrderNotes. В OrderNotes есть внешний ключ OrderID. Я хочу использовать AJAX для вставки данных JSON в мою таблицу OrderNotes. Ниже мой код

Вот файл asps, содержащий Ajax, который

<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 View и контроллер

OrderNotes Controller

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

Индекс OrderNotes

@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 и какой параметр передать в функции Create in OrderNotes Create.

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...