Considera lo siguiente:
- 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.
- La administración de consultas a la base de datos van en una capa separada: Acceso a Datos (DAO), Repositorio.
- Revisa el rendimiento de 2 consultas
SELECT
: una con el * y la otra especificando todas las columnas, ¿Cúal te ofrece mayor rendimiento? - 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>