I am using WebApi (ADO.NET and JS with FetchApi) for form and table. As you can see from the picture, there is Id 79 and after it comes Id= 0 (just created a new line). But after I reload the page, the Id will return to normal. It is worth clarifying that everything goes smoothly with Ef Core.

Post method in controller:

    public async Task <
ActionResult <
FormAbsence >
 Create (FormAbsence model)
        if (model!= null)
            var result= await _changeDataRepository.CreateDataAsync (model);
            if (result== 0)
                return this.StatusCode ((int) HttpStatusCode.InternalServerError);
            return Ok (model);
        return BadRequest ();

CreateDataAsync () method:

public async Task <
int >
 CreateDataAsync (FormAbsence model)
        _context.Connection ();
        int countChangeData= 0;
        if (model== null)
            return countChangeData;
        var sqlExpression=
            "INSERT INTO FormAbsence (reason, start_date, duration, discounted, description)" +
            $ "VALUES ({((int) model.Reason)},
 '{model.StartDate.Date}', {model.Duration},
 '{model.Discounted}', '{model.Description}') ";
        using (SqlConnection connection= new SqlConnection (_context.ConnectString))
            await connection.OpenAsync ();
            SqlCommand command= new SqlCommand (sqlExpression, connection);
            countChangeData= await command.ExecuteNonQueryAsync ();
        return countChangeData;

And the main class with enumeration:

public class FormAbsence
    public int Id {get; set; }
    public Causes Reason {get; set; }
    public DateTime StartDate {get; set; }
    public int Duration {get; set; }
    public bool Discounted {get; set; }
    public string Description {get; set; }
} public enum Causes
    Sick leave,

As for html.

form name= "absenceForm" >
input name= "id" type= "hidden" value= "0" />
div class= "form-group col-md-5" >
label for= "validationDefault01" >
Reason for absence: <
/label >
select class= "form-select" name= "reason" id= "validationDefault01" aria-label= "Default select example" required >
option value= "0" >
Vacation <
/option >
option value= "1" >
Sick leave <
/option >
option value= "2" >
Absenteeism <
/option >
/select >
div class= "valid-feedback" >
            Things are good!
/div >
div class= "invalid-feedback" >
            This field is required
/div >
/div >
div class= "panel-body" >
button type= "submit" id= "submit" class= "btn btn-primary" >
Save <
/button >
a id= "reset" class= "btn btn-primary" >
Reset <
/a >
/div >
/form >

in js i am using fetchApi:

async function CreateFormAbsence (Freason, FstartDate, Fduration, Fdiscounted, Fdescription) {
            const response= await fetch ("/api /Values", {
                method: "POST",
                headers: {"Accept": "application /json", "Content-Type": "application /json"},
                body: JSON.stringify ({
                    reason: parseInt (Freason, 10),
                    startDate: FstartDate,
                    duration: Fduration,
                    discounted: Fdiscounted,
                    description: Fdescription
            if (response.ok) {let result= await response.json (); document.querySelector ("tbody"). append (row (result));
                reset ();
                console.log ("a new form has been created");

and the last function row (adding a new row and filling it with data) and events for the 'save' and reset buttons

function row (form) {
        let tr= document.createElement ('tr');
        tr.setAttribute ("data-rowid", form.id);
        let idTd= document.createElement ("td");
        idTd.append (form.id);
        tr.append (idTd);
        let reasonTd= document.createElement ("td");
        reasonTd.append (form.reason);
        tr.append (reasonTd);
        let startDateId= document.createElement ("td");
        startDateId.append (form.startDate);
        tr.append (startDateId);
        let durationId= document.createElement ("td");
        durationId.append (form.duration)
        tr.append (durationId);
        let discountedId= document.createElement ("td");
        discountedId.append (form.discounted);
        tr.append (discountedId);
        let descriptionId= document.createElement ("td");
        descriptionId.append (form.description);
        tr.append (descriptionId)}
document.forms ["absenceForm"]. addEventListener ("submit", e= >
        e.preventDefault ();
        form= document.forms ["absenceForm"];
        let id= form.elements ["id"]. value;
        let reason= form.elements ["reason"]. value;
        let startDate= form.elements ["startDate"]. value;
        let duration= form.elements ["duration"]. value;
        let discounted= form.elements ["discounted"]. value;
        let description= form.elements ["description"]. value;
        if (id== 0) {
            CreateFormAbsence (reason, startDate, duration, discounted, description)
        } else {
            EditFormAbsecne (id, reason, startDate, duration, discounted, description);

Is it possible to write in more detail what it means "It is worth clarifying that everything goes smoothly with Ef Core"?

S.H.2021-09-23 19:03:11

When I completely replaced ADO.NET with Ef Core, this error was not observed. I could create a line and delete it without reloading the page. Here is the goal I am aiming for, but on ADO.NET

Senia_sweety2021-09-23 19:03:11

And you can add js-code to the page, right? Maybe what you want can be done with a js script?

S.H.2021-09-23 19:03:11

I have no idea what exactly to do. As I understand it, ADO.NET manages to create an object in the database, but it does not transmit information to the front. There, the information appears only after a reboot. And the information in the beginning is reading from the form

Senia_sweety2021-09-23 19:03:11

It seems to me that the point is in the code that frames the post-call. Maybe you can add a link to the whole project? At least this will make it easier to try running it in debug.

S.H.2021-09-23 19:03:11