Post Order (back and forth to BackEnd) from angularjs

Question

Post Order (back and forth to BackEnd) from angularjs

Navigation

#1 by (3 votes)

1

I am trying to insert sections in a Database, to the whole insert I use with C # in controllers (My project is a WebApi). What I want is for you to make an insert in each cycle of the for. But the controller goes only once, and that's when the whole angular is finished (I do not know if I explain myself well). This is what I want to do because I want to save all the sections with a single button. (Not for each section that I want to create that there is a button and that from there go to the controller)

My code in angularJs is:

 for (var i = 0; i < $scope.ListaTempProductos.length; i++) {
        var Seccion = new Object();
        var idUlt = $scope.SeccionUltima;
        var idSeccionObtenida = idUlt[0]['idSeccion'];
        DetalleSeccion.idSeccion = idSeccionObtenida;
        DetalleSeccion.idProducto = $scope.ListaTempProductos[i]['idProducto'];
        CrearDetalleSeccion(JSON.stringify(DetalleSeccion));

    }
    for (var i = 0; i < $scope.ListaTempPlatos.length; i++) {
        var Seccion = new Object();
        var idUlt = $scope.SeccionUltima;
        var idSeccionObtenida = idUlt[0]['idSeccion'];
        DetalleSeccion.idSeccion = idSeccionObtenida;
        DetalleSeccion.idPlato = $scope.ListaTempPlatos[i]['idPlato'];
        CrearDetalleSeccion(JSON.stringify(DetalleSeccion));

    }

   function CrearDetalleSeccion(detalle) {
    //Crea detalle tercero
    var idDetalle = $http.post('/api/DetalleSeccion/PostDetalleSeccion', detalle).then(function (response) {
        alert("guardado");

    });


}

My html is:

 <form class="form-inline" id="formSeccionDetalle" style="margin:10px; visibility:hidden; background-color:azure;">

        <div class="form-group" style="margin:10px;">
            <label for="nombre">Seleccione los productos que iran en esta sección:</label>
            <div>
                <select class="form-control" id="listaProductosParaDetalle">
                    <option ng-repeat="dto in productos"> {{dto.nombreProducto}} </option>

                </select>

            </div>
            <div>
                <button type="submit" class="btn btn-toolbar btn-circle" id="AgregarProducto"><i class="fa fa-plus fa-2x" aria-hidden="true"></i></button>

            </div>
        </div>
        <div class="form-group" style="margin:10px;">
            <label for="nombre">Seleccione los platos que iran en esta sección:</label>
            <div>
                <select class="form-control" id="listaPlatosParaDetalle">
                    <option ng-repeat="dto in platos"> {{dto.nombrePlato}} </option>

                </select>

            </div>
            <div>
                <button type="submit" class="btn btn-toolbar btn-circle" id="AgregarPlato"><i class="fa fa-plus fa-2x" aria-hidden="true"></i></button>

            </div>
        </div>

        <div class="form-group" style="margin:10px;">
            <div>
                <ul>
                    <li ng-repeat="x in ListaTempProductos">
                        {{ x.nombreProducto }}
                        <button class="btn btn-danger" id="btnBorrar" ng-click="EliminarProducto($index)">
                            <i class="fa fa-times" aria-hidden="true"></i>
                        </button>
                    </li>
                </ul>
                <ul>
                    <li ng-repeat="x in ListaTempPlatos">
                        {{ x.nombrePlato }}
                        <button class="btn btn-danger" id="btnBorrar" ng-click="EliminarPlato($index)">
                            <i class="fa fa-times" aria-hidden="true"></i>
                        </button>
                    </li>
                </ul>

                <button class="btn btn-danger" id="guardarTodo">
                    <i class="fa fa-2x fa-save" aria-hidden="true"></i>
                </button>
            </div>
        </div>



    </form>

Could someone explain to me in a summarized way how I can alter the order of this?

c# angularjs asp.net-web-api backend

asked by Aylen Menichetti 25.08.2017 в 22:49

source

1 answer

How to get repeated records in mysql? Align vertically inside div

score 3 · Accepted Answer

I would tell you that you'd better make a single call from the front with an array type body with the different sections.

I would prepare the backend to accept an array in the body and from the backend I would do the Bulk to do the different insertions to the database. With that you avoid making so many http requests from the client and you will saturate the server less. In addition, on mobile devices or with a slow connection it is always better to make fewer calls.

It would be something like this:

var idDetalle = $http({
   mehotd: 'POST',
   url: '/api/DetalleSeccion/PostDetalleSeccion',
   data: {
     bulk: [
       { id: '2' type: "producto", data: { detalle: "detalle de la sección", otroCampo: "Lo que sea..." } },
       { id: '4' type: "producto", data: { detalle: "detalle de la sección", otroCampo: "Lo que sea..." } }
       { id: '16' type: "plato", data: { /* los datos que queremos almacenar */ } }
     ]
   }
}, detalle).then(function (response) {
    alert("guardado");

});

Then in the back, it goes through the array bulk of the body and performs the inserts to the BD there.

Also, depending on the type of database that you use when doing the bulk from the backend, you can do atomic form (which means that if one fails, all fail) and you can give the client the message that has not been saved and not have the different rows de-updated (some if they have been saved and others not). That, depends on the cases, is recommended or even necessary (in your case I do not know).

It's just a recommendation from my humble point of view. I know it requires more development but have a good api or a good backend , then it will facilitate many tasks in the front.