Ocultar boton desde codebehind desarrollo de sitio web

Tenemos el siguiente ejemplo que nos permite agregar estilo a un boton desde codebehind.

Una manera sería.

 

[sourcecode language="c#"]


<style>
 .hide {
 visibility: hidden;

 }

 </style>

<asp:Button ID="btnGuardar" runat="server" Text="Button" OnClick="btnGuardar_Click" />
protected void btnGuardar_Click(object sender, EventArgs e)
 {
 

 btnGuardar.CssClass = "hide";

 //proceso


 //remover la clase y dejar la original
 btnGuardar.CssClass = "clase original";
 
 
 }
[/sourcecode]

Espero te sirva

Objeto de JSON llega vacio a mi metodo –

Publicidad y desarrollo de software

El día de hoy vamos a responder una pregunta que encontramos en la red.

La situación es la siguiente:

El programador esta trabajando con Ajax y C#, utiliza un webservice en asmx para hacer trabajar con la capa de datos probablemente. Este es el caso que publicó.

 

Creé la siguiente función para enviar un objeto de un servicio mediante JSON pero cuando el objeto llega tiene todas las variables vacías:

[sourcecode language="csharp"]
var cpDate = new Object();
    cpDate = {
    OllPass: '',
    NewPass: '',
    ConfPass: ''
};

$(document).ready(function () {
    // Guardar Contraseña
    $('#btnAceptarCP').click(function () {
        ChangePass();
    });
});

 function ChangePass() {
    cpDate.OllPass = $('#txtOllPass').val();
    cpDate.NewPass = $('#txtNewPass').val();
    cpDate.ConfPass = $('#txtCPass').val();
}

$.ajax({
    type: "POST",
    url: '../Servicio/Servicio_Prueba.asmx/setContrasena',
    data: JSON.stringify({ solicitud: cpDate }),
    contentType: "application/json",
    async: false,
    dataType: "json",
    success: function (result) {
        alert(result.d);
    },
    error: function (result) {
        //Log the error to the console
    }
});
[/sourcecode]
[sourcecode language="csharp"]
public class Servicio_Prueba : System.Web.Services.WebService
{
    [WebMethod(EnableSession = true)]
    public object setContrasena(EntidadPass solicitud)
    {
        bool guardado = true;
        solicitud.setContrasena(solicitud);
        return guardado;
    }
}

public class EntidadPass
{
    string OllPass { get; set; }
    string NewPass { get; set; }
    string ConfPass { get; set; }

    public void setContrasena(EntidadPass solicitud)
    {

    }
}
[/sourcecode]

Efectivamente, los datos están llegando vacíos, porque la clase EntidadPass sus atributos no son accesibles, al momento de serializar el objeto.

Aquí les dejo la solucióna este código. Se modificó la clase EntidadPass de C# para que al serializar el objeto pudieran ser asignados a los parametros correspondientes.

 

[sourcecode language="csharp"]

public class EntidadPass
 {

 public string OllPass { get; set; }
 public string NewPass { get; set; }
 public string ConfPass { get; set; }

 public void setContrasena(EntidadPass solicitud)
 {

 }

 }
[/sourcecode]

Crear pantalla para captura de Empleados con Aspx – Ajax – C# – SQL Server

El día de hoy vamos a desarrollar un ejemplo de como realizar una captura de un empleado desde un webform Aspx utilizando tecnología Ajax.

1.- Lo primero que tenemos que hacer es crear una pequeña tabla dentro de nuestro manejador de base de datos. En este ejemplo estamos utilizando SQL Server como nuestra base de datos.


 

tabla empleados para base de datos SQL Server

USE [bdblogtuto]
GO

/****** Object: Table [tb_empleados] Script Date: 03/08/2017 12:07:11 ******/
SET ANSI_NULLS ON
GO

SET QUOTED_IDENTIFIER ON
GO

CREATE TABLE [tb_empleados](
[IDEMPLEADO] [bigint] IDENTITY(1,1) NOT NULL,
[NOMBRE] [nvarchar](150) NULL,
[APELLIDOPATERNO] [nvarchar](80) NULL,
[APELLIDOMATERNO] [nvarchar](80) NULL,
[TELEFONO] [nvarchar](15) NULL,
[EMAIL] [nchar](20) NULL,
CONSTRAINT [PK_tb_empleados] PRIMARY KEY CLUSTERED
(
[IDEMPLEADO] ASC
)WITH (PAD_INDEX = OFF, STATISTICS_NORECOMPUTE = OFF, IGNORE_DUP_KEY = OFF, ALLOW_ROW_LOCKS = ON, ALLOW_PAGE_LOCKS = ON) ON [PRIMARY]
) ON [PRIMARY]

GO

2.- Abrimos el Visual Studio 2013 y creamos un nuevo proyecto, en el cual agregamos una solución web y dos soluciones de clases.


Creamos una nueva solución llamada TutorialBlog y elegimos un proyecto vacio

 

Agregamos un nuevo proyecto de clases dentro de nuestra solución de visual studio llamado DllTutorial y una clase de c# llamada DatosEmpleados.cs

[sourcecode language="csharp"]
using System;
using System.Collections.Generic;
using System.Configuration;
using System.Data;
using System.Data.SqlClient;
using System.Linq;
using System.Text;
using System.Threading.Tasks;

namespace DllTutorial
{
 public class DatosEmpleados
 {
 private static string connection = ConfigurationManager.ConnectionStrings["LinqSingh.Properties.Settings.LomartServiciosConnectionString"].ConnectionString;


 public static List<Empleados> RegresaListaEmpleados()
 {
 List<Empleados> lstempleados = new List<Empleados>();

 DataTable dt = ExecuteConsulta("select IDEMPLEADO,NOMBRE,APELLIDOPATERNO,APELLIDOMATERNO from tb_empleados");

 foreach (DataRow row in dt.Rows)
 {
 Empleados nuevo = new Empleados();
 nuevo.idempleado = row[0].ToString();
 nuevo.nombre = row[1].ToString();
 nuevo.apellidopaterno = row[2].ToString();
 nuevo.apellidomaterno = row[3].ToString();

 lstempleados.Add(nuevo);
 }

 return lstempleados;
 }

 public static Int64 GuardaEmpleado(string nombre, string apellidopaterno, string apellidomaterno)
 {
 SqlConnection SQLconn = new SqlConnection(connection);
 using (SqlCommand cmd = new SqlCommand("INSERT INTO bdblogtuto.dbo.tb_empleados(NOMBRE,APELLIDOPATERNO,APELLIDOMATERNO) VALUES ('" + nombre + "','" + apellidopaterno + "','" + apellidomaterno + "'); SELECT SCOPE_IDENTITY();", SQLconn))
 {
 SQLconn.Open();

 Int64 modified = Convert.ToInt64(cmd.ExecuteScalar().ToString());

 if (SQLconn.State == System.Data.ConnectionState.Open)
 SQLconn.Close();

 return modified;
 }
 }

 public static DataTable ExecuteConsulta(string consulta)
 {
 var tabla = new DataTable();
 string connetionString = null;
 SqlConnection cnn;
 cnn = new SqlConnection(connection);

 try
 {
 cnn.Open();
 string query = consulta;
 SqlCommand cmd = new SqlCommand(query, cnn);
 SqlDataAdapter da = new SqlDataAdapter(cmd);
 da.Fill(tabla);
 cnn.Close();
 }
 catch (Exception ex)
 {
 cnn.Close();
 }
 finally
 {
 cnn.Close();
 }
 return tabla;
 }
 }
}
[/sourcecode]

Dentro de la clase agregamos un metodo que regresa la lista de empleados y otro para guardar empleados. Este último recibe como argumento 3 parámetros que son nombre, apellido paterno y apellido materno. También se puede cambiar para que reciba una entidad de tipo Empleado, pero para este ejemplo tomaremos estos tres parámetros.

También tenemos nuestra variable connection la cual lee del web.config el valor del connectionstring igual a “LinqSingh.Properties.Settings.LomartServiciosConnectionString”.

 

Esta clase va a trabajar como nuestra capa de datos y tendrá los algoritmos necesarios para guardar, editar o borrar elementos de nuestra tabla tb_empleados.

Puedes utilizar stored procedures para trabajar con la base de datos.

Necesitamos crear otro proyecto en c#, que servirá como nuestra capa de negocio, en la cual manipularemos los datos en caso de requerirse. Lo llamaremos BllTutorial.cs.

Necesitamos crear una clase en c# llamada NegocioEmpleados.cs, que se encargará de trabajar directamente con la capa de datos. Para poder usar la capa de datos dentro de la de negocio, necesitamos agregar la referencia de la solución creada anteriormente, DllTutorial.

Con esto vamos a poder utilizar los métodos de la dll, DllTutorial, dentro de BllTutorial.

El método RegresaListaEmpleados nos regresa la lista de empleados que existe dentro de nuestra base de datos en SQL Server para la tabla tb_empleados.

El metodo GuardaEmpleado, recibe tres parametros y hace un llamado al metodo GuardaEmpleado dentro de nuestra clase en c# DatosEmpleados.

 

[sourcecode language="csharp"]
using System;
using System.Collections.Generic;
using System.Linq;
using System.Text;
using System.Threading.Tasks;
using DllTutorial;

namespace BllTutorial
{
 public class NegocioEmpleados
 {
 public static List<Empleados> RegresaListaEmpleados()
 {
 return DllTutorial.DatosEmpleados.RegresaListaEmpleados();
 }

 public static Int64 GuardaEmpleado(string nombre, string apellidopaterno,
 string apellidomaterno)
 {
 return DllTutorial.DatosEmpleados.GuardaEmpleado(nombre, apellidopaterno, apellidomaterno);
 }


 }
}
[/sourcecode]

3.- Agregar page Default.aspx dentro de nuestra solución web del proyecto


Ahora toca trabajar con la interfaz html, la cual será una interfaz básica, en donde se mostrarán tres inputs txtNombreEmpleado, txtApellidoPaterno, txtApellidoMaterno y un boton btnGuardar el cual activará la acción de guardado y el llamado a nuestro metodo en el webservices wsTutorial.asmx.

 

Crea un webservices (ASMX) para poder trabajar entre la interfaz de usuario y la capa de negocio.

Dentro del webservices, genera un webmethod  GuardaEmpleado, el cual deberá regresa el id del empleado en caso de que se haya guardado en la base de datos. Este método recibe tres parametros: nombre, apellido paterno y apellido materno y hace un llamado a la BllTutorial.

[sourcecode language="csharp"]
using System;
using System.Collections.Generic;
using System.Linq;
using System.Runtime.CompilerServices;
using System.Web;
using System.Web.Services;

namespace TutorialBlog.ws
{
 /// <summary>
 /// Summary description for wsTutorial
 /// </summary>
 [WebService(Namespace = "http://tempuri.org/")]
 [WebServiceBinding(ConformsTo = WsiProfiles.BasicProfile1_1)]
 [System.ComponentModel.ToolboxItem(false)]
 // To allow this Web Service to be called from script, using ASP.NET AJAX, uncomment the following line. 
 [System.Web.Script.Services.ScriptService]
 public class wsTutorial : System.Web.Services.WebService
 {

 [WebMethod]
 public string HelloWorld()
 {
 return "Hello World";
 }


 [WebMethod]
 public Int64 GuardaEmpleado(string nombre, string apellidopaterno, string apellidomaterno)
 {
 return BllTutorial.NegocioEmpleados.GuardaEmpleado(nombre, apellidopaterno, apellidomaterno);
 }

 }
}
[/sourcecode]

 

4.- Crea javascript para comunicación entre Ajax y el webservice


Ahora, necesitamos crear una carpeta a nivel raiz de nuestra solución web que se llame js, en la cual vas a crear tres archivos:

Empleado.js

[sourcecode language="javascript"]
window.onload = function () { Inicializa(); }


var Inicializa = function() {
 $("#btnGuardar").click(function (event) {
 GuardaEmpleado();
 event.preventDefault();
 });
}
var GuardaEmpleado = function () {
 executeRequest(wsGuardaEmpleado, "{'nombre':'" + $("#txtNombreEmpleado").val() + "','apellidopaterno':'" + $("#txtApellidoPaterno").val() + "','apellidomaterno':'" + $("#txtApellidoMaterno").val() + "'}", cargaInformacionEmpleado, Error);
}

var cargaInformacionEmpleado = function (data) {
 
 if (data.d > 0) {
 alert("Empleado guardado con el Id " + data.d);
 $("#lbidempleado").text(data.d);
 }
}

var Error = function() {
}
[/sourcecode]

2.- request-ws.js
[sourcecode language="javascript"]
function executeRequest(requestUrl, inputData, successEvent, errorEvent) {
 $.ajax({
 cache: false,
 type: "POST",
 url: requestUrl,
 data: inputData,
 contentType: "application/json; charset=utf-8;",
 dataType: "json",
 success: successEvent,
 error: errorEvent
 });
}

function Error(request, status, error) {
 //alert('Ocurrio un problema aaaal ejecutar la solicitud: ' + request.statusText);
 //alertModal('Ocurrio un problema al ejecutar la solicitud: ' + request.statusText);
}

function executeSyncRequest(requestUrl, inputData, successEvent, errorEvent) {
 if ((isSessionActive == true) && (sessionStorage.numUsuario != "undefined" && sessionStorage.numUsuario != "null")) {
 $.ajax({
 async: false,
 cache: false,
 type: "POST",
 url: requestUrl,
 data: inputData,
 contentType: "application/json; charset=utf-8;",
 dataType: "json",
 success: successEvent,
 error: errorEvent
 });
 } else {
 if ((isSessionActive == true) && (sessionStorage.numUsuario == undefined || sessionStorage.numUsuario == "null")) {
 alert('Su sesion ha caducado para volver a entrar necesita logearse de nuevo.');
 isSessionActive = false;
 parent.isClosedWindow();
 }

 }
}

function executeAsyn(requestUrl, inputData, successEvent, errorEvent) {
 
 $.ajax({
 async: false,
 cache: false,
 type: "POST",
 url: requestUrl,
 data: inputData,
 contentType: "application/json; charset=utf-8;",
 dataType: "json",
 success: successEvent,
 error: errorEvent
 });
}


function executeNoAsyn(requestUrl, inputData, successEvent, errorEvent) {
 
 $.ajax({
 async: false,
 cache: false,
 type: "POST",
 url: requestUrl,
 data: inputData,
 contentType: "application/json; charset=utf-8;",
 dataType: "json",
 success: successEvent,
 error: errorEvent
 });
}
[/sourcecode]

3.- ws-name.js

[sourcecode language="javascript"]
var sitetutorial = "/ws/";


var wsTutorial = sitetutorial + "wsTutorial.asmx";

var wsGuardaEmpleado = wsTutorial + "/GuardaEmpleado";

[/sourcecode]
 

 5.- Agregar referencias de los archivos js dentro de nuestra pagina Default.aspx


 

Ahora necesitamos agregar las referencias de los archivos js creados en el punto 4 y agregar el js de la libreria jquery.

[sourcecode language="html"]
<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="default.aspx.cs" Inherits="TutorialBlog._default" %>

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
 <title>Lomart tutorial</title>
 <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
 <script type="text/javascript" src="<%=ResolveUrl("~/js/request-ws.js?Rand=") %>"></script>
 <script type="text/javascript" src="<%=ResolveUrl("~/js/ws-name.js?Rand=") %>"></script>
 <script type="text/javascript" src="<%=ResolveUrl("~/js/Empleado.js?Rand=") %>"></script>
</head>
<body>
 <form id="form1" runat="server">
 <div>
 
 <div>
 <label>ID DEL EMPLEADO</label>
 <label id="lbidempleado"></label>
 </div>
 <div>
 <label>NOMBRE EMPLEADO</label>
 <input type="text" class="form-control m-b-10" placeholder="" id="txtNombreEmpleado" name="NOMBRE. empleado">
 </div>

 <div>
 <label>APELLIDO PATERNO</label>
 <input type="text" class="form-control m-b-10" placeholder="" id="txtApellidoPaterno" name="Apellido paterno">
 </div>
 <div>
 <label>APELLIDO MATERNO</label>
 <input type="text" class="form-control m-b-10" placeholder="" id="txtApellidoMaterno" name="Apellido materno">
 </div>
 
 <div class="m-b-15 text-center profile-summary">
 <button class="btn btn-sm" id="btnGuardar" atrval="0">Guardar empleado</button>
 </div>
 </div>
 </form>
</body>
</html>
[/sourcecode]

 

6.- Agregar al web.config la linea del connection string de nuestra base de datos


<add name=”LinqSingh.Properties.Settings.LomartServiciosConnectionString”
connectionString=”Data Source=local;Initial Catalog=bdblogtuto;Integrated Security=True”
providerName=”System.Data.SqlClient” />

 

Les dejo el código de este pequeño ejemplo de como conectar una base de datos SQL Server con una pagina html mediante un  webservice utilizando Ajax.

 

Gracias.