jueves, 15 de enero de 2015

MVC Establecer Región

No hay comentarios.:
Cuando trabajas con proyectos MVC es importante establecer correctamente la región, ya que de lo contrario se tendrá problemas con fechas y valores de moneda, para configurar todo el proyecto debe agregar la siguiente linea en el web config.



<system.web>
    <globalization uiCulture="es" culture="es-MX"  />
</system.web>
Ver

domingo, 4 de enero de 2015

Datepicker con MVC 5 (Razor)

12 comentarios:
Al final del post ya no tendremos dolores de cabeza con las fechas, ya que funcionara para todo el proyecto. 

Demo final del ejemplo.




1.) Crear el proyecto, File - New Proyect - ASP.NET MVC Web Applicaction 


2.) Seleccione el tipo de proyecto.





3.) En el Solucion explorer, presione clic derecho sobre la carpeta Models, luego seleccione Add y por ultimo "Ado Entity Data Model"





En la ventana agregue el nombre: NorthwindModel



En la ventana de Entity Data Model, seleccione EF Designer from Database




Seleccione las tablas: Orders, Customers, Employees


Antes de continuar compile su proyecto.


4.) Vamos a generar los controladores y vistas con scaffolding,  Presione Clic derecho sobre la carpeta de Controllers, luego "add" y por ultimo "Controller ..."





Seleccione el tipo de scaffold que necesita.




Complete la información del controlador como se indica en la imagen.





Si navegamos al controlador Order en la acción Create podrán notar que en el campo fecha es un simple input de texto.




Si observamos la vista, view --- Order --- Create  podemos observar que el campo de fecha fue generado como un campo normal, no debemos de tocar el este código ya que vamos agregar el datepicker con templates.






5.) Vamos agregar templates para el manejo de fechas.

5.1) Cree las siguientes carpetas en view ---- Shared


  • DisplayTemplates
  • EditorTemplates





5.2) Cree la vista "DateTime" dentro de la carpeta "DisplayTemplates" con el nombre DateTime. 

Clic derecho sobre a vista "DisplayTemplates" add y luego "View..."


Por ultimo completamos la vista agregando el nombre "DateTime", asegurese de seleccionar "Create as a partial view"





Abra el archivo "DateTime" de la carpeta "DisplayTemplates" y agregue el siguiente código


@model Nullable<DateTime> 
@(Model != null ? string.Format("{0:d}", Model) : string.Empty) 

Ahora vamos a repetir los pasos para la creación de la vista pero para la carpeta "EditorTemplates"


5.2) Cree la vista "DateTime" dentro de la carpeta "EditorTemplates" con el nombre DateTime. (Igual que el paso anterior)

Clic derecho sobre a vista "EditorTemplates" add y luego "View..." y agregue el nombre de "DateTime" asegurese de seleccionar "Create as a partial view"

 Ahora tendremos una vista parcial en cada carpeta con el nombre de "DateTime"




Ahora agregamos al archivo DateTime.cshtml de la carpeta "EditorTemplates" el siguiente código:


@model Nullable<DateTime> 

@{ 
    DateTime dt = DateTime.Now; 
    if (Model != null) 
    { 
        dt = (System.DateTime)Model; 

    } 
    @Html.TextBox("", String.Format("{0:d}", dt.ToShortDateString()), 
     new { @class = "datefield", type = "string" }) 
} 

Con estos cambios ya podremos ver todos los campos de tipo fecha con formato y cuando estén vacías se agregara le facha del día, esto aplica para todo el proyecto.





6.) Agregando el DatePicker

6.)1 Agregue el archivo DatePickerReady.js en la carpeta Script, para esto nos vamos a la carpeta script y seleccionamos "add" y por ultimo "javaScript File" 



Agregamos el nombre "DatePickerReady"


Abrimos el archivo DatePickerReady.js recientemente creado y agregamos el siguiente código.

$(function () { 
    $(".datefield").datepicker(); 
}); 



7.) Agregando las referencias.

7.1) Baje del sitio jqueryui.com los js y css, en la sección de "Download" queryui.com/download/

Después de descargar jqueryui debes copias los siguientes archivos a las siguientes carpetas.

jquery-ui.css --> Content
images --> Content
jquery-ui.js --> Script





7.2) Ahora abrimos el archivo _Layout.cshtml ubicado en View --> Shared en las secciones de:

Css ---- parte superior
js ---- parte inferior


@Styles.Render("~/Content/css") 
@Styles.Render("~/Content/jquery-ui.css") 
  
          



@Scripts.Render("~/bundles/modernizr") 
@Scripts.Render("~/bundles/jquery") 
@Scripts.Render("~/Scripts/jquery-ui.js") 
@Scripts.Render("~/Scripts/DatePickerReady.js") 
         


Ejemplo de como se muestra el Datepocker


8.) Formato regional para las fechas, abre el archivo DatePickerReady.js y cambiarlo por el siguiente código:


$(function () { 
   
 //Array para dar formato en español 
$.datepicker.regional['es'] =  
{ 
    closeText: 'Cerrar',  
    prevText: 'Previo',  
    nextText: 'Próximo', 
   
    monthNames: ['Enero','Febrero','Marzo','Abril','Mayo','Junio', 
    'Julio','Agosto','Septiembre','Octubre','Noviembre','Diciembre'],
    monthNamesShort: ['Ene','Feb','Mar','Abr','May','Jun', 
    'Jul','Ago','Sep','Oct','Nov','Dic'], 
    monthStatus: 'Ver otro mes', yearStatus: 'Ver otro año',
    dayNames: ['Domingo','Lunes','Martes','Miércoles','Jueves','Viernes','Sábado'], 
    dayNamesShort: ['Dom','Lun','Mar','Mie','Jue','Vie','Sáb'], 
    dayNamesMin: ['Do','Lu','Ma','Mi','Ju','Vi','Sa'], 
    dateFormat: 'dd/mm/yy', firstDay: 0, 
    initStatus: 'Selecciona la fecha', isRTL: false};


$(".datefield").datepicker($.datepicker.regional["es"]); 
});




Demo final del Datepicker




Ver