HTTP POST с табулятором и веб-API

Question

Я создал веб-API и в настоящее время возвращаю содержимое представления хранилища данных в область табулятора, предоставляя данные с помощью AJAX и API.

Теперь я понятия не имею, как получить данные, которыми манипулируют в табуляторе, является публикация в нашей таблице dbo.BEDS. Мне неясно, как использовать метод HTTP Post в Tabulator, используя AJAX. Примеров не так много, и я относительно неопытен.

Может кто-нибудь помочь мне перенести мои объекты из таблицы табулятора в таблицу DWH, пожалуйста?

Контроллер:

 using System.Collections.Generic;
 using Microsoft.AspNetCore.Mvc;
 using BED_MGMT_WEBAPP.Models;
 using System.Linq;
 using Microsoft.EntityFrameworkCore;

namespace BED_MGMT_WEBAPP.Controllers
 {
     // route to the api controller
     [Route ("api/[controller]")]
     [ApiController]
     public class bed_data_Controller : ControllerBase
     {
         private readonly RealtimeFreqContext _bed_data;

         public bed_data_Controller(RealtimeFreqContext context) => _bed_data = context;

         // get api/values
         [HttpGet]
         public async System.Threading.Tasks.Task<ActionResult<IEnumerable<TblBaseBedmgmtBedsByWard>>> GetAsync()
         {
             {
             var b = _bed_data.TblBaseBedmgmtBedsByWard.FromSqlRaw<TblBaseBedmgmtBedsByWard>("SELECT * FROM [dbo].[vwBase_BEDS_BY_WARD]");
             return await  b.ToListAsync();
             }
         }

         // POST: api/bed_data
         // To protect from overposting attacks, please enable the specific properties you want to bind to, for
         // more details see https://aka.ms/RazorPagesCRUD.
         [HttpPost]
         public ActionResult<IEnumerable<TblBaseBedmgmtBedsByWard>> PostTblBaseBedmgmtBedsByWard(TblBaseBedmgmtBedsByWard postbeds)
         {
             if (!ModelState.IsValid)
                 return BadRequest("Invalid data.");

             using (var bedData = new RealtimeFreqContext())
             {
                 bedData.TblBaseBedmgmtBedsByWard.Add(new TblBaseBedmgmtBedsByWard()
                 {
                     ID = postbeds.ID,
                     Hospital = postbeds.Hospital,
                     WardCode = postbeds.WardCode,
                     Ward = postbeds.Ward,
                     RealtimeBedStock = postbeds.RealtimeBedStock,
                     ActualBedStock = postbeds.ActualBedStock,
                     AvailableBedsM = postbeds.AvailableBedsM,
                     AvailableBedsF = postbeds.AvailableBedsF,
                     AvailableBedsC = postbeds.AvailableBedsC,
                     TotalBedsClosed = postbeds.TotalBedsClosed,
                     ClosedAndUnoccupied = postbeds.ClosedAndUnoccupied,
                     EscalationBedsInUse = postbeds.EscalationBedsInUse,
                     DischargesConfirmedM = postbeds.DischargesConfirmedM,
                     DischargesConfirmedF = postbeds.DischargesConfirmedF,
                     DischargesConfirmedC = postbeds.DischargesConfirmedC,
                     DischargesPotentialM = postbeds.DischargesPotentialM,
                     DischargesPotentialF = postbeds.DischargesPotentialF,
                     DischargesPotentialC = postbeds.DischargesPotentialC,
                     AwaitingAdmissionAeM = postbeds.AwaitingAdmissionAeM,
                     AwaitingAdmissionAeF = postbeds.AwaitingAdmissionAeF,
                     AwaitingAdmissionAeC = postbeds.AwaitingAdmissionAeC,
                     AwaitingAdmissionInternalM = postbeds.AwaitingAdmissionInternalM,
                     AwaitingAdmissionInternalF = postbeds.AwaitingAdmissionInternalF,
                     AwaitingAdmissionInternalC = postbeds.AwaitingAdmissionInternalC,
                     AwaitingAdmissionExternalM = postbeds.AwaitingAdmissionExternalM,
                     AwaitingAdmissionExternalF = postbeds.AwaitingAdmissionExternalF,
                     AwaitingAdmissionExternalC = postbeds.AwaitingAdmissionExternalC,
                     AwaitingRepatriationIn = postbeds.AwaitingRepatriationIn,
                     AwaitingRepatriationOut = postbeds.AwaitingRepatriationOut,
                     OutliersMed = postbeds.OutliersMed,
                     OutliersSurg = postbeds.OutliersSurg,
                     OutliersOrth = postbeds.OutliersOrth,
                     StaffingShortages = postbeds.StaffingShortages,
                     UserCode = postbeds.UserCode,
                     DatetimeRecordInserted = postbeds.DatetimeRecordInserted
                 });

                 bedData.SaveChanges();
             }

             return Ok();

         }
     }
 }

Контекст базы данных:

 using System;
 using Microsoft.EntityFrameworkCore;
 using Microsoft.EntityFrameworkCore.Metadata;
 using BED_MGMT_WEBAPP.Models;

     public partial class BedData_Context : DbContext
     {
         public BedData_Context()
         {
         }

         public BedData_Context(DbContextOptions<RealtimeFreqContext> options)
             : base(options)
         {
         }

         public virtual DbSet<TblBaseBedmgmtBedsByWard> BedData { get; set; }

     }

Подключение к базе данных:

 using System;
 using Microsoft.EntityFrameworkCore;
 using Microsoft.EntityFrameworkCore.Metadata;

 namespace BED_MGMT_WEBAPP.Models
 {
    public partial class RealtimeFreqContext : DbContext
     {
         public RealtimeFreqContext()
         {
         }

         public RealtimeFreqContext(DbContextOptions<RealtimeFreqContext> options)
             : base(options)
         {
         }

         public virtual DbSet<TblBaseBedmgmtBedsByWard> TblBaseBedmgmtBedsByWard { get; set; }

         protected override void OnConfiguring(DbContextOptionsBuilder optionsBuilder)
         {
             if (!optionsBuilder.IsConfigured)
             {
 //#warning To protect potentially sensitive information in your connection string, you should move it out of source code. See http://go.microsoft.com/fwlink/?LinkId=723263 for guidance on storing connection strings.

 optionsBuilder.UseSqlServer("Server=ourserver;Database=ourdb;IntegratedSecurity=true;");
             }
         }

Модель данных:

 using System;
 using System.Collections.Generic;

 namespace BED_MGMT_WEBAPP.Models
 {
     public partial class TblBaseBedmgmtBedsByWard
     {
         public int ID { get; set; }
         public string Hospital { get; set; }
         public string WardCode { get; set; }
         public string Ward { get; set; }
         public int? RealtimeBedStock { get; set; }
         public int? ActualBedStock { get; set; }
         public int? AvailableBedsM { get; set; }
         public int? AvailableBedsF { get; set; }
         public int? AvailableBedsC { get; set; }
         public int? TotalBedsClosed { get; set; }
         public int? ClosedAndUnoccupied { get; set; }
         public int? EscalationBedsInUse { get; set; }
         public int? DischargesConfirmedM { get; set; }
         public int? DischargesConfirmedF { get; set; }
         public int? DischargesConfirmedC { get; set; }
         public int? DischargesPotentialM { get; set; }
         public int? DischargesPotentialF { get; set; }
         public int? DischargesPotentialC { get; set; }
         public int? AwaitingAdmissionAeM { get; set; }
         public int? AwaitingAdmissionAeF { get; set; }
         public int? AwaitingAdmissionAeC { get; set; }
         public int? AwaitingAdmissionInternalM { get; set; }
         public int? AwaitingAdmissionInternalF { get; set; }
         public int? AwaitingAdmissionInternalC { get; set; }
         public int? AwaitingAdmissionExternalM { get; set; }
         public int? AwaitingAdmissionExternalF { get; set; }
         public int? AwaitingAdmissionExternalC { get; set; }
         public int? AwaitingRepatriationIn { get; set; }
         public int? AwaitingRepatriationOut { get; set; }
         public int? OutliersMed { get; set; }
         public int? OutliersSurg { get; set; }
         public int? OutliersOrth { get; set; }
         public string StaffingShortages { get; set; }
         public string UserCode { get; set; }
         public DateTime? DatetimeRecordInserted { get; set; }
     }
 }

My HTML:

  <div id="example-table"></div>

</body>
<script>
       // tabulator start
 var tabledata = new Tabulator("#example-table", {
persistence:true, //enable table persistence
height: (window.innerHeight - 10),
ajaxURL: "api/bed_data_",
method: 'POST',
columns:[

{title:"Ward", 
    field:"ward", 
    frozen:true
},
{title:"Realtime Bed Stock", 
    field:"realtimeBedStock", 
    headerVertical:true, 
    frozen:true, 
    width:50
},
{title:"Actual Bed Stock", 
    field:"actualBedStock", 
    headerVertical:true, 
    width:50, 
    editor:"number"
},
    {//create column group
        title:"Available Beds",
            columns:[
            {title:"Male", 
                field:"availableBedsM", 
                align:"center", 
                headerVertical:true,  
                width:50, editor:"number"},
             {title:"Female", 
                field:"availableBedsF", 
                align:"center", 
                headerVertical:true, 
                width:50, 
                editor:"number"},
            {title:"Cubicle", 
                field:"availableBedsC", 
                align:"center", 
                headerVertical:true, 
                width:50, 
                editor:"number"},
            ],
    },

{title:"Total Beds Closed", 
    field:"totalBedsClosed", 
    align:"center", 
    headerVertical:true, 
    width:50, 
    editor:"number"},
{title:"Closed And Unoccupied", 
    field:"closedAndUnoccupied", 
    align:"center", 
    headerVertical:true, 
    width:50, 
    editor:"number"},
{title:"Escalation Beds In Use", 
    field:"escalationBedsInUse", 
    align:"center", 
    headerVertical:true, 
    width:50, 
    editor:"number"},

    {//create column group
        title:"Discharges Confirmed",
            columns:[
                {title:"Male", 
                    field:"dischargesConfirmedM", 
                    align:"center", 
                    headerVertical:true,  
                    width:50, 
                    editor:"number"},
                {title:"Female", 
                    field:"dischargesConfirmedF", 
                    align:"center", 
                    headerVertical:true, 
                    width:50, 
                    editor:"number"},
                {title:"Cubicle", 
                    field:"dischargesConfirmedC", 
                    align:"center", 
                    headerVertical:true, 
                    width:50, 
                    editor:"number"},
                ],
        },

     {//create column group
        title:"Potential Discharges",
            columns:[
                {title:"Male", 
                    field:"dischargesPotentialM", 
                    align:"center", 
                    headerVertical:true,  
                    width:50, 
                    editor:"number"},
                {title:"Female", 
                    field:"dischargesPotentialF", 
                    align:"center", 
                    headerVertical:true, 
                    width:50, 
                    editor:"number"},
                {title:"Cubicle", 
                field:"dischargesPotentialC", 
                align:"center", 
                headerVertical:true, 
                width:50, 
                editor:"number"},
        ],
    },

    {//create column group
        title:"Awaiting Admission AE",
            columns:[
                {title:"Male", 
                    field:"awaitingAdmissionAeM", 
                    align:"center", 
                    headerVertical:true,  
                    width:50, 
                    editor:"number"},
                {title:"Female", 
                    field:"awaitingAdmissionAeF", 
                    align:"center", 
                    headerVertical:true, 
                    width:50, 
                    editor:"number"},
                {title:"Cubicle", 
                    field:"awaitingAdmissionAeC", 
                    align:"center", 
                    headerVertical:true, 
                    width:50, 
                    editor:"number"},
                ],
        },

    {//create column group
        title:"Awaiting Admission Internal",
            columns:[
                {title:"Male", 
                    field:"awaitingAdmissionInternalM", 
                    align:"center", 
                    headerVertical:true,  
                    width:50, 
                    editor:"number"},
                {title:"Female", 
                    field:"awaitingAdmissionInternalF", 
                    align:"center", 
                    headerVertical:true, 
                    width:50, 
                    editor:"number"},
                {title:"Cubicle", 
                    field:"awaitingAdmissionInternalC", 
                    align:"center", 
                    headerVertical:true, 
                    width:50, 
                    editor:"number"},
                ],
        },

    {//create column group
        title:"Awaiting Admission External",
            columns:[
                {title:"Male", 
                    field:"awaitingAdmissionExternalM", 
                    align:"center", 
                    headerVertical:true,  
                    width:50, 
                    editor:"number"},
                {title:"Female", 
                    field:"awaitingAdmissionExternalF", 
                    align:"center",  
                    headerVertical:true,
                    width:50, 
                    editor:"number"},
                {title:"Cubicle", 
                    field:"awaitingAdmissionExternalC", 
                    align:"center", 
                    headerVertical:true, 
                    width:50, 
                    editor:"number"},
        ],
    },

    {//create column group
        title:"Awaiting Repatriation",
            columns:[
                {title:"IN", 
                    field:"awaitingRepatriationIn", 
                    align:"center", 
                    headerVertical:true,  
                    width:50, 
                    editor:"number"},
                {title:"OUT", 
                    field:"awaitingRepatriationOut", 
                    align:"center", 
                    headerVertical:true, 
                    width:50, 
                    editor:"number"},
                ],
        },

    {//create column group
        title:"Outliers",
            columns:[
                {title:"Medical", 
                    field:"outliersMed", 
                    align:"center", 
                    headerVertical:true,  
                    width:50, 
                    editor:"number"},
                {title:"Surgical", 
                    field:"outliersSurg", 
                    align:"center", 
                    headerVertical:true, 
                    width:50, 
                    editor:"number"},
                {title:"Ortho", 
                    field:"outliersOrth", 
                    align:"center", 
                    headerVertical:true, 
                    width:50, 
                    editor:"number"},
        ],
    },

    {title:"Staffing Shortages", 
        field:"staffingShortages", 
        align:"left", 
        width:250, 
        editor:"input"},

    ],
 });
 </script>
 </html>

Answer 1

Tabulator не предоставляет никакого способа сохранения данных на сервере. Это должно быть реализовано вами.

Вот пример того, как это сделать на cellEdited и с помощью кнопки сохранения. https://jsfiddle.net/evwbogf6/

Я ничего не знаю о asp, поэтому я не могу помочь с маршрутами там. Вот как вы можете получить данные и отправить их на api/bed_data url, используя fetch.

async function updateServerAll(){
    const data = table2.getData();
    const url = 'api/bed_data';
    const fetchOptions = {
    method: 'POST',
    headers: {
        'Content-Type': 'application/json'
    },
    body: JSON.stringify(data)
  };
  const res = await fetch(url, fetchOptions);
  const ret = await res.json();
}

Затем вы вызываете функцию updateServerAll () по нажатию кнопки или по любому триггеру, который хотите обновить. сервер со всеми строками из таблицы.