Asp .net con Bootstrap 3.0.0 paso a paso

En esta publicación estoy considerando la creación de un formulario web vacío, aplicando el Framework Twiter Bootstrap 3.0.0 en ASP.NET paso a paso considerando los links de descarga de los archivos necesarios para el funcionamiento de nuestra nueva aplicación,

Los pasos están descritos de forma simple para que usted construya su aplicación.

Manos a la obra :

Herramientas y Framework utilizados:

• Visual Studio Express 2012 para Web.
• Dot Net Framework 4.5.
• jQuery 2.0.3
• Twitter Bootstrap 3.0.0 RC1 straight from GitHub.
• Twitter Bootstrap Starter Template desde http://getbootstrap.com/getting-started/#examples.

Pasos para usar 3.0.0 Bootstrap con ASP.NET Web Forms:

1. Inicie Visual Studio (Estoy usando Visual Studio Express 2012 para Web). 
2. Crear una nueva aplicación Web ASP.NET vacía.

      3.En el nuevo proyecto, cree una carpeta Scripts para almacenar la escritura de Java y archivos de jQuery. 

     4. Cree otro contenido con una  carpeta para almacenar los archivos CSS y los archivos de imagen. Luego de crear las nuevas carpetas de la solución deberia aparecer de esta forma la estructura de archivos.

     5. Bootstrap necesita jQuery asi que debemos descargar la última versión de jQuery desde la siguiente página http: //jquery.com/download/. Debemos descargar el archivo comprimido y la producción de jQuery 2.0.3. o superior.

     6. Guarde el archivo Jquery descargado en la carpeta Scripts en el proyecto. Luego de incluir el archivo jquery-2.0.3.min.js al proyecto desde el explorador de soluciones.

   7. Descargue la versión más reciente. 

   8. Extraiga el archivo zip descargado (bs-v3.0.0-rc1-dist.zip). He descargado la versión 3.0.0 RC1. Habrá 2 carpetas, una con archivos js y otro con archivos CSS.

9.Coloque los 2 archivos de arranque js en la carpeta Scripts e incluirlos en el proyecto desde el explorador de soluciones.

10.Copia la carpeta Css desde el archivo zip de arranque y colocarlo dentro de la carpeta de contenido del proyecto. Entonces incluir la carpeta css y su contenido al proyecto. 

11.Después de incluir los archivos, el explorador de soluciones se parece a esto.

12. Debemos descargar la plantilla de arranque de arranque de examples.getbootstrap.com.

13. Crear una página principal para el proyecto y cambiar el nombre si es necesario. Para crear una página maestra, haga clic en el proyecto en el explorador de soluciones, seleccione Agregar, seleccione Nuevo elemento ... y crear nueva página maestra.

14. Edite la nueva página maestra y vincular el Css de arranque en el interior del bloque de título.

   15 Retire la etiqueta <form> configurar desde la página principal. 
   16.Aplicar las referencias de nuestro archivo Boorstrap.css

   17.Agregar las clases a los divs que están encerrados en rojo.
   18.Agregar las referencias de script al final 
Bueno como en esta imagen:

20 Crear una página por defecto, para la creación de la página Default.aspx, haciendo clic derecho en el proyecto, seleccione Agregar, seleccione Nuevo elemento ... y seleccione Formulario Web con Master Page. En la pantalla de selección de páginas principales, seleccione la nueva página maestra que ha creado anteriormente. 

21. Editar la página Default.aspx y escribir algo dentro de la sección de contenido ContentPlaceHolder1.

     22.Ahora la solución está lista para ser construir. 

     23.Genere la solución de formularios Web Forms ASP.NET, ya sea pulsando la tecla F5 o haciendo clic en el build flecha verde en la barra de herramientas de Visual Studio. En la construcción satisfactoria, la página web se pondrá en marcha en el navegador similar al que se muestra a continuación.

 24.Este diseño de interfaz de usuario de arranque es sensible en la naturaleza. Esto es, al abrir esta interfaz de usuario en pantallas pequeñas, como los teléfonos inteligentes o tabletas, el menú y el contenido reordenarse para ajustarse a la pantalla. Esto se puede comprobar por la modificación del tamaño de la pantalla del navegador en el PC.

Espero que les guste 

Cambiar idioma del calendario  - AJAX Calendar Extender

Lo que vamos a hacer aquí es forzar a que el idioma del calendario para que sea en español y también vamos a agregar un formato personalizado.

Para cambiar el idioma del calendario vamos a las propiedades del ScriptManager y ponemos a true las siguientes valores:

EnableScriptGlobalization

EnableScriptLocalization

También podemos configurar la pagina para que tome automáticamente el idioma y cultura del visitante o forzarlo a que sea español y el pais deseado en nuestro caso Guatemala esto en las propiedades del documento.

Culture = es-GT Spanish (Guatemala)

UiCulture = es Spanish

También podemos configurar nuestro Web.config con la siguiente linea para setear todo a español Guatemala.

Ahora vamos a la parte dos donde personalizaremos la forma de desplegar la fecha, la pagina oficial con la ayuda es:

http://msdn.microsoft.com/en-us/library/bb79761a-ca08-44ee-b142-b06b3e2fc22b.aspx

Lo que vamos a hacer es que la fecha la muestre como "5 de Enero de 2009" para eso vamos a cambiar el valor de Format a:

d 'de' MMMM 'de' yyyy

El resultado final es:

Solucion de algunos errores en Csharp

1. Cuando quiero agregar algunos controles me muestra el siguiente error

 Sys.Extended.UI' ASP.NET es nulo o no un error objeto utilizando AjaxControlToolkit

Solución: Solo debes cambiar el ScriptManager por el ToolkitScriptManager  

<Asp: ToolkitScriptManager ID = "ToolkitScriptManager1" runat = CombineScripts "servidor" = "false"> </ asp: ToolkitScriptManager>

2. Cuando Ejecuto la pagina Web me encontré con el siguiente error cuando intente validar los campos:

WebForms UnobtrusiveValidationMode requires a ScriptResourceMapping for 'jquery'. Please add a ScriptResourceMapping named jquery(case-sensitive).

La solución: Agregar el siguiente código en el archivo Web.config

<appSettings>
    <add key="ValidationSettings:UnobtrusiveValidationMode" value="None" />
  </appSettings>

4. Aveces levantamos nuestra pagina en otro servidor por ejemplo en el de producción y al entrar a la pagina nos envía el siguiente mensaje que corresponde al archivo web.config.

Debes agregar este codigo al archivo web.config para que te entregue con mas detalle el error, 

En mi caso me mostró lo siguiente:

Error en Ajax Control Toolkit in ASP.NET Ajax Library con System.Web.Extensions

Comúnmente nos faltara alguna referencia, en mi caso me faltaba la referencia en mi proyecto al Ajaxcontroltoolkit. lo descargue y luego agregue a mi proyecto.

Desde aquí puedes descargarlo http://ajaxcontroltoolkit.codeplex.com/releases/view/116091

la version Ajax Control Toolkit .NET 4

Asociar un textbox a un Calendario en CSHARP

Ajax Control Toolkit Calendar

El control Calendar te permite mostrar un selector de fechas cuando el foco se mueve a un elemento de entrada. Calendar es un extensor ASP.NET AJAX que se puede conectar a cualquier control ASP.NETTextBox. Proporciona cliente fecha-picking funcionalidad con formato de fecha y personalizable interfaz de usuario en un control emergente. Puede interactuar con el calendario haciendo clic en un día para establecer la fecha, o el programa “Today” para ajustar la fecha actual. Además, las flechas izquierda y derecha se puede utilizar para avanzar o retroceder un mes. Al hacer clic en el título del calendario que puede cambiar la vista de días en el mes en curso, a meses en el año en curso. Otro clic cambiará a años en la década actual. Esta acción le permite saltar fácilmente a las fechas en el pasado o en el futuro dentro del control de calendario.

Visualización de un calendario emergente simple

En este tutorial, aprenderá a mostrar un calendario emergente cuando alguien mueve el foco a un TextBox. Usted puede utilizar el calendario para seleccionar una fecha en particular. Vamos a crear el calendario emergente siguiendo estos pasos (1) Agregar un ToolkitScriptManager (2) Agregar un control TextBox (3) Añadir un CalendarExtender Para saber cómo instalar el Ajax Control Toolkit , ver el Ajax Control Toolkit página.

Añadir un ToolkitScriptManager

Antes de que pueda utilizar cualquiera de los controles de Ajax Control Toolkit en una página, primero debe agregar un ToolkitScriptManager a la página. Puede arrastrar el ToolkitScriptManager desde la ventana de Visual Studio Herramientas en la página. El ToolkitScriptManager se encuentra en el Ajax Control Toolkit ficha en el cuadro de herramientas.

1. < asp: ToolkitScriptManager  ID = "ToolkitScriptManager1"  runat = "server" >
2. </ asp: ToolkitScriptManager >

Agregar un control TextBox

El CalendarExtender trabaja con un control estándar de ASP.NET TextBox. En la vista Diseño, arrastre un control TextBox de debajo de la ficha Estándar del Cuadro de herramientas a la página. A continuación, cambie el ID del control TextBox a txtStartDate . Puede cambiar el ID en la ventana Propiedades. El código fuente resultante tiene este aspecto:

1. < asp: ToolkitScriptManager  ID = "ToolkitScriptManager1"  runat = "server" >
2. </ asp: ToolkitScriptManager >
4. < asp: TextBox  ID = "txtStartDate"  runat = "server" > </ asp: TextBox >

Añadir un CalendarExtender

El siguiente paso es aplicar un control de CalendarExtender a TextBox. Agregue el control CalendarExtender siguiente a la página:

1. < asp: ToolkitScriptManager  ID = "ToolkitScriptManager1"  runat = "server" >
2. </ asp: ToolkitScriptManager >
4. < asp: TextBox  ID = "txtStartDate"  runat = "server" > </ asp: TextBox >
6. < asp: CalendarExtender
7.     ID = "CalendarExtender1"
8.     TargetControlID = "txtStartDate"
9.     runat = "server"  />

Resultado

Control Textbox con calendario en c# .net