带有制表符和 Web API 的 HTTP POST

Question

我已经构建了一个 web api，目前正在将数据仓库视图的内容返回到制表符区域，通过 AJAX 和 API 公开数据。

我现在不知道如何让制表器中操作的数据发布到我们的表 dbo.BEDS 我不清楚如何使用 AJAX 在制表器中使用 HTTP Post 方法。例子不多，我也比较缺乏经验。

有人可以帮我把我的对象从我的制表器表中发布到我的 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; }
     }
 }

我的 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一无所知，所以我对那里的路线帮不上什么忙。以下是获取数据并使用 fetch 将其发布到 api/bed_data url 的方法。

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() 函数。