Tengo una función en jQuery, que utiliza AJAX para obtener un listado de un objeto. Lo que quiero es que dinámicamente, esta función cree la estructura HTML para mostrarlo. Esto ya lo pude lograr con la siguiente función:
function CrearHTMLProducto(i, producto) {
var codigo = producto.Codigo;
var descripcion = producto.Descripcion;
var marca = producto.MarcaDescripcion;
var stkC = producto.StockC;
var stkSuc = producto.StockSucursal;
var stkSucs = producto.StockSucursales;
var precio = "0";
if (producto.PrecioPromocional != 0) {
precio = producto.PrecioPromocional;
}
else if (producto.PrecioOferta != 0) {
precio = producto.PrecioOferta;
}
else if (producto.PrecioLista != 0) {
precio = producto.PrecioLista;
}
var html = "";
html += "<div class='col-sm-3'><div class='thumbnail'><div class='row'><div class='col-sm-12'><div class='col-sm-10 pR0'>";
html += "<label id='codProducto" + i + "' class='mT5 mB5 novaBold fS16'>" + codigo + "</label>";
html += "</div><div class='col-sm-2 text-center pad0'>";
html += "<div id='iconoVentaEnVerde" + i + "' class='icoVentaVerde dNone'>";
html += "<span class='fS16 novaBold cWhite'>P</span></div></div></div></div><div class='row'><div class='col-sm-12'>";
html += "<div class='col-sm-12'><span class='novaLight fS19 cPrecio'>Precio</span>";
html += "<span class='novaBold fS21 cPrecio' id='precioProducto" + i + "'> $" + precio + "</span>";
html += "</div></div></div><hr class='hr-tres' /><div class='row'><div class='col-sm-12'><div class='col-sm-12 pR0 fS12'>";
html += "<div class='col-sm-12 form-group m0 pL0'><label class='novaLight mB0 fS14 cStock'>Stock sucursal: </label>";
html += "<span id='stkSuc" + i + "' class='novaBold fS14 cStock'> " + stkSuc + "</span>";
html += "</div><div class='col-sm-12 form-group m0 pL0'><label class='novaLight mB0 fS14 cStock'>Stock C: </label>";
html += "<span id='stkCol" + i + "' class='novaBold fS14 cStock'> " + stkC + "</span>";
html += "</div><div class='col-sm-12 form-group m0 pL0'><label class='novaLight mB0 fS14 cStock'>Stock Sucursales: </label>";
html += "<span id='stkSucles" + i + "' class='novaBold fS14 cStock'> " + stkSucs + "</span>";
html += "</div></div></div></div><hr class='hr-tres' /><div class='caption text-center' onclick='location.href='#''><div class='position-relative'>";
html += "<img id='imgProducto' class='imgNotFound' src='img/img_nd.png' /></div></div><hr class='hr-tres' /><div class='caption card-footer'>";
html += "<div class='row'><div class='col-sm-12'>";
html += "<h5 id='descProducto" + i + "' class='m0 novaLight fS15 cStock'>" + descripcion + "<span id='marcaProducto" + i + "' class='novaBold'> " + marca + "</span></h5>;";
html += "</div></div></div></div></div>";
return html;
}
El tema es que no me gusta para nada como lo hice, ya que si tengo que mantener el código es muy feo. De que otra forma podría realizar esto? Gracias. PD: estoy usando ASP.Net con Web Forms.