как загрузить данные в таблицу и связать то же самое для просмотра класса модели в. net ядро ​​mvc (без обновления страницы)

Question

Я пытаюсь добавить данные в таблицу через сервер, но не удается. Я пробовал много вещей, но ничего не получалось. Я получаю данные с сервера, но не могу заполнить их в таблице. Кто-нибудь может мне помочь? Я получаю следующее: «Предупреждение DataTables: идентификатор таблицы = PartlarsTable - неверный ответ JSON. Для получения дополнительной информации об этой ошибке см. http://datatables.net/tn/1»

Позвольте мне объяснить мой сначала код: (в представлении) Когда я нажимаю кнопку «Добавить новое частное», модальное окно bootstrap всплывает с полями ввода, эти поля отправляются на сервер, а затем снова обратно для просмотра и заполнения таблицы теми же данными без обновления вся страница.

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

вот мое мнение:

<form class="form-horizontal" method="post" id="createAdHocForm">
    <div class="row">
        <div class="col-md-3">
            <div class="form-group">
                <label>Select Flat</label>
                <select asp-for="AdHocInvoice.FlatRid" asp-items="@(new SelectList(Model.Flats,"FlatRid","FlatNumber"))" class="form-control form-control-sm selectpicker" data-live-search="true">
                    <option selected disabled value="">Select One</option>
                </select>
            </div>
        </div>
    </div>
    <table class="table table-sm table-responsive-md nowrap w-100" id="particlarsTable">
        <thead class="thead-light">
            <tr>
                <th>Particulars</th>
                <th>Amount</th>
                <th></th>
            </tr>
        </thead>
        <tbody class="bg-white">
            @foreach (var item in Model.AdHocInvoice.FlatInvoiceItems)
            {
                <tr>
                    <td>@item.Particular</td>
                    <td>@item.Amount</td>
                    <td></td>
                </tr>
            }
        </tbody>
    </table>
    <button class="btn btn-sm btn-outline-info" type="button" onclick="showParticularForm()">Add New Particular</button>
    <hr />
    <div class="row text-center">
            <button class="btn btn-sm btn-outline-success mx-auto" type="submit">Submit</button>
        </div>
</form>

bootstrap модальное заполнение таблицы:

<div class="modal fade" id="particularWindow">
    <div class="modal-dialog modal-dialog-centered modal-dialog-scrollable">
        <div class="modal-content">
            <div class="modal-header">
                <h4 class="modal-title">Invoice Items</h4>
                <button type="button" class="close" data-dismiss="modal">&times;</button>
            </div>
            <div class="modal-body">
                <form class="form-horizontal" method="post" id="particularForm">
                    <div class="row">
                        <div class="col-md-5">
                            <div class="form-group">
                                <label>Enter Particular</label>
                                <input id="particularName" name="particular" class="form-control form-control-sm" required />
                            </div>
                        </div>
                        <div class="col-md-5">
                            <label>Amount</label>
                            <input id="particularAmount" name="amount" class="form-control form-control-sm" required />
                        </div>
                        <div class="col-md-2">
                            <button class="btn btn-sm btn-outline-success mt-4" id="btnParticularSubmit" type="button" onclick="addParticular()">Add</button>
                        </div>
                    </div>

                </form>
            </div>
        </div>
    </div>
</div>

Скрипты:

<link rel="stylesheet" href="~/DataTables/datatables.min.css" />
<script type="text/javascript" src="~/DataTables/datatables.min.js"></script>

<script type="text/javascript">
    $(document).ready(function () {
        $('#particlarsTable').DataTable();
    });

    function showParticularForm() {
        $('#particularWindow').modal('show');
    }

    function addParticular() {
        var particular = $('#particularName').val();
        var amount = $('#particularAmount').val();
        $.ajax({
            url: '/FlatInvoice/AddParticular',
            data: 'particular=' + particular + '&amount=' + amount,
            success: function (response) {
                $('#particlarsTable').DataTable().ajax.reload()
            }
        });
    }
</script>

Метод действия на контроллере:

public JsonResult AddParticular(string particular, decimal amount)
        {
            _flatInvoiceViewModel.AdHocInvoice.FlatInvoiceItems.Add(new FlatInvoiceItem { Particular = particular, Amount = amount });
            return Json(_flatInvoiceViewModel);
        }

Класс / Модель:

public class FlatInvoiceItem
    {
        public Guid FlatInvoiceItemRid { get; set; }
        public Guid FlatInvoiceRid { get; set; }
        public Guid FundRuleRid { get; set; }
        public string Particular { get; set; }
        public decimal Amount { get; set; }
    }

ПРИМЕЧАНИЕ: этот код находится в начальной фазе, мне нужны эти входные данные на сервере для дальнейшего процесса (добавлю код позже), поэтому не хочу использовать * 103 6 * тип кода.

Answer 1

1. Во-первых, reload() используется для отправки запроса обратно в метод, который первоначально отображает таблицу данных (например, имя этого метода Test).

2. Во-вторых, из вашего метода AddParticular вы просто добавляете данные в список, но время жизни составляет всего один запрос, поэтому при перезагрузке метода Test список все еще содержит исходные данные без новые данные .

Вывод: Я предлагаю вам сохранить данные в базе данных. И получить данные из базы данных.

Вот рабочая демонстрация о том, как используйте DataTabale:

1.Модель:

public class Test
{
    public int Id { get; set; }
    public AdHocInvoice AdHocInvoice { get; set; }
}
public class AdHocInvoice
{
    public int Id { get; set; }
    public string Name { get; set; }
    public List<FlatInvoiceItem> FlatInvoiceItems { get; set; }
}
public class FlatInvoiceItem
{
    public int Id { get; set; }
    public Guid FlatInvoiceItemRid { get; set; }
    public Guid FlatInvoiceRid { get; set; }
    public Guid FundRuleRid { get; set; }
    public string Particular { get; set; }
    public decimal Amount { get; set; }
}
public class ViewModel
{
    public string Particular { get; set; }
    public decimal Amount { get; set; }
}

2.Просмотр:

<form class="form-horizontal" method="post" id="createAdHocForm">
    <table class="table table-sm table-responsive-md nowrap w-100" id="particlarsTable">
        <thead class="thead-light">
            <tr>
                <th>Particulars</th>
                <th>Amount</th>
                <th></th>
            </tr>
        </thead>
        @*<tbody class="bg-white">
            @foreach (var item in Model.AdHocInvoice.FlatInvoiceItems)
            {
                <tr>
                    <td id="particular">@item.Particular</td>
                    <td id="amount">@item.Amount</td>
                    <td></td>
                </tr>
            }
        </tbody>*@   //DataTable no need to add this tbody
    </table>
    <button class="btn btn-sm btn-outline-info" type="button" onclick="showParticularForm()">Add New Particular</button>
    <hr />
    <div class="row text-center">
        <button class="btn btn-sm btn-outline-success mx-auto" type="submit">Submit</button>
    </div>
</form>
    <link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/1.10.20/css/jquery.dataTables.css">
<script type="text/javascript" charset="utf8" src="https://cdn.datatables.net/1.10.20/js/jquery.dataTables.js"></script>
<script>
    $(document).ready(function () {
        //$('#particlarsTable').DataTable();
        $('#particlarsTable').DataTable({
            ajax: {
                type: 'GET',
                dataType: 'JSON',
                url: '@Url.Action("Test", "Home")',
            },
            columns: [
                { 'data': 'particular' },
                { 'data': 'amount' }
            ]
        })          
    });  
function showParticularForm() {
    $('#particularWindow').modal('show');
}
function addParticular() {
    var particular = $('#particularName').val();
    var amount = $('#particularAmount').val();
    $.ajax({
        url: '/Home/AddParticular',  
        data: 'particular=' + particular + '&amount=' + amount           
    }).done(function (data) {
        $('#particularWindow').modal('hide');
        $('#particlarsTable').DataTable().ajax.reload();                  
    });
}
</script>

3.Контроллер:

public class HomeController : Controller
{
    private readonly MyDbContext _context;

    public HomeController(MyDbContext context)
    {
        _context = context;
    }
    public IActionResult Index()
    {         
        return View();
    }
    public JsonResult Test()
    {
        var _flatInvoiceViewModel = _context.Test.Include(i=>i.AdHocInvoice)
            .ThenInclude(a=>a.FlatInvoiceItems).Where(i => i.Id == 1).FirstOrDefault();
        var list = new List<ViewModel>();
        foreach (var item in  _flatInvoiceViewModel.AdHocInvoice.FlatInvoiceItems)
        {
            var model = new ViewModel() { Amount = item.Amount, Particular = item.Particular };
            list.Add(model);
        } 
        return Json(new { data = list });
    }
    public void AddParticular(string particular, decimal amount)
    {
        var _flatInvoiceViewModel = _context.Test.Include(i => i.AdHocInvoice)
.ThenInclude(a => a.FlatInvoiceItems).Where(i => i.Id == 1).FirstOrDefault();
        _flatInvoiceViewModel.AdHocInvoice.FlatInvoiceItems.Add(new FlatInvoiceItem { Particular = particular, Amount = amount });
        _context.SaveChanges();

    }

4. Результат: Ссылка:

• https://datatables.net/examples/data_sources/ajax.html
• { ссылка }