Блог

Я работаю над проектом MVC, в котором показана таблица. При Edit Delete нажатии на опцию или внутри таблицы должен появиться модальный параметр. Внутри этого модала должны появиться конкретные записи из таблицы.

 <div class="row">
    <div class="col">
        <div class="card col">
            <div class="row">
                <div class="col">
                    <h3>Collection Type:</h3>
                </div>
                <div class="col">
                    <label id="lblCollectionType"></label>
                </div>
            </div>

            <table class="table table-bordered" id="collectionNames_Entries_Modal_Index">
                <thead>
                    <tr>
                        <th>
                            Index
                        </th>
                        <th>
                            Entry
                        </th>
                        <th>
                            Options
                        </th>
                    </tr>
                </thead>
                <tbody>
                    @foreach (var item in Model)
                    {
                        foreach (var name in item.Names)
                        {
                            <tr class="@item.CollectionType">
                                <td id="Index">
                                    @item.Names.IndexOf(name).ToString()
                                </td>
                                <td id="Entry">
                                    @name
                                </td>
                                <td>
                                    <a href="#" data-toggle="modal" data-target="#CollectionNameEditModal" onclick="EditElement('@item.Id')">Edit</a> | <a href="#" data-toggle="modal" data-target="#CollectionNameDeleteModal" onclick="DeleteElement('@item.Id')">Delete</a>
                                </td>
                            </tr>
                        }
                    }
                </tbody>
            </table>
        </div>
    </div>
</div>

@section Scripts {
    <script src="//cdn.datatables.net/1.10.23/js/jquery.dataTables.min.js"></script>

    <script type="text/javascript">
        function DeleteElement(id) {
            var id = $('#btnDelete').attr('data-collectionName-delete')
            $.ajax({
                type: "POST",
                url: '@Url.Action("Delete")',
                data: JSON.stringify({ id: CollectionNameid}),
                contentType:"application/json; charset=utf-8",
                success: function () {
                    window.location.reload();
                    getElementInfo()
                },
                error: {
                }
            })
        }

        function EditElement(id) {
            var id = $('#btnEdit').attr('data-collectionName-edit')
            $.ajax({
                type: "POST",
                url: '@Url.Action("Edit")',
                data: JSON.stringify({ id: CollectionNameid}),
                contentType:"application/json; charset=utf-8",
                success: function () {
                    window.location.reload();
                    getElementInfo()
                },
                error: {
                }
            })
        }

        function getElementInfo(id) {
            var Index, Entry
            Index = $('#'   id).find("td[id='Index']").text().trim()
            Entry = $('#'   id).find("td[id='Entry']").text().trim()

            $('.modal_Index').text(Index)
            $('.modal_Entry').text(Entry)
        }
    </script>
}

            @*EDIT MODAL*@
            <div class="modal fade" id="CollectionNameEditModal">
                <div class="modal-dialog">
                    <div class="modal-content">
                        <div class="modal-header">
                            <h3>Edit Entry</h3>
                        </div>
                        <div class="modal-body">

                            @*DISPLAY SPECIFIC CollectionName INFO*@
                            <div class="container pt-3">
                                <div class="row justify-content-center">
                                    <table class="table table-bordered" id="collectionName_edit_table">
                                        <thead>
                                            <tr>
                                                <th>
                                                    Index
                                                </th>
                                                <th>
                                                    Entry
                                                </th>
                                            </tr>
                                        </thead>

                                        <tbody>
                                            <tr id="">
                                                <td class="modal_Index">
                                                </td>
                                                <td class="modal_Entry">
                                                </td>
                                            </tr>
                                        </tbody>
                                    </table>
                                </div>
                            </div>

                        </div>
                        <div class="modal-footer">
                            <button type="submit" id="btnEdit" class="btn btn-danger" data-dismiss="modal" onclick="EditCollectionNameEntry()" data-collectionName-edit="">
                                Edit
                            </button>
                            <button type="submit" class="btn btn-primary" data-dismiss="modal">
                                Cancel
                            </button>
                        </div>
                    </div>
                </div>
            </div>
            @*EDIT MODAL*@


            @*DELETE MODAL*@
            <div class="modal fade" id="CollectionNameDeleteModal">
                <div class="modal-dialog modal-sm">
                    <div class="modal-content">
                        <div class="modal-header">
                            <h3>Delete Entry</h3>
                        </div>
                        <div class="modal-body">
                            <h5>Are you sure you want to Delete this CollectionName entry?</h5>

                            @*DISPLAY SPECIFIC INFO*@
                            <div class="container pt-3">
                                <div class="row justify-content-center">
                                    <table class="table table-bordered" id="collectionName_delete_table">
                                        <thead>
                                            <tr>
                                                <th>
                                                    Index
                                                </th>
                                                <th>
                                                    Entry
                                                </th>
                                            </tr>
                                        </thead>

                                        <tbody>
                                            <tr id="">
                                                <td class="modal_Index">
                                                </td>
                                                <td class="modal_Entry">
                                                </td>
                                            </tr>
                                        </tbody>
                                    </table>
                                    @*DISPLAY SPECIFIC INFO*@

                                </div>
                                <div class="modal-footer">
                                    <button type="submit" id="btnDelete" class="btn btn-danger" data-dismiss="modal" onclick="DeleteCollectionName()" data-collectionName-delete="">
                                        Delete
                                    </button>
                                    <button type="submit" class="btn btn-primary" data-dismiss="modal">
                                        Cancel
                                    </button>
                                </div>
                            </div>
                        </div>
                    </div>
                    @*DELETE MODAL*@
 

После использования инструментов разработки chrome я знаю, что имя коллекции в

data: JSON.stringify({id: CollectionNameId})

не определено. Это мой первый раз, когда я некоторое время работаю с AJAX, поэтому я просто немного запутался в синтаксисе и в том, как правильно заполнить таблицу, которая находится внутри модала.