Engenho &amp; Engenhocas

Animações CSS num piscar de olhos

Para ler

CSS Wand é uma ferramenta CSS em código aberto e disponível no Github, que permite copiar e aplicar efeitos CSS muito rapidamente numa página web, com a possibilidade de os customizar muito facilmente.

Oliver Gomes está a desenvolver este projecto utilizando as tecnologias React, Ant design, Emotion e Firebase confome anunciou aqui.

Exemplo de efeito para um botão:

button {
  color: #d0021b;
  background-color: #ac6870;
  border: 1px solid #d0021b;
  border-radius: 4px;
  padding: 0 15px;
  cursor: pointer;
  height: 32px;
  font-size: 14px;
  transition: all 0.2s ease-in-out;
}
button:hover {
  transform: scale(1.1);
}

<button>Grow</button>

Simples e rápido. Super!

fonte: Product Hunt

JQuery usando velho JavaScript

Para ler

Exemplo: Validação de e-mail

<!DOCTYPE HTML>
<html>
<head>
   <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
</head>
<body>

<input type="email" id="email" />
<br />
<input type="button" id="button" value="validate email"/>
<input type="reset" id="reset"/>

<script type="text/javascript">

    $("#button").click({ value: "email" }, ValidateEmail);
    
    function ValidateEmail(event) {
        ValidateEmailAddress(event.data.value);
    }

    function ValidateEmailAddress(a) {
        var emailRegex = /^[a-zA-Z0-9.!#$%&’*+/=?^_`{|}~-]+@[a-zA-Z0-9-]+(?:\.[a-zA-Z0-9-]+)*$/;
        var email = String(document.getElementById(a).value);
        
        if ((undefined !== email) && ("" !== email) && !emailRegex.test(email)) {
         alert("Invalid email address.\nPlease check the value and try again.");
        }
    }
</script>

</body>
</html>

Referência: https://emailregex.com/

Separated Presentation // Observer Pattern // Events and Delegates

Para ler

Separated Presentation

Ao aplicar este padrão, a apresentação e a lógica de negócio são mantidas em camadas separadas, divididas por dois módulos lógicos com responsabilidades distintas e bem definidas.

Observer Pattern

As alterações são despoletadas por meio de eventos e tratadas pela lógica de negócio conseguindo-se baixo acoplamento.

Exemplo

Exemplo básico deste conceito aplicado à gestão de estado em memória.

Lógica de Negócio

IStateValue.cs

public interface IStateValue
    {
        object Value { get; set; }
        string KeyName { get; set; }
        void SetDefault();
        object this[string KeyName] { get; set; }
    }

CachingEventArgs.cs

 public class CachingEventArgs : EventArgs
    {
        public IStateValue ApplicationStateBase { get; set; }
    }

    public delegate void InitializeStorageContextEventHandler(object sender, IStateValue stateValue);

ICachingEvent.cs

public interface ICachingEvent
    {
        void OnInitializeStorageContext();
        event InitializeStorageContextEventHandler InitializeStorageContext;
    }

Controller.cs

public class Controller
    {
        private IStateValue _stateValue;

        public void InitializeStorage(IStateValue stateValue)
        {
            _stateValue = stateValue;
            CheckValue();
        }

        public void CheckValue()
        {
            var result = _stateValue?.Value;
            
            if (result == null)
            {
                _stateValue.SetDefault();
            }

        }

    }

Logic.cs

public class Logic
    {
        readonly Controller _controller;
        ICachingEvent _caching;
        
        public Logic(ICachingEvent caching)
        {
            _controller = new Controller();

            _caching = caching;

            _caching.InitializeStorageContext += InitializeStorage;

        }

        private void InitializeStorage(object sender, IStateValue stateValue)
        {
            _controller.InitializeStorage(stateValue);
        }
    }

Apresentação

Camada desenvolvida em ASP.NET Web Forms.

StateValue.cs

public class StateValue<T> : IStateValue where T : class
    {
        private string _keyName;
        private HttpSessionState _sessionState;
        private T _value;

        #region IStateValue Members

        public StateValue() { StateStorage = HttpContext.Current.Session; }

        public StateValue(string keyName) : this()
        {
            Add(keyName);
        }

        public HttpSessionState StateStorage
        {
            get { return _sessionState; }
            set { _sessionState = value; }
        }

        #endregion

        #region IStateValue Implementation

        public object this[string KeyName]
        {
            get { return _sessionState[KeyName]; }
            set { _sessionState[KeyName] = (T) value; }
        }

        public object Value
        {
            get
            {
                if (StateStorage == null || StateStorage[_keyName] == null)
                {
                    return _value;
                }

                return StateStorage[_keyName];
            }

            set
            {
                _value = (T) value;

                if (StateStorage != null)
                {
                    StateStorage[_keyName] = (T) value;
                }
            }
        }

        public string KeyName
        {
            get { return _keyName; }
            set { _keyName = value; }
        }

        public void SetDefault()
        {
            _value = default(T);
        }

        #endregion

        public void Add(string keyName)
        {
            Add(keyName, default(T));
        }

        public void Add(string keyName, T value)
        {
            if (StateStorage[keyName] == null)
            {
                _sessionState.Add(keyName, value);
                _value = value;
            }

            _keyName = keyName;
        }

        public void ClearAll()
        {
            _sessionState.Clear();
        }

        public void Clear(string keyName)
        {
            StateStorage[keyName] = null;
        }
    }

StateValueForm.aspx

<div>
 <asp:Button ID="Button1" runat="server" Text="Button" OnClick="Button1_Click" />
 <br />
 <asp:Label ID="Label1" runat="server" Text=""></asp:Label>
</div>

StateValueForm.aspx.cs

public partial class StateValueForm : System.Web.UI.Page, ICachingEvent
{
 Logic logic;

 IStateValue stateValue;

 public event InitializeStorageContextEventHandler InitializeStorageContext;

 protected override void OnPreInit(EventArgs e)
 {
  logic = new Logic(this);

  base.OnPreInit(e);
 }

 protected void Page_Load(object sender, EventArgs e)
 {
  stateValue = new StateValue<string>("FirstKey");
 }

 protected void Button1_Click(object sender, EventArgs e)
 {
  stateValue.Value = Guid.NewGuid().ToString();

  OnInitializeStorageContext();

  Label1.Text = (string)stateValue.Value;

 }

 public void OnInitializeStorageContext()
 {
  if (InitializeStorageContext != null)
  {
   InitializeStorageContext(this, stateValue);
  }
 }
}

Referências: Exploring the Observer Design Pattern, Observer Design Pattern (Delegates/Events)

Controls and Events in ASP.NET Web Forms

Para ler

Exemplo com aplicação de Bootstrap Modal Plugin

<%@ Register Src="~/Controls/ModalPopupContent.ascx" TagPrefix="uc1" TagName="ModalPopupContent" %>

<!DOCTYPE html>

<html>
<head runat="server">
    <title>Bootstrap Modal Using Control and Events</title>

    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
    
</head>
<body>
    
    <form id="form1" runat="server">

        <div class="container">
            <h5>Bootstrap Modal Popup Using Control and Events</h5>

            <!-- Trigger the modal with a button -->
            <button type="button" class="btn btn-info btn-sm" data-toggle="modal" data-target="#myModal">Open Small Modal</button>

            <uc1:ModalPopupContent runat="server" ID="ModalPopupContent" OnReadPopUpArgs="ReadPopUpArgs" />
        </div>
        <br />
        <asp:Label ID="lblShowContent" runat="server" Visible="false"></asp:Label>
    </form>
</body>

</html>

Code-behind

protected void Page_Load(object sender, EventArgs e)
        {
            lblShowContent.Text = "Popup Content: ";
        }

        protected void ReadPopUpArgs(object sender, PopupEventArgs e)
        {

            lblShowContent.Visible = !e.PopUpArgs.Count.Equals(0);

            foreach (var item in e.PopUpArgs)
            {
                lblShowContent.Text += item.ToString();
            }

        }

User Control

<!-- Modal -->
<div class="modal fade" id="myModal" role="dialog">
    <div class="modal-dialog modal-sm">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal">×</button>
                <h4 class="modal-title">Modal Header</h4>
            </div>
            <div class="modal-body">
                <p id="pContentText" runat="server">This is a small modal.</p>
            </div>
            <div class="modal-footer">
                <asp:Button ID="Button1" runat="server" Text="Close" CssClass="btn btn-default" OnClick="btnClose_Click" />
            </div>
        </div>
    </div>
</div>

Code-behind

//public event ReadPopUpArgsEventHandler ReadPopUpArgs;
        public event EventHandler<popupeventargs> ReadPopUpArgs;
        
        protected void btnClose_Click(object sender, EventArgs e)
        {
            ScriptManager.RegisterStartupScript(this, this.GetType(), "HideMyModal", "$('#myModal').modal('hide');", true);

            if (ReadPopUpArgs != null)
            {
                
                ReadPopUpArgs(this, new PopupEventArgs { PopUpArgs = new List { pContentText.InnerText } });
            }
        }

Events

public class PopupEventArgs : EventArgs
    {
        public ICollection<string> PopUpArgs { get; set; }
    }

    public delegate void ReadPopUpArgsEventHandler(object sender, PopupEventArgs popUpArgs);

Refêrencia: How To Create a Modal Box, Bootstrap Modal Plugin

Desabilitar caixa de selecção em ASP.NET Web Forms

Para ler

A framework ASP.NET Web Forms está orientada para a programação declarativa e baseada em controlos, à semelhança das WinForms e WPF/XAML/Silverlight.

Os controlos renderizam o HTML automaticamente e podem ser personalizados ou customizados através da configuração de propriedades e estilos.

O controlo nativo <asp:checkbox runat="server"></asp:checkbox> renderiza o HTML <input type="checkbox" />.

Problema

Apresentar a caixa de selecção apenas para leitura poderia ser conseguido através da propriedade readonly do controlo, assim

<asp:checkbox id="CheckBox1" readonly="true" runat="server"></asp:checkbox>

no entanto, resulta no seguinte HTML

<span readonly="true"><input id="CheckBox1" name="CheckBox1" type="checkbox" /></span>

que não desabilita a caixa de selecção.

Solução

Juntar ao controlo a propriedade enabled com o valor false.

<asp:checkbox enabled="false" id="CheckBox1" runat="server"></asp:checkbox>

renderiza o seguinte HTML

<span disabled="disabled"><input disabled="disabled" id="CheckBox1" name="CheckBox1" type="checkbox" /></span>

Teste

Referências: ASP.NET Overview, HTML <input /> Tag

Backbone.js sem espinhas em ASP.NET Web Forms

Para ler

Backbone.js - A espinha dorsal de aplicações web from Henrique Gogó

Backbone.js é uma biblioteca MV* de JavaScript com uma interface JSON RESTful e permite preparar as aplicações JS com uma espinha dorsal de Models, Views, Collections e Events resolvendo vários problemas do código esparguete ou spaghetti code.

Exemplo de uma lista de Hellos

index.html


<!DOCTYPE HTML>
<html>
<head>
    <title>Hello World Part 2</title>
    <meta charset="UTF-8">
</head>

<body>
    <div class="wrapper">

        <h1>Greetings</h1>

        <div id="otherDiv"></div>

        <ul id="helloListWithTemplate">
            <script type="text/template" id="hello-template">
                Hello, {{name}}
            </script>
        </ul>
       
    </div>

    <!-- JQuery Backbone.js -->
    <script src="Scripts/jquery-3.2.1.min.js"></script>
    <script src="Scripts/libs/underscore-1.8.3.min.js"></script>
    <script src="Scripts/libs/backbone-1.3.3.min.js"></script>
    <script src="Scripts/grettings.js"></script>

</body>
</html>

grettings.js (dados locais em memória)


// Backbone.js
$(document).ready(function () {

    ///
    ///Model Class Area
    ///
    var Hello = Backbone.Model.extend({

        idAttribute: 'id',

        defaults: function () {
            return {
                id: "",
                name: "default"
            };
        }

    });


    ///
    ///Collection Class Area
    ///
    var HelloList = Backbone.Collection.extend({
        model: Hello,

    });



    ///
    ///View Class Area
    ///

    var HelloViewUsingTemplate = Backbone.View.extend({

        tagName: 'li',

        model: Hello,

        templateSettings: _.templateSettings = {
                      interpolate : /\{\{(.+?)\}\}/g
                      evaluate : /\{(.+?)\}/g; 
                     };

        //template: _.template($('#hello-template').html()),

        template: $("#hello-template").html(),

        render: function () {

            //$(this.el).html(this.template(this.model.attributes));

            var local_template = _.template(this.template);
            this.$el.html(local_template(this.model.attributes));

            return this;
        }

    });

    var HelloListViewUsingTemplate = Backbone.View.extend({

        el: '#helloListWithTemplate',

        initialize: function () {

            this.render();

        },

        render: function () {
            this.$el.html();

            this.collection.each(function (helloModel) {

                var helloViewUsingTemplate = new HelloViewUsingTemplate({
                    model: helloModel
                });

                this.$el.append(helloViewUsingTemplate.render().el);

            }.bind(this));

            return this;

        }

    });



    ///
    ///Model instances Area
    ///

    var helloCollection = new HelloList([{ "id": 1, "name": "Local value 1" }, { "id": 2, "name": "Local value 2" }, { "id": 3, "name": "Local value 3" }], { model: Hello });

    //create a new hello collection view instance
    var hellolistviewusingtemplate = new HelloListViewUsingTemplate({
        collection: helloCollection
    });


    //JQuery
    $('#otherDiv').html('This line does nothing.
');

});

Relacionado: Backbone.js sem espinhas

Referência: Introduction to Backbone.js, Using Underscore.js with ASP.NET

Backbone.js sem espinhas

Para ler

Exemplo de uma lista de Hellos

index.html


<!DOCTYPE HTML>
<html>
<head>
    <title>Hello World Part 2</title>
    <meta charset="UTF-8">
</head>

<body>
    <div class="wrapper">

        <h1>Greetings</h1>

        <div id="otherDiv"></div>

        <ul id="helloListWithTemplate">
            <script type="text/template" id="hello-template">
                Hello, <%= name %>
            </script>
        </ul>
       
    </div>

    <!-- JQuery Backbone.js -->
    <script src="Scripts/jquery-3.2.1.min.js"></script>
    <script src="Scripts/libs/underscore-1.8.3.min.js"></script>
    <script src="Scripts/libs/backbone-1.3.3.min.js"></script>
    <script src="Scripts/grettings.js"></script>

</body>
</html>

grettings.js (dados locais em memória)


// Backbone.js
$(document).ready(function () {

    ///
    ///Model Class Area
    ///
    var Hello = Backbone.Model.extend({

        idAttribute: 'id',

        defaults: function () {
            return {
                id: "",
                name: "default"
            };
        }

    });


    ///
    ///Collection Class Area
    ///
    var HelloList = Backbone.Collection.extend({
        model: Hello,

    });



    ///
    ///View Class Area
    ///

    var HelloViewUsingTemplate = Backbone.View.extend({

        tagName: 'li',

        model: Hello,

        //template: _.template($('#hello-template').html()),

        template: $("#hello-template").html(),

        render: function () {

            //$(this.el).html(this.template(this.model.attributes));

            var local_template = _.template(this.template);
            this.$el.html(local_template(this.model.attributes));

            return this;
        }

    });

    var HelloListViewUsingTemplate = Backbone.View.extend({

        el: '#helloListWithTemplate',

        initialize: function () {

            this.render();

        },

        render: function () {
            this.$el.html();

            this.collection.each(function (helloModel) {

                var helloViewUsingTemplate = new HelloViewUsingTemplate({
                    model: helloModel
                });

                this.$el.append(helloViewUsingTemplate.render().el);

            }.bind(this));

            return this;

        }

    });



    ///
    ///Model instances Area
    ///

    var helloCollection = new HelloList([{ "id": 1, "name": "Local value 1" }, { "id": 2, "name": "Local value 2" }, { "id": 3, "name": "Local value 3" }], { model: Hello });

    //create a new hello collection view instance
    var hellolistviewusingtemplate = new HelloListViewUsingTemplate({
        collection: helloCollection
    });


    //JQuery
    $('#otherDiv').html('This line does nothing.');

});

grettings.js (API RESTful)


// Backbone.js
$(document).ready(function () {

    ///
    ///Model Class Area
    ///

    var Hello = Backbone.Model.extend({

        idAttribute: 'id',

        defaults: function () {
            return {
                id: "",
                name: "default"
            };
        }

    });


    ///
    ///Collection Class Area
    ///
    var HelloList = Backbone.Collection.extend({
        model: Hello,

        url: function () { return '/api/Values'; }
    });



    ///
    ///View Class Area
    ///

    var HelloViewUsingTemplate = Backbone.View.extend({

        tagName: 'li',

        model: Hello,

        //template: _.template($('#hello-template').html()),

        template: $("#hello-template").html(),

        render: function () {

            //$(this.el).html(this.template(this.model.attributes));

            var local_template = _.template(this.template);
            this.$el.html(local_template(this.model.attributes));

            return this;
        }

    });

    var HelloListViewUsingTemplate = Backbone.View.extend({

        el: '#helloListWithTemplate',


        render: function () {
            this.$el.html();

            this.collection.each(function (helloModel) {

                var helloViewUsingTemplate = new HelloViewUsingTemplate({
                    model: helloModel
                });

                this.$el.append(helloViewUsingTemplate.render().el);

            }.bind(this));

            return this;

        }

    });



    ///
    ///Model instances Area
    ///

    var helloCollection = new HelloList(null, { model: Hello });
    helloCollection.reset();

    //create a new hello collection view instance
    var hellolistviewusingtemplate = new HelloListViewUsingTemplate({
        collection: helloCollection
    });


    helloCollection.fetch({

        success: function () {

            hellolistviewusingtemplate.render();

        }

    });


    //JQuery
    $('#otherDiv').html('This line does nothing.');

});

Usando a ASP.NET Web API, juntar ao App_Start\WebApiConfig.cs

config.Formatters.JsonFormatter.SerializerSettings.ContractResolver = new CamelCasePropertyNamesContractResolver();

Referência: Introduction to Backbone.js

Unit-of-Work & Repository Framework aplicada a DDD

Para ler

A URF, Unit-of-Work & Repository Framework, é uma framework que tem por objectivo juntar as Patterns Repository e Unit of Work sobre tecnologia O/RM ao Domain-Driven Design. Documentação desta framework aqui.

O exercício seguinte consiste em aplicar a URF Framework à solução desenhada aqui, com dependency injection.

Criação da solução

Criar a nova solução UnitOfWorkRepository.Framework com:

Pasta Application
Pasta Domain
Pasta Infrastructure

Criação dos projectos Domain-Driven

À Infrastructure adiciona-se o projecto do tipo biblioteca de nome EntityFramework com os repositórios de acesso à Entity Framework.
Ao Domain adiciona-se o projecto do tipo biblioteca com o Core.
À Application adiciona-se o projecto do tipo biblioteca com o nome Application.

Mais detalhes aqui.

Geração de POCO e DbContext

Na Consola de Gestão de Pacotes NuGet procede-se à instalação da Entity Framework, tendo o projecto EntityFramework como padrão.

PM> install-package EntityFramework

Uma vez instalada a última versão da Entity Framework, procede-se ao reverse engineering para a geração do DbContext, classes POCO e Configuração POCO a partir da BD SQL Server Pluto_Queries. É usado para o efeito o módulo EntityFramework Reverse POCO Generator, disponível aqui, que integra com o Visual Studio 2017. Artigo dedicado, aqui, pela Microsoft MVP Julie Nerman.

Connection string PlutoContext usada aqui:

  <connectionStrings>
    <add name="PlutoContext" connectionString="data source=(localdb)\MSSQLLocalDB;initial catalog=Pluto_Queries;integrated security=True;MultipleActiveResultSets=True;App=EntityFramework" providerName="System.Data.SqlClient" />
  </connectionStrings>

Mover as classes POCO Author e Course, geradas automaticamente pelo EF.Reverse.POCO.Generator para a pasta Model do Core e a bilbioteca EntityFramework tem de passar a referenciá-lo.

using UnitOfWorkRepository.Framework.Core.Model;

Compilar a solução para verificação.

Integração com a URF Framework

Usar a gestão de pacotes NuGet através da UI da ferramenta no VS para instalar o pacote Urf.Repository.Pattern.EF6 nos projectos Application, Core e EntityFramework.

Integração do DbContext

Para integrar o DbContext com a URF Framework, o DbContext tem de herdar do DataContext:

namespace UnitOfWorkRepository.Framework.EntityFramework
{
    using System.Linq;
    using UnitOfWorkRepository.Framework.Core.Model;
    using Repository.Pattern.Ef6;

    [System.CodeDom.Compiler.GeneratedCode("EF.Reverse.POCO.Generator", "2.32.0.0")]
    public partial class PlutoContext : DataContext, IPlutoContext
    {
        public System.Data.Entity.DbSet<Author> Authors { get; set; } // Authors
        public System.Data.Entity.DbSet<Course> Courses { get; set; } // Courses

        static PlutoContext()
        {
            System.Data.Entity.Database.SetInitializer<PlutoContext>(null);
        }

        public PlutoContext()
            : base("Name=PlutoContext")
        {
        }

        protected override void Dispose(bool disposing)
        {
            base.Dispose(disposing);
        }

       [...]

     }
}

Integração do Model

Para integrar as entidades de domínio com esta framework de persistência, estas classes têm de herdar da classe base Entity.cls:

namespace UnitOfWorkRepository.Framework.Core.Model
{     
  using Repository.Pattern.Ef6;     

  // Authors
  [System.CodeDom.Compiler.GeneratedCode("EF.Reverse.POCO.Generator", "2.32.0.0")]
  public partial class Author: Entity
  {
   [...]
  }
}

Compilar a solução para verificação.

Integração das Interfaces

À biblioteca Core, adiciona-se a pasta Interfaces. Esta pasta comporta as interfaces intrínsecas aos repositórios e estendem a interface de repositório da URF Framework. Exemplo, IAuthorRepository:

using UnitOfWorkRepository.Framework.Core.Model;
using Repository.Pattern.Repositories;

namespace UnitOfWorkRepository.Framework.Core.Interfaces
{
   public interface IAuthorRepository: IRepositoryAsync<Author>
   {
     Author GetAuthorWithCourses(int id);
   }
}

Compilar a solução para verificação.

Integração dos Repositórios

Depois de adicionada a pasta Repositories à biblioteca EntityFramework, juntam-se as classes que implementam as interfaces definidas no Domain e que herdam do repositório base da URF Framework. Exemplo, AuthorRepository:

using Repository.Pattern.DataContext;
using Repository.Pattern.Ef6;
using Repository.Pattern.UnitOfWork;
using System.Linq;
using UnitOfWorkRepository.Framework.Core.Interfaces;
using UnitOfWorkRepository.Framework.Core.Model;

namespace UnitOfWorkRepository.Framework.EntityFramework.Repositories
{
  public class AuthorRepository: Repository <Author>, IAuthorRepository 
  {
    public AuthorRepository(IDataContextAsync dataContext, IUnitOfWorkAsync unitOfWork)
 : base(dataContext, unitOfWork){}
 
    public Author GetAuthorWithCourses(int id) 
    {
      var authorWithCourses = base.Query().Include(a => a.Course).Select().AsQueryable();
   
      return authorWithCourses.FirstOrDefault();
    }
  }
}

Introdução da lógica de negócio

Usar a gestão de pacotes NuGet através da UI da ferramenta no VS para instalar o pacote Urf.Service.Pattern nos projectos Application e Core.

A biblioteca Application vai ter os serviços que implementam a lógica de negócio, enquanto a pasta Interfaces da biblioteca Core vai ter as interfaces intrínsecas a estes serviços. Exemplo, IAuthorService e AuthorService:

using System.Collections.Generic;
using UnitOfWorkRepository.Framework.Core.Model;
using Service.Pattern;

namespace UnitOfWorkRepository.Framework.Core.Interfaces
{
  public interface IAuthorService: IService<Author>
  {
    IEnumerable<Author> GetAllAuthors();
    Author GetAuthor(int Id);
    Author GetAuthorWithCourses(int id);
  }
}

using System.Collections.Generic;
using UnitOfWorkRepository.Framework.Core.Model;
using UnitOfWorkRepository.Framework.Core.Interfaces;
using Service.Pattern;
using Repository.Pattern.Repositories;

namespace UnitOfWorkRepository.Framework.Application
{
    public class AuthorService : Service<Author>, IAuthorService
    {
        private IAuthorRepository _repository;

        public AuthorService(IRepositoryAsync<Author> repository)
            :base(repository)
        {
            _repository = repository as IAuthorRepository;
        }

        public IEnumerable<Author> GetAllAuthors()
        {
            return base.Query().Select();
        }

        public Author GetAuthor(int Id)
        {
            return base.Find(Id);
        }

        public Author GetAuthorWithCourses(int id)
        {
            return _repository.GetAuthorWithCourses(id);
        }

        public override void Insert(Author author)
        {
            // TODO: lógica de negócio
            base.Insert(author);
        }

        public override void Delete(Author author)
        {
            // TODO: lógica de negócio
            base.Delete(author);
        }

        public override void Update(Author author)
        {
            // TODO: lógica de negócio
            base.Update(author);
        }
    }
}

Consumo por framework de apresentação

É usado para exemplo o controller AuthorsController.cs da framework .NET MVC 5.

I. Criar o projecto do tipo ASP.NET MVC Web Application no Visual Studio 2017 com a template de fábrica.

II. Usar a gestão de pacotes NuGet através da UI da ferramenta no VS para instalar neste projecto o pacote mais recente do Unity.Mvc (unity bootstrapper para asp.net mvc), pela Microsoft.

III. Adicionar o seguinte código ao App_Start\UnityConfig.cs

using UnitOfWorkRepository.Framework.Application;
using Repository.Pattern.Repositories;
using UnitOfWorkRepository.Framework.Core.Model;
using UnitOfWorkRepository.Framework.Core.Interfaces;
using Repository.Pattern.UnitOfWork;
using Repository.Pattern.Ef6;
using Repository.Pattern.DataContext;
using UnitOfWorkRepository.Framework.EntityFramework;
using UnitOfWorkRepository.Framework.EntityFramework.Repositories;
using Service.Pattern;

container.RegisterType<IUnitOfWork, UnitOfWork>(new PerRequestLifetimeManager());
container.RegisterType<IUnitOfWorkAsync, UnitOfWork>(new PerRequestLifetimeManager());
container.RegisterType<IDataContext, PlutoContext>(new PerRequestLifetimeManager());
container.RegisterType<IDataContextAsync, PlutoContext>(new PerRequestLifetimeManager());
container.RegisterType<IRepositoryAsync<Author>, AuthorRepository>(new PerRequestLifetimeManager());
container.RegisterType<IService<Author>, Service<Author >> (new PerRequestLifetimeManager());
container.RegisterType<IAuthorService, AuthorService>(new PerRequestLifetimeManager());

IV. Descomentar a seguinte linha de código do método Start da App_Start\UnityMvcActivator.cs

Microsoft.Web.Infrastructure.DynamicModuleHelper.DynamicModuleUtility.RegisterModule(typeof(UnityPerRequestHttpModule));

V. Gerar o AuthorsController com scaffolding com modos de exibição usando a Entity Framework

VI.Substituir o código do AuthorsController.cs por

using Repository.Pattern.Infrastructure;
using Repository.Pattern.UnitOfWork;
using System.Web.Mvc;
using UnitOfWorkRepository.Framework.Core.Interfaces;
using UnitOfWorkRepository.Framework.Core.Model;

namespace UnitOfWorkRepository.Framework.WebApplication.MVC.Controllers
{
    public class AuthorsController : Controller
    {
        private IAuthorService _authorService;
        private IUnitOfWork _unitOfWork;

        public AuthorsController(IAuthorService authorService, IUnitOfWork unitOfWork)
        {
            _authorService = authorService;
            _unitOfWork = unitOfWork;
        }

        // GET: Authors
        public ActionResult Index()
        {
            return View(_authorService.GetAllAuthors());
        }

        // GET: Authors/Details/5
        public ActionResult Details(int id)
        {
            Author author = _authorService.GetAuthor(id);
            if (author == null)
            {
                return HttpNotFound();
            }

            return View(author);
        }

        // GET: Authors/Create
        public ActionResult Create()
        {
            return View();
        }

        // POST: Authors/Create
        // Para se proteger de mais ataques, ative as propriedades específicas a que você quer se conectar. Para 
        // obter mais detalhes, consulte https://go.microsoft.com/fwlink/?LinkId=317598.
        [HttpPost]
        [ValidateAntiForgeryToken]
        public ActionResult Create([Bind(Include = "Id,Name")] Author author)
        {
            if (ModelState.IsValid)
            {
                _authorService.Insert(author);
                _unitOfWork.SaveChanges();
                
                return RedirectToAction("Index");
            }

            return View(author);
        }

        // GET: Authors/Edit/5
        public ActionResult Edit(int id)
        {
            Author author = _authorService.GetAuthor(id);

            if (author == null)
            {
                return HttpNotFound();
            }
            return View(author);
        }

        // POST: Authors/Edit/5
        // Para se proteger de mais ataques, ative as propriedades específicas a que você quer se conectar. Para 
        // obter mais detalhes, consulte https://go.microsoft.com/fwlink/?LinkId=317598.
        [HttpPost]
        [ValidateAntiForgeryToken]
        public ActionResult Edit([Bind(Include = "Id,Name")] Author author)
        {
            if (ModelState.IsValid)
            {
                author.ObjectState = ObjectState.Modified;
                _authorService.Update(author);
                _unitOfWork.SaveChanges();
                return RedirectToAction("Index");
            }
            return View(author);
        }

        // GET: Authors/Delete/5
        public ActionResult Delete(int id)
        {
            Author author = _authorService.GetAuthor(id);
            if (author == null)
            {
                return HttpNotFound();
            }
            return View(author);
        }

        // POST: Authors/Delete/5
        [HttpPost, ActionName("Delete")]
        [ValidateAntiForgeryToken]
        public ActionResult DeleteConfirmed(int id)
        {
            Author author = _authorService.GetAuthor(id);
            _authorService.Delete(author);
            _unitOfWork.SaveChanges();
            return RedirectToAction("Index");
        }

        protected override void Dispose(bool disposing)
        {
            if (disposing)
            {
                _unitOfWork.Dispose();
            }
            base.Dispose(disposing);
        }
    }
}

Depurar no navegador pré-definido.

<url base>/Authors

Relacionado: Unit of Work in Repository Pattern, Arquitectura por camadas em aplicações ASP.NET Core

(artigo editado)

Referências: Introduction to EntityFramework Reverse POCO Generator for Visual Studio, EntityFramework Reverse POCO Generator, URF (Unit of Work & Repository Framework) in ASP.NET MVC 5 with Entity Framework 6 & Unity 3 - v2

Gerar especificação de API REST com Swagger

Para ler

A especificação OpenAPI Swagger está para os serviços RESTfull assim como a WSDL está para os webservices.

O Visual Studio 2017 tem suporte para a especificação e criação de proxys para API REST com o protocolo Swagger.

Pressupostos

Criação de projecto do tipo ASP.NET MVC Web API no Visual Studio 2017 para .NET Framework 4.6 com a template de fábrica.

Adição de documentação XML ao controller

Na pasta Controllers, é criado o controller ValuesController.cs por omissão. Nesta classe, substituir as acções pelo seguinte código:

private string[] lista
        {
            get
            {
                if (System.Web.HttpContext.Current.Application["lista"] == null)
                {
                    System.Web.HttpContext.Current.Application["lista"] = new string[] { "value1", "value2" };
                }
                return
                    (string[])System.Web.HttpContext.Current.Application["lista"];
            }
        }

        /// <summary>
        /// Retrieves the list of values
        /// </summary>
        /// <returns></returns>
        public IEnumerable<string> Get()
        {
            return lista;
        }
        /// <summary>
        /// Retrieves one value from the list of values
        /// </summary>
        /// <param name="id">The id of the item to be retrieved</param>
        /// <returns></returns>
        public string Get(int id)
        {
            return lista[id];
        }
        /// <summary>
        /// Insert a new value in the list
        /// </summary>
        /// <param name="value">New value to be inserted</param>
        public void Post([FromBody]string value)
        {
        }
        /// <summary>
        /// Change a single value in the list
        /// </summary>
        /// <param name="id">The id of the value to be changed</param>
        /// <param name="value">The new value</param>
        public void Put(int id, [FromBody]string value)
        {
            lista[id] = value;
        }
        /// <summary>
        /// Delete an item from the list
        /// </summary>
        /// <param name="id">id of the item to be deleted</param>
        public void Delete(int id)
        {

        }

Ao executar a aplicação para depuração é apresentada a página inicial no navegador pré-definido.
Na barra de endereços do navegador, escrever o caminho para o controller Values.

<url base>/api/values

A API REST devolve o resultado da lista:

["value1","value2"]

Integração do Swagger no projecto

O protocolo Swagger é agnóstico. Portanto, é necessária uma ferramenta para implementação do protocolo em função da tecnologia. A ferramenta para .NET é o SwashBuckle. Existem duas versões, a Swashbuckle.Net45 para .NET Framework 4.5 e posteriores e outra para as mais antigas.

Na Consola de Gestão de Pacotes NuGet procede-se à instalação da última versão do pacote Swashbuckle.Net45, tendo este projecto da WebApi como padrão

PM> Install-Package Swashbuckle.Net45 -Version 5.2.1

Configuração da documentação XML

O SwashBuckle usa a documentação XML para descrever as acções das APIs. Para isso há que seleccionar as propriedades do projecto e no separador Build indicar o ficheiro de output para documentação XML. Exemplo: \bin\myWebApi.xml

Configuração do SwashBuckle

Procurar o ficheiro SwaggerConfig.cs na pasta App_Start do projecto da WebApi.
Descomentar a seguinte linha de código do método Register

c.IncludeXmlComments(GetXmlCommentsPath());

Gerar o método GetXmlCommentsPath com uma instrução idêntica à do exemplo seguinte

protected static string GetXmlCommentsPath()
          {
              return System.String.Format(@"{0}\bin\myWebApi.xml", 
                  System.AppDomain.CurrentDomain.BaseDirectory);
          }

Visualização da página de documentação Swagger

Voltar a executar a WebApi.
Ao executar a aplicação para depuração é apresentada a página inicial no navegador pré-definido.
Na barra de endereços do navegador, escrever o caminho para a documentação Swagger.

<url base>/Swagger/ui/index

O Swagger usa a documentação XML de cada operação:

Referências: Visual Studio 2017 and Swagger: Building and Documenting Web APIs, GitHub Swashbuckle Project

ASP.NET WebForms MVP: uma framework MVP aplicada a web forms

Para ler

Trata-se da aplicação da separação de conceitos às ASP.NET Web forms de forma simples, rápida e com a aplicação das boas práticas com a framework Web Forms MVP.

É usado aqui um HelloWorld para prova de conceito básica.

Codificação da solução

Criar uma solução Web do tipo Web Forms, neste exemplo tem o nome ASPNET.WebForms.MVP.

Na Consola de Gestão de Pacotes NuGet procede-se à instalação da Framework WebFormsMVP, tendo este projecto como padrão

PM> Install-Package WebFormsMVP -Version 1.4.5

Adicionar à solução um projecto do tipo biblioteca que comporta a lógica com as pastas

Model
Presenter
View

Novamente na Consola de Gestão de Pacotes NuGet procede-se à instalação da Framework WebFormsMVP, tendo este projecto como padrão

PM> Install-Package WebFormsMVP -Version 1.4.5

Ao Model adiciona-se a classe HelloWorldModel.cs

public class HelloWorldModel
    {
        public string HelloWorld { get; set; }
    }

Ao Presenter adiciona-se a classe HelloWorldPresenter.cs

using WebFormsMvp;
[...]
public class HelloWorldPresenter : Presenter<IView<HelloWorldModel>>
    {
        public HelloWorldPresenter(IView<HelloWorldModel> view) : base(view)
        {

            View.Load += View_Load;
        }

        private void View_Load(object sender, EventArgs e)
        {
            View.Model.HelloWorld = "Olá Mundo :)";
        }

    }

A aplicação Web referencia a biblioteca core preparada anteriormente e faz uso dos seus elementos no code behind da página HelloWorld.aspx adicionada:

using WebFormsMvp;
using WebFormsMvp.Web;
using ASPNET.WebForms.MVP.Logic.Model;
using ASPNET.WebForms.MVP.Logic.Presenter;

HelloWorld.aspx

<br />
    <h3><%= Model.HelloWorld %></h3>
    <br />

HelloWorl.aspx.cs

[PresenterBinding(typeof(HelloWorldPresenter), ViewType = typeof(IView<HelloWorldModel>))]
    public partial class HelloWorld : MvpPage<HelloWorldModel>
    {
        protected void Page_Load(object sender, EventArgs e)
        {
            
        }
    }

Framework Web Forms MVP em acção

ASP.NET MVC vanity URL's

Para ler

É mais fácil usar os built-in routings, é no entanto, uma boa prática customizar o routing, nomeadamente para mais facilmente ser promovido junto dos motores de pesquisa como o google.com.

Métodos de customização de routings

RouteConfig.cs
AttributeRouting

Adição ao App_Start\RouteConfig.cs

Exemplo:

routes.MapRoute(
                name: "MoviesReleaseByDate",
                url: "Movie/Released/{year}/{month}",
                defaults: new { controller = "Movie", action = "ByReleaseDate"},
                constraints: new { year = @"\d{4}", month = @"\d{2}"}
            );

Construção de AttributeRouting

Esta é a melhor abordagem.

Pré-condição
Adição ao RouteConfig.cs da instrução para activação do route por atributo

routes.MapMvcAttributeRoutes();

Route aplicado como atributo
Adição da template ao atributo Route da action ByReleaseDate do controller MovieController.cs

[Route("Movie/Released/{year}/{month:regex(\\d{2}):range(1, 12)}")]
 public ActionResult ByReleaseDate(int year, int month)
 {
   return Content(string.Format("year={0}&month={1}", year, month));
 }

Routing em acção

Azure: lift & shift, um caso de estudo de migração aplicacional

Para ler

AngularJS 2 vs ReactJS

Para ler

Arquitectura por camadas em aplicações ASP.NET Core

Para ler

Numa arquitectura por camadas, os blocos (Controller, View e Model) da framework ASP.NET MVC fazem parte da camada de apresentação.

No entanto, hoje em dia as aplicações web são construidas com AngularJS ou ReactJS do lado do cliente e ASP.NET Core (Web API) do lado do servidor. O que é, então, a camada de apresentação neste tipo de arquitectura?

Esta arquitectura tem as seguintes camadas:

Apresentação
Serviço
Lógica de Negócio/Núcleo da aplicação
Acesso a dados/Persistência

Camada de apresentação

Esta camada compreende as componentes, templates e modelos de AngularJS definidos na aplicação AngularJS. Estes são os artefactos da camada de apresentação.

Camada de Serviço

No âmbito de uma arquitectura por camadas, o serviço funciona como um wrapper da aplicação e disponibiliza as funcionalidades através de uma API com a qual a UI pode interagir. Esta camada vem fazer a ponte entre a camada de apresentação e a camada de negócio. Trata-se de serviços lógicos.

Portanto, a camada de serviço está repartida por duas componentes físicas: o cliente (os serviços HTTP do AngularJS) e o servidor (os controllers do ASP.NET Core). Os serviços do AngularJS e os controllers do ASP.NET Core são bastante coesos. Os métodos destes serviços comunicam directamente com os endpoints dos controllers do ASP.NET Core. Ex: MyService.getDataList().


app.service('MyService', function () {
  this.getDataList = function () {
    //...
   $.ajax({
       type : 'POST',
   //...
  };
});

Camada da lógica de negócio

Os controllers do ASP.NET Core usam as interfaces com o(s) repositório(s), as classes de domínio e os serviços. Estes são os artefactos da camada de negócio.

É aqui que está o núcleo da aplicação, independente quer da framework de apresentação quer da framework de persistência.

A implementação dos repositórios é da responsabilidade da camada de acesso a dados.

Os serviços são responsáveis pela orquestração. Exemplo:

PhotoService.AddPhoto()


//...
// Save file
var uploadsPath = Path.Combine(host.WebRoot, "uploads");
if (!Directory.Exists(uploadsPath))
    Directory.CreateDirectory(uploadsPath);
 
var fileName = Guid.NewGuid().ToString() + Path.GetExtension(file.FileName);
var filePath = Path.Combine(uploadsPath, fileName);
 
using (var stream = new FileStream(filePath, FileMode.Create))
{  
    file.Copyto(stream);
}
 
// Add a record to the repository
var photo = new Photo { FileName = fileName };
photoRepository.Add(photo);
unitOfWork.Complete();

Isto é separação de conceitos. E temos a Clean Architecture do Uncle Bob.

Camada de acesso a dados

Esta camada é responsável pela persistência. É aqui que temos as frameworks O/RM (no caso da Entity Framework, o DbContext pertence a esta camada) e a implementação das software patterns Unit Of Work e Repository.

Ver aqui vídeo com a implementação das software patterns Repository e Unit Of Work usando a Entity Framework.

Relacionados:
A POPULARIDADE DO ANGULARJS
.NET CORE E ASP.NET 5 (COM TUTORIAL)
ANGULARJS: SERVICE VS FACTORY

fonte: Programming with Mosh

Novo Visual Studio 2017

Para ler

.Net Core / ASP.NET 5 (com tutorial)

Para ler

Aplicar CSS a botão para carregamento de ficheiros

Para ler

index.html

<!DOCTYPE html>
<html>
  <head>
 <link rel="stylesheet" type="text/css" href="http://geniuscarrier.com/assets/css/bootstrap.css?v=dac2c3f9e0" />
    <style>
 .file-upload {
position: relative;  
overflow: hidden;  
margin: 10px;  
}
.file-upload input.upload {
position: absolute;  
top: 0;  
right: 0;  
margin: 0;  
padding: 0;  
font-size: 20px;  
cursor: pointer;  
opacity: 0;  
filter: alpha(opacity=0);  
}
    </style>
  </head>
<body>
<br/>
<div style="display:inline; line-height: 0.7;">
<input id="uploadFile" type="text" disabled="disabled" placeholder="Seleccionar ficheiro" style="width: 250px" />
<div class="file-upload btn btn-warning" style="line-height: 0.68;">
<span>Carregar</span>
<input class="upload" id="uploadBtn" type="file" />
</div>
</div>  

<script type="text/javascript">  
document.getElementById("uploadBtn").onchange = function () {  
    document.getElementById("uploadFile").value = this.value;
};
</script>  
  </body>
</html>

O estilo aplicado ao botão é Bootstrap para simplificação conforme disponibilizado por Yang Zhao no artigo original.

O segredo está na aplicada em conjunto com o JavaScript.

vide HMTL5, AJAX e ASP.NET e o carregamento de ficheiros

fonte: How to Style a HTML file upload button in Pure CSS

HMTL5, AJAX e ASP.NET e o carregamento de ficheiros

Para ler

index.html


<html>
<body>

<form action="FileUploader.ashx" enctype="multipart/form-data" id="upload" method="POST">

<fieldset>

<input id="MAX_FILE_SIZE" name="MAX_FILE_SIZE" type="hidden" value="300000" />

<div>
    <label for="fileselect">Ficheiros para carregar:</label>
    <input id="fileselect" multiple="multiple" name="fileselect[]" type="file" />
</div>

<div id="submitbutton">
 <button type="submit">>Carrega os meus ficheiros</button>
</div>

</fieldset>

</form>

<div id="progress">
</div>

<div id="messages">
Mensagens de estado</div>

<script src="filedrag.js"></script>

</body>
</html>

FileUploader.ashx


public class FileUploader : IHttpHandler
{

public void ProcessRequest(HttpContext context)
{
   if (context.Request.Files.Count > 0)
   {
       HttpFileCollection files = context.Request.Files;
       for (int i = 0; i < files.Count; i++)
       {
           HttpPostedFile file = files[i];
           ////// Aqui o código necessário
       }
   }

   context.Response.ContentType = "text/plain";
   context.Response.Write("Ficheiros carregados com sucesso.");
}

public bool IsReusable
{
   get
   {
       return false;
   }
}

}

O JavaScript responsável pelo tratamento assíncrono do carregamento dos ficheiros foi desenvolvido através do objecto XMLHttpRequest.
No exemplo acima pode ver-se o markup e o código servidor que processa o carregamento de vários ficheiros num único pedido.

O JavaScript filedrag.js que trata da parte cliente e submete os ficheiros para o servidor foi desenvolvido por Craig Buckler (@craigbuckler) da OptimalWorks.net. O artigo original está aqui.
Este JavaScript também está preparado para drag & drop de ficheiros, abertura de ficheiros com HTML5 e JavasScript e carregamento de ficheiros com barra de progresso.

Estoutro artigo também detalha o uso de AJAX para carregamento de ficheiros.

Ambos usam e não o ASP.NET como este artigo.

fonte:
How to Asynchronously Upload Files Using HTML5 and Ajax
Uploading Files with Ajax