sábado, 24 de noviembre de 2012
Datepicker con MVC 4 (Razor)
El ejemplo final será:
El ejemplo aplicara a todos los tipos de datos de fecha: Ejemplo
Pero en este ejemplo no utilizaremos ya que lo realizaremos con Entity Framework.
1.) Crear el proyecto, File - New Proyect - ASP.NET MVC Web Applicaction
+00.48.44.png)
2.)Le mostrara la pantalla de que tipo de aplicación (Internet o intranet), que tipo de motor quiere utilizar ASPX o Razor. Seleccione Internet Application y Use HTML 5 semantic Markup.
+00.49.19.png)
3.) En el Solucion explorer, presione clic derecho sobre la carpeta Models, nuevo elemento y luego en la ventana seleccione Ado Entity Data Model, con el nombre: NorthwindModel.edmx
Seleccione las tablas: Orders, Customers, Employees
+00.53.12.png)
+00.53.29.png)
+00.53.41.png)
+00.56.27.png)
Antes de continuar compile el proyecto.
4.) Presione Clic derecho sobre la carpeta de Controllers, luego add y por ultimo Controller....
+00.58.16.png)
+00.57.26.png)
+00.59.17.png)
5.2) Cree el archivo display en la carpeta DisplayTemplates con el nombre DateTime
+00.59.54.png)
*En MVC usamos: type = "datestring" Pero aquí le pondremos "string" para evitar que se confunda con html5 y no salgan los 2 calendarios.
6.) Agregue el archivo DatePickerReady.js en la carpeta Script
$(function () {
$(".datefield").datepicker();
});
Ver
El ejemplo aplicara a todos los tipos de datos de fecha: Ejemplo
[DataType(DataType.Date)] public DateTime ReleaseDate { get; set; }
Pero en este ejemplo no utilizaremos ya que lo realizaremos con Entity Framework.
1.) Crear el proyecto, File - New Proyect - ASP.NET MVC Web Applicaction
+00.48.44.png)
2.)Le mostrara la pantalla de que tipo de aplicación (Internet o intranet), que tipo de motor quiere utilizar ASPX o Razor. Seleccione Internet Application y Use HTML 5 semantic Markup.
+00.49.19.png)
3.) En el Solucion explorer, presione clic derecho sobre la carpeta Models, nuevo elemento y luego en la ventana seleccione Ado Entity Data Model, con el nombre: NorthwindModel.edmx
Seleccione las tablas: Orders, Customers, Employees
+00.53.12.png)
+00.53.29.png)
+00.53.41.png)
+00.56.27.png)
Antes de continuar compile el proyecto.
4.) Presione Clic derecho sobre la carpeta de Controllers, luego add y por ultimo Controller....
+00.58.16.png)
+00.57.26.png)
Nombre: PedidosController
Template: Adding a controller with read/write actions and views, using Entity Framework
Model Data Class: Orders (Nombre proyecto.Models)
Data Context class: NortwindEntities (Nombre proyecto.Models)
Views: Razor (cshtml)
5.) Agregando templates:
5.1) Cree las siguientes carpetas, View , shared
DisplayTemplates
EditorTemplates
+00.59.17.png)
5.2) Cree el archivo display en la carpeta DisplayTemplates con el nombre DateTime
+00.59.54.png)
Agregue el siguiente código:
@model Nullable<DateTime> @(Model != null ? string.Format("{0:d}", Model) : string.Empty)
5.3) Cree el archivo Editor en la carpeta EditorTemplates con el nombre DateTime (ver paso 5.2)
Agregue 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" })
}
*En MVC usamos: type = "datestring" Pero aquí le pondremos "string" para evitar que se confunda con html5 y no salgan los 2 calendarios.
6.) Agregue el archivo DatePickerReady.js en la carpeta Script
$(function () {
$(".datefield").datepicker();
});
8.) Agreguelas referencias a los jquery, en el archivo layout.cshtml localizada en view, share.
Comente las siguientes lineas que están al final del layout.cshtml
Si quieren que el picker este en español tienen que descargar de http://jqueryui.com/ las librerías de jquery y luego agregar el layourt.cshtml
Luego cambiar la función DatePickerReady.js por:
$(function () {
$(".datefield").datepicker($.datepicker.regional[ "es" ] );
});
Para cambiar los colores de su control ingrese a:
http://jqueryui.com/
@Styles.Render("~/Content/css") @Styles.Render("~/Content/themes/base/jquery.ui.core.css") @Styles.Render("~/Content/themes/base/jquery.ui.datepicker.css") @Styles.Render("~/Content/themes/base/jquery.ui.theme.css") @Scripts.Render("~/bundles/modernizr") @Scripts.Render("~/bundles/jquery") @Scripts.Render("~/bundles/jqueryui") @Scripts.Render("~/Scripts/DatePickerReady.js") @RenderSection("scripts", required: false)
Comente las siguientes lineas que están al final del layout.cshtml
@*@Scripts.Render("~/bundles/jquery") @RenderSection("scripts", required: false)*@
Si quieren que el picker este en español tienen que descargar de http://jqueryui.com/ las librerías de jquery y luego agregar el layourt.cshtml
@Scripts.Render("~/Scripts/jquery.ui.datepicker-es.js")
Luego cambiar la función DatePickerReady.js por:
$(function () {
$(".datefield").datepicker($.datepicker.regional[ "es" ] );
});
Para cambiar los colores de su control ingrese a:
http://jqueryui.com/
viernes, 2 de noviembre de 2012
Seguridad con MVC 4 (Membership)
Guia Rapida de Membership en MVC4.
En MVC 4 es muy fácil utilizar esta herramienta, siga los siguientes pasos para ver un ejemplo practico.
1.) Cree un nuevo proyecto,
File --> New proyect
Archivo - Nuevo Proyecto
+22.50.25.png)
2.)Luego seleccione la plantilla "internet aplication" o "Aplicación de Internet"
+22.51.09.png)
3.) Abra su archivo web config y configure correctamente la información de su connection String para "DefaultConnection"
+23.08.57.png)
El web config debe quedar de la siguiente manera, recuerde que debe configurar acorde a su equipo.
Vamos a ver una imagen de la base de datos antes de crear nuestro primer usuario.
+23.02.32.png)
4.) Ahora vamos a crear nuestro primer usuario, para esto debemos ejecutar nuestro proyecto.
+23.02.03.png)
+23.20.04.png)
Creer 2 usuarios, administrador y user1, esto nos será de utilidad para los próximos pasos.
Si todo esta correcto debería haber creado las tablas:
UserProfile -- Listado de usuarios
webpages_Membership -- Contraseñas y reglas de seguridad
webpages_OAuthMembership - Almacena información acerca de los inicios de sesión de terceros, almacenará el nombre del proveedor (digamos Facebook) la identificación del proveedor y la identificación de usuario. El ID de usuario es normalmente un símbolo para identificar a cada usuario.
webpages_Roles - Roles
webpages_UsersInRoles -- Usuarios por roles.
+23.03.20.png)
5.) Agregando Roles, Para agregar roles en muy facil solo hacemos un insert en la tabla webpages_Roles.
INSERT INTO [dbo].[webpages_Roles]
([RoleName])
VALUES
('administradores')
6.) Ahora vamos agregar usuario "administrador" a nuestro rol "Administradores", Pero primero debemos saber que id tiene nuestro usuario, para esto ejecutamos:
+23.39.58.png)
Ahora ejecutamos:
INSERT INTO [dbo].[webpages_UsersInRoles]
([UserId]
,[RoleId])
VALUES
(1
,1)
5.) En MVC la seguridad se agrega en los controles, por cada acción, vamos hacer un ejemplo, en la carpeta controller habrá HomeController y pruebe con las siguientes posibilidades.
Authorize: Permitira todos los usuarios ya autenticados.
Authorize Roles: Solo los roles autorizados en este ejemplo: Administradores
Authorize Users: Solo los usuarios autorizados en este ejemplo: User1
Ver
En MVC 4 es muy fácil utilizar esta herramienta, siga los siguientes pasos para ver un ejemplo practico.
1.) Cree un nuevo proyecto,
File --> New proyect
Archivo - Nuevo Proyecto
+22.50.25.png)
2.)Luego seleccione la plantilla "internet aplication" o "Aplicación de Internet"
+22.51.09.png)
3.) Abra su archivo web config y configure correctamente la información de su connection String para "DefaultConnection"
+23.08.57.png)
El web config debe quedar de la siguiente manera, recuerde que debe configurar acorde a su equipo.
<connectionStrings> <add name="DefaultConnection" connectionString="Data Source=localhost; Initial Catalog=northwind;user id=sa;password=P@ssw0rd" providerName="System.Data.SqlClient" /> </connectionStrings>
Vamos a ver una imagen de la base de datos antes de crear nuestro primer usuario.
+23.02.32.png)
4.) Ahora vamos a crear nuestro primer usuario, para esto debemos ejecutar nuestro proyecto.
+23.02.03.png)
+23.20.04.png)
Si todo esta correcto debería haber creado las tablas:
UserProfile -- Listado de usuarios
webpages_Membership -- Contraseñas y reglas de seguridad
webpages_OAuthMembership - Almacena información acerca de los inicios de sesión de terceros, almacenará el nombre del proveedor (digamos Facebook) la identificación del proveedor y la identificación de usuario. El ID de usuario es normalmente un símbolo para identificar a cada usuario.
webpages_Roles - Roles
webpages_UsersInRoles -- Usuarios por roles.
+23.03.20.png)
5.) Agregando Roles, Para agregar roles en muy facil solo hacemos un insert en la tabla webpages_Roles.
INSERT INTO [dbo].[webpages_Roles]
([RoleName])
VALUES
('administradores')
6.) Ahora vamos agregar usuario "administrador" a nuestro rol "Administradores", Pero primero debemos saber que id tiene nuestro usuario, para esto ejecutamos:
Ahora ejecutamos:
INSERT INTO [dbo].[webpages_UsersInRoles]
([UserId]
,[RoleId])
VALUES
(1
,1)
5.) En MVC la seguridad se agrega en los controles, por cada acción, vamos hacer un ejemplo, en la carpeta controller habrá HomeController y pruebe con las siguientes posibilidades.
[Authorize]
public ActionResult About()
{
return View();
}
[Authorize(Roles = "administradores")]
public ActionResult About()
{
return View();
}
[Authorize(Users="user1")]
public ActionResult About()
{
return View();
}
Authorize: Permitira todos los usuarios ya autenticados.
Authorize Roles: Solo los roles autorizados en este ejemplo: Administradores
Authorize Users: Solo los usuarios autorizados en este ejemplo: User1
jueves, 1 de noviembre de 2012
Manejo de errores personalizados MVC 3
Guia rapida para manejo de errores personalizados en MVC 3.
Abra su archivo Error.cshtm que debe estar en View/Shared
Agregaremos este código despliega información mas detallada.
Pruebas.
Abra su controlador home, busque la acción "About' y agregue el siguiente código, el cual forzara un error:
+02.20.15.png)
Ver
Paso 1.) Global Filters
Asegurase que en su archivo Global.asax tiene lo siguiente.public static void RegisterGlobalFilters(GlobalFilterCollection filters) { filters.Add(new HandleErrorAttribute()); }
Paso 2.) Error Views
Abra su archivo Error.cshtm que debe estar en View/Shared
Agregaremos este código despliega información mas detallada.
@model System.Web.Mvc.HandleErrorInfo
@{
ViewBag.Title = "Error";
}
<h2>
Opps: Un error ha ocurrido.
</h2>
<p>Controller = @Model.ControllerName</p>
<p>Action = @Model.ActionName</p>
<p>Message = @Model.Exception.Message</p>
<p>StackTrace :</p>
<pre>@Model.Exception.StackTrace</pre>
Paso 3.) Abra su web config y agregue el siguiente codigo .
<system.web> <customErrors mode="On" defaultRedirect="~/error"> <error statusCode="404" redirect="~/error/notfound"></error> </customErrors>
Pruebas.
Abra su controlador home, busque la acción "About' y agregue el siguiente código, el cual forzara un error:
public ActionResult About() { throw new Exception("This is not good. Something bad happened."); return View(); }
+02.20.15.png)
Suscribirse a:
Entradas (Atom)
