Skip to main content
se añadieron 2326 caracteres en el cuerpo
Origen Enlace
fredyfx
  • 13.2k
  • 11
  • 33
  • 65
  1. La cadena de conexión va en un archivo de configuración, de tal manera que puedes modificar ese archivo sin necesidad de re-compilar la solución una vez que esté puesta en producción.
  2. La administración de consultas a la base de datos van en una capa separada: Acceso a Datos (DAO), Repositorio.
  3. Revisa el rendimiento de 2 consultas SELECT: una con el * y la otra especificando todas las columnas, ¿Cúal te ofrece mayor rendimiento?
  4. Habilita CORS y especifica que sólo admita al dominio de tu aplicación, caso contrario, cualquier persona o bot podrá acceder a la información desde un navegador.

Con esto, ese console.log(response) en teoría debería darte un response.success con el valor true y un response.message con la lista de elementos.

En el front-end:

<table class="table table-striped" cellspacing="0">
    <colgroup>               
        <col>
        <col>
        <col>
        <col>
    </colgroup>
    <thead class="">
        <tr>
            <th class="" scope="col">PropiedadDeTuClaseInt32</th>
            <th class="" scope="col">PropiedadDeTuClaseString</th>
            <th class="" scope="col">PropiedadDeTuClaseDateTime</th>           
            <th class="" scope="col">Operaciones</th>   
        </tr>
    </thead>
    <tbody id="renderizando">
    </tbody>
</table>

<script>
function DepListQuery() {
    $.ajax({
        type: 'GET',
        url: '@Url.Action("GetData","Home")',
        contentType: "application/json; charset=utf-8",
        dataType: "json",
        success: function (response) {
            $('#result').text(response.message);
            RenderizarTabla(response.message);
        },
        failure: function (response) {
            alert("hubo un error, mira el log");
            console.log(response);
        }
    });
}

function GetJsonDateTime(str) {
    return eval("new " + str.replace(/\//g, "") + ".toLocaleDateString('en-US')");
}

function RenderizarTabla(informacion){
    var table = $("#renderizando");
    $.each(informationToRender, function (rowIndex, r) {
        var row = $("<tr/>");

        var campoA = r["PropiedadDeTuClaseInt32"];
        var campoB = r["PropiedadDeTuClaseString"];
        var campoC = GetJsonDateTime(r["PropiedadDeTuClaseDateTime"]);

        row.append($("<td/>").text(campoA));
        row.append($("<td/>").text(campoB));
        row.append($("<td/>").text(campoC));
        //En caso necesites que haya algun enlace que ejecute una acción:
        row.append($("<td/>")
                            .append(
                            $('<a>', {
                                text: 'Editar',
                                href: 'Aqui va algun enlace'
                            })));
        table.append(row);
    });
}
</script>
  1. La cadena de conexión va en un archivo de configuración, de tal manera que puedes modificar ese archivo sin necesidad de re-compilar la solución una vez que esté puesta en producción.
  2. Revisa el rendimiento de 2 consultas SELECT: una con el * y la otra especificando todas las columnas, ¿Cúal te ofrece mayor rendimiento?
  3. Habilita CORS y especifica que sólo admita al dominio de tu aplicación, caso contrario, cualquier persona o bot podrá acceder a la información desde un navegador.

Con esto, ese console.log(response) en teoría debería darte un response.success con el valor true y un response.message con la lista de elementos.

  1. La cadena de conexión va en un archivo de configuración, de tal manera que puedes modificar ese archivo sin necesidad de re-compilar la solución una vez que esté puesta en producción.
  2. La administración de consultas a la base de datos van en una capa separada: Acceso a Datos (DAO), Repositorio.
  3. Revisa el rendimiento de 2 consultas SELECT: una con el * y la otra especificando todas las columnas, ¿Cúal te ofrece mayor rendimiento?
  4. Habilita CORS y especifica que sólo admita al dominio de tu aplicación, caso contrario, cualquier persona o bot podrá acceder a la información desde un navegador.

Con esto, ese console.log(response) en teoría debería darte un response.success con el valor true y un response.message con la lista de elementos.

En el front-end:

<table class="table table-striped" cellspacing="0">
    <colgroup>               
        <col>
        <col>
        <col>
        <col>
    </colgroup>
    <thead class="">
        <tr>
            <th class="" scope="col">PropiedadDeTuClaseInt32</th>
            <th class="" scope="col">PropiedadDeTuClaseString</th>
            <th class="" scope="col">PropiedadDeTuClaseDateTime</th>           
            <th class="" scope="col">Operaciones</th>   
        </tr>
    </thead>
    <tbody id="renderizando">
    </tbody>
</table>

<script>
function DepListQuery() {
    $.ajax({
        type: 'GET',
        url: '@Url.Action("GetData","Home")',
        contentType: "application/json; charset=utf-8",
        dataType: "json",
        success: function (response) {
            $('#result').text(response.message);
            RenderizarTabla(response.message);
        },
        failure: function (response) {
            alert("hubo un error, mira el log");
            console.log(response);
        }
    });
}

function GetJsonDateTime(str) {
    return eval("new " + str.replace(/\//g, "") + ".toLocaleDateString('en-US')");
}

function RenderizarTabla(informacion){
    var table = $("#renderizando");
    $.each(informationToRender, function (rowIndex, r) {
        var row = $("<tr/>");

        var campoA = r["PropiedadDeTuClaseInt32"];
        var campoB = r["PropiedadDeTuClaseString"];
        var campoC = GetJsonDateTime(r["PropiedadDeTuClaseDateTime"]);

        row.append($("<td/>").text(campoA));
        row.append($("<td/>").text(campoB));
        row.append($("<td/>").text(campoC));
        //En caso necesites que haya algun enlace que ejecute una acción:
        row.append($("<td/>")
                            .append(
                            $('<a>', {
                                text: 'Editar',
                                href: 'Aqui va algun enlace'
                            })));
        table.append(row);
    });
}
</script>
Origen Enlace
fredyfx
  • 13.2k
  • 11
  • 33
  • 65

Considera lo siguiente:

  1. La cadena de conexión va en un archivo de configuración, de tal manera que puedes modificar ese archivo sin necesidad de re-compilar la solución una vez que esté puesta en producción.
  2. Revisa el rendimiento de 2 consultas SELECT: una con el * y la otra especificando todas las columnas, ¿Cúal te ofrece mayor rendimiento?
  3. Habilita CORS y especifica que sólo admita al dominio de tu aplicación, caso contrario, cualquier persona o bot podrá acceder a la información desde un navegador.

Ahora bien, como diría el meme de Squirtle: vamo al código:

[HttpGet]
public JsonResult GetData()
{
    string stdb = "Data Source=DMX87025;Initial Catalog=DB_PCC;Integrated Security=True";
    SqlConnection conn = new SqlConnection(stdb);
    string sql = "SELECT * FROM[DB_PCC].[dbo].[Departments]";
    SqlCommand cmd = new SqlCommand(sql, conn);
    conn.Open();

    List<ClaseConAtributosDeTuConsulta> listaParaJson = new List<ClaseConAtributosDeTuConsulta>();

    SqlDataReader rd = cmd.ExecuteReader();
    while (rd.Read())
    {
        listaParaJson.Add(new ClaseConAtributosDeTuConsulta(){
            PropiedadDeTuClaseInt32 = rd.GetInt32(rd.GetOrdinal("NombreDeLaColumnaInt32")),
            PropiedadDeTuClaseString = rd.GEtStrin(rd.GetOrdinal("NombreDeLaColumnaString")),
            PropiedadDeTuClaseDateTime = rd.GetDateTime(rd.GetOrdinal("NombreDeLaColumnaDateTime"))
            //En caso necesites manejar campos que sean nulos: rd.IsDBNull()
        });    
    }
    return Json(new { success = true, message = listaParaJson },JsonRequestBehavior.AllowGet);
}

Con esto, ese console.log(response) en teoría debería darte un response.success con el valor true y un response.message con la lista de elementos.