Assign a C# Class to a List<> C#, via Javascript code

Question

Hello, I want to assign new filler lines by pressing a button without leaving the page. However, I need to assign a new class. I noticed that the C# function I put inside the JS function occurs only once independent of the Button. The function is assigning new lines, but is not instantiating new classes.

<script>
let btn = document.querySelector("#btn");
let linhas = document.querySelector("#novo")

btn.addEventListener("click", function () {

*> **@{

        var _Detalhes = new cl_Detalhes();
        Model.Detalhes.Add(_Detalhes);
        int D = Model.Detalhes.Count - 1;
    }***

    let item = document.createElement("tr")
    item.id = @Model.Detalhes[D].Produto.Codigo
    item.innerHTML += ' <td>@Html.TextBoxFor(Model => Model.Detalhes[D].Produto.CodigoI, new { @class = "form-control " })</td> '
    item.innerHTML += ' <td>@Html.TextBoxFor(Model => Model.Detalhes[D].Produto.Codigo, new { @class = "form-control" })</td> '
    item.innerHTML += ' <td>@Html.TextBoxFor(Model => Model.Detalhes[D].Produto.Nome, new { @class = "form-control" })</td> '
    item.innerHTML += ' <td>@Html.TextBoxFor(Model => Model.Detalhes[D].Produto.rastro[0].Quantidade, new { @class = "form-control" })</td> '
    item.innerHTML += ' <td>@Html.TextBoxFor(Model => Model.Detalhes[D].Produto.Unidade_Medida, new { @class = "form-control" }) </td> '
    item.innerHTML += ' <td>@Html.TextBoxFor(Model => Model.Detalhes[D].Produto.rastro[0].Lote, new { @class = "form-control" }) </td> '
    item.innerHTML += ' <td>@Html.TextBoxFor(Model => Model.Detalhes[D].Produto.rastro[0].Validade.Date, new { @class = "form-control" })</td>'
    linhas.append(item);

        console.log( @Model.Detalhes.Count )
    })
    </script>

Answer 1

Opa Ericsson, all right?

Actually your code is not working because C# is loaded and executed on the server side, and javascript runs on the client side. So when you load your page, C# runs, and an item will always be added to your list.

To execute a C# function without reloading the page, you can use AJAX (Asynchronous Javascript and XML). So you can call a function in your Controller without reloading the page.

But in your case, it seems to me you already want to carry the Model, right? If it’s just to get the form Ubmit these items, you don’t need to do it in "real time", you just need to get it all from your Controller.

If you need the information in real time, make an object with javascript and manipulate it as needed.

In case none of this I have spoken so far solve your problem, please explain to me in more detail that we will come up with some solution.