2

Hola estoy trabajando con ASP.Net / SqlDataReader /C# y razor tengo la sig. complicación ...
estoy tratando de mostrar una tabla mediante AJAX pero no estoy completo seguro de si lo estoy haciendo bien, por lo que entiendo debo hacer una metodo para que mi query se almacene en una lista, no sé si esta lista debe ir en el controlador o en mi modelo.En este momento solo he conseguido la respuesta impresa, pero necesito quitarle el formato JSON y meterlo en una tabla .Agradecería mucho algo de ayuda o ilustración. Esto es lo que tengo.

<script src="~/Scripts/jquery-1.10.2.js"></script>
<div id="result"></div>
<input type="button" name="name" value="try me" onclick="DepListQuery()" />


<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);
            },
            failure: function (response) {
                alert("hubo un error del diablo u.u");
            }
        });
    }



</script>

Estes mi controlador

  //GetData function, simple ajax
        [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();

            SqlDataReader rd = cmd.ExecuteReader();



            return Json(new { success = true, message = rd },
                          JsonRequestBehavior.AllowGet);
        }

6
  • ¿Qué error te aparece? Hasta donde veo, hace falta un espacio luego de FROM
    – fredyfx
    Commented el 3 oct. 2017 a las 21:26
  • No tengo errores pero cuando mando a llamar mi respuesta me aparecen algo como {obj, obj} por cada registro que hay en mi tabla. Necesito convertir lo que estoy respondiendo y ponerlo en la tabla Commented el 3 oct. 2017 a las 21:34
  • dale un console.log(response.message); y dinos qué hay por favor :)
    – fredyfx
    Commented el 3 oct. 2017 a las 21:37
  • [object Object],[object Object],[object Object],[object Object] --- esto me sale D: Commented el 3 oct. 2017 a las 21:43
  • y si colocas console.log(response); ¿En algún caso puedes visualizar lo que hay dentro de dicho objeto?
    – fredyfx
    Commented el 3 oct. 2017 a las 22:00

1 respuesta 1

3

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. 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.

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.

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>
5
  • 1
    Oye tuve un problema siguiendo tu ejemplo y es mi unica duda ¿qué hay de ese "informationToRender" ? visual detiene mi proyecto en esa linea que esta un handled. Me imagino que es una variable o no sé si es un método de jquery?? De antee mano muchas grácias esta bastante detallado. @fredyfx Commented el 12 oct. 2017 a las 16:12
  • exactamente esto "Unhandled exception at line 192, column 13 in localhost:64721/home/kyo2 0x800a1391 - JavaScript runtime error: 'informationToRender' is undefined" Commented el 12 oct. 2017 a las 16:17
  • de nada hermano, estamos para servir. Disfruto mucho enseñar, sentí que tienes unas ganas enormes de avanzar con la programación y bueno, ese error está planeado para que evalúes qué debería estar ahí. Copiar y pegar ayuda siempre y cuando uno tenga instalada la lógica en el C:\erebro y con cariño instalada en el C:\orazón, dicho esto, la solución es: el nombre de esa variable debe ser "informacion". Revisa la documentación de JQuery sobre el método $.each mira los parámetros que recibe :) Un abrazo, que tengas un bonito día, bendiciones :D
    – fredyfx
    Commented el 12 oct. 2017 a las 16:20
  • 1
    te pasas XD pero bueno grácias mil Commented el 12 oct. 2017 a las 16:24
  • toda la vida hermano, toda la vida la misma historia xD!!!! De nada, tú creces y toda la comunidad crece contigo :D Éxitos con el desarrollo de software :D
    – fredyfx
    Commented el 12 oct. 2017 a las 16:30

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.