sábado, 24 de noviembre de 2012

Datepicker con MVC 4 (Razor)

No hay comentarios.:
El ejemplo final será:



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




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.



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












Antes de continuar compile el proyecto.

4.) Presione Clic derecho sobre la carpeta de Controllers, luego add y por ultimo Controller....






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


5.2) Cree el archivo display en la carpeta DisplayTemplates con el nombre DateTime


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.


     @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/



Ver

viernes, 2 de noviembre de 2012

Seguridad con MVC 4 (Membership)

4 comentarios:
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





2.)Luego seleccione la plantilla "internet aplication" o "Aplicación de Internet"





3.) Abra su archivo web config y configure correctamente la información de su connection String para "DefaultConnection"





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.




4.) Ahora vamos a crear nuestro primer usuario, para esto debemos ejecutar nuestro proyecto.




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.




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


Ver

jueves, 1 de noviembre de 2012

Manejo de errores personalizados MVC 3

No hay comentarios.:
Guia rapida para manejo de errores personalizados en MVC 3.


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&gt

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();
        }





Ver