Upload e redimensionamento de imagens com Asp.Net MVC 4 – Parte 01

Fala galera!

Fiquei um tempo “off” mas agora estou voltando com tudo! 🙂

Bom para deixar claro não sou especialista na Estrutura Asp.Net MVC, na verdade iniciei um projeto particular utilizando a estrutura a pouco tempo, estou lendo alguns livros e pesquisando alguns posts na internet (o que ajuda muito).

Então de acordo com as necessidades deste projeto vou tentar elaborar tutoriais bem práticos para a resolução de questões rotineiras, e como primeiro tutorial vou demonstrar uma maneira rápida e simples de realizar o upload e redimensionamento de imagens de diferentes tamanhos, utilizando a biblioteca ImageResizer, que até agora achei bacana e simples de utilizar.

Para todos os tutoriais que irei elaborar daqui pra frente em Asp.Net MVC irei utilizar este projeto. O projeto foi elaborado em Asp.Net MVC 4 e Razor e para ficar com um visual bacana utilizei o Bootstrap e o tema flatly disponível no Bootswatch.

O projeto é bem simples (clique aqui para baixá-lo) criei um novo projeto em Asp.Net MVC 4 do tipo “Basic”, escolhi a view engine “Razor” e em seguida adicionei uma pasta no projeto chamada “Imagens”, onde de fato ficarão armazenadas as imagens que serão carregadas. Além disso adicionei os arquivos do Bootstrap, o tema Flatly e realizei algumas alterações na View _Layout.cshtml e na Index da Home ficando com este layout:

E na View Index do Controller Imagem o seguinte layout, onde de fato será o upload e o redimensionamento das imagens e o gerenciamento das mesmas:

Index do controller “Imagem”.

Nesta primeira parte do não vou iniciar no que se propõe o tutorial, ao invés disso vou demonstrar como criar um mecanismo simples de mensagens personalizadas utilizando o modal do tema Flatly. O mecanismo irá funcionar da seguinte maneira: iremos verificar se existe alguma mensagem em uma Session chamada “alert”, se existir iremos exibir o modal e logo após a sua exibição iremos “zerar” a Session criada.

Para isso vamos realizar e seguinte alteração na View _Layout.cshtml onde está a nossa janela modal:

 <!--na div modal vamos setar o id para "divMeuModal"-->
    <div id="divMeuModal" class="modal">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
                    <!--Alteramos o texto do h4 para o texto abaixo-->
                    <h4 class="modal-title">:: Informação ::</h4>
                </div>
                <div class="modal-body">
                    @{
                        <!-- E aqui verificamos se existe algo na Session["alert"] -->
                        <!-- caso exista inserimos a mensagem no corpo do modal -->
                        if (Session["alert"] != null)
                        {                           
                        <p>
                            @Session["alert"].ToString()
                        </p>
                        }                            
                    }

                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-primary" data-dismiss="modal">Ok</button>
                </div>
            </div>
        </div>
    </div>

Feita as alterações precisamos agora criar um código para gerar um script para exibir o modal caso tenha algo armazenado na session e em seguida limpar a session, pois a mensagem já foi mostrada para o usuário.

 <script src="js/bootstrap.min.js"></script>
    <!-- Verifico se tem algo na session caso tenha -->
    @{
        if (Session["alert"] != null)
        {
        <!-- é gerado o scrip e exibido a modal -->
        <script>
            $(function () {
                $("#divMeuModal").modal();
            });
        </script>
            <!-- logo após a exbição faço a Session receber null -->
            Session["alert"] = null;
        };
    }

    @RenderSection("scripts", required: false)

Pronto! Agora sempre que for necessário exibir uma mensagem ao usuário, como por exemplo uma mensagem de sucesso logo após o upload das imagens, basta inserir a mensagem desejada na Session que automaticamente será exibida na modal para o usuário.

Para testar basta ir no Controller Home e inserir o seguinte código na ActionResult Index:

public ActionResult Index()
{
    //Session recebe uma mensagem de teste
    Session["alert"] = "Mensagem de teste!";
    return View();
}

Modal exibido:

Exibição do modal com a mensagem de teste.

Utilizei como referência para a criação do mecanismo de mensagem este video disponibilizado pela Softmark onde o professor Ricardo Maroquio ensina como realizar um controle de usuários usando SimpleMembership com ASP.NET Web Forms (Recomendo a visualização!!! Material de qualidade).

Bom pessoal é isso! No próximo post vamos começar de fato com o upload e redimensionamento de imagens e lembrando que este é um simples exemplo que deve ser otimizado e melhorado de acordo com sua necessidade.
E lembrando que minha intenção é de fato compartilhar conhecimento, como disse estou iniciando os estudos e fiquem a vontade para propor melhorias! Abraço e até a próxima!

O download do projeto até esta parte pode ser feito aqui!

Curso Técnico em Informática

Olá pessoal!

Você que reside em Marataízes, Itapemirim ou região!

Uma ótima oportunidade de qualificar-se para o mercado de trabalho e aprender uma nova profissão e o que é melhor, de forma gratuita com alimentação e transporte.O curso Técnico em Informática disponível na escola E. E. E. M. “Professor José Veiga da Silva”, habilita o profissional como Técnico em Informática e conta com uma carga horária total de 1200h. Todo o curso é presencial e se divide em 3 (três) módulos, abaixo segue as disciplinas contidas nos mesmos:

Módulo I (390h)

• Organização de Empresas
• Inglês Técnico
• Aplicativos para Automação de Escritórios
• Instalação de Computadores
• Sistemas Operacionais
• Gerenciamento de Projetos
• Criação e Editoração de Imagens
• Algoritmo e Lógica de Programação

Módulo II (405h)

• Linguagem de Programação
• Banco de Dados
• Linguagem de Programação Orientada a Objetos
• Análise e Projeto de Sistemas
• Documentação de Sistemas
• Projeto de Programação

Módulo III (405h)

• Arquitetura e Projeto de Redes
• Programação e Web Design
• Redes, Protocolos e Segurança da Informação
• Administração e Sistemas Operacionais de Rede
• Internet

As inscrições se iniciam na próxima terça-feira dia 10/06/2014 a partir das 10h, por meio do site da SEDU.

Aqui está o Edital do Processo Seletivo e Aqui você pode realizar a sua Inscrição!

Qualquer dúvida é só entrar em contato:

Celular: (28) 99974-8059

E-mail: pablobatistacardoso@hotmail.com

Facebook: https://www.facebook.com/PabloBatistaCardoso

 

Configurações de Usuário C#

De novo na área galera!

Hoje vou falar de um recurso, que ao meu ver é pouco conhecido apesar de existir desde o .Net Framework 2.0, este recurso é chamado de Configurações (Settings) que se divide em dois Escopos são eles: Configurações de Usuário e Configurações de Aplicativo, hoje o foco será nas Configurações de Usuário.

Segundo a documentação da Microsoft este recurso pode ser usado para criar e acessar valores que são persistidos entre as seções de execução do aplicativo. Estes valores são chamados de Configurações, elas podem representar preferências do usuário ou informações valiosas que o aplicativo poderá utilizar como por exemplo: preferência de cores do usuário, String de Conexão com a base de dados,  um texto, uma data, etc..

Ou seja, as configurações permitem que você tanto persista informações que são fundamentais para o aplicativo fora do código quanto crie perfis que armazenem as preferências de usuários individuais.

Vamos ao exemplo! 😉

Neste exemplo vou criar uma Configuração de Usuário em tempo de design, que irá armazenará uma cor da sua preferência para que seja o BackColor de do formulário.

Para criar a Configuração de Usuário dê um clique com o botão direito do mouse em seu projeto, escolha a opção “Properties” em seguida no Menu esquerdo escolha a opção “Settings”.

1. Na coluna Name digite: “CorDeFundo” (Esse será o nome da Configuração);
2. Na coluna Type escolha a opção: “System.Drawing.Color” (Ou seja será do tipo Color);
3. Na coluna Scope escolha a opção: “User” (Será uma Configuração de Escopo de Usuário);
4. Na coluna Value escolha uma cor padrão: Escolhi a cor Gray;

Configuração de Usuário

Uma vez criada a nossa Configuração de Usuário em tempo de Design, adicione um componente ColorDialog ao formulário e um Botão.

E faça a seguinte alteração no Construtor e no Click do Botão:

using System;
using System.Windows.Forms;

namespace ConfiguracoesDeUsuario
{
    public partial class Form1 : Form
    {
        //Construtor do formulário
        public Form1()
        {
            InitializeComponent();
            //Seto a cor definida pelo usuário
            this.BackColor = Properties.Settings.Default.CorDeFundo;
        }
        //Evento Click do botão
        private void btnEscolhaCor_Click(object sender, EventArgs e)
        {
            //Se o resultado do dialogo com o colorDialog1
            //for Ok
            if (colorDialog1.ShowDialog() == DialogResult.OK)
            {
                //seto a configuração de usuário
                //com a cor escolhida
                Properties.Settings.Default.CorDeFundo = colorDialog1.Color;
                //Salvo a alteração
                Properties.Settings.Default.Save();
                //Atualizo a cor do formulário
                //com a alteração feita Configuração de usuário
                this.BackColor = Properties.Settings.Default.CorDeFundo;
            }
        }
    }
}

Desta maneira é mantido a opção de cor da preferência do usuário, lembrando que este recurso pode ser utilizado para manter diversos tipos de informação pertinente a aplicação como por exemplo String de Conexão.

O download do exemplo pode ser feito aqui!!!

E isso ai e até a próxima!!!

Inserindo itens do DataGridView para o Banco de Dados

E ai galera!

Em minhas participações e contribuições nos fóruns da MSDN uma dúvida muito comum é:  como enviar os dados inseridos em um DataGridView  para o Banco de Dados, tendo isto em mente criei este post com um exemplo bem simples.

No exemplo os dados são inseridos em um DataGridView e no Click de um botão percorro os itens e persisto na Base de Dados SqlCompact e em um segundo DataGridView exibo os dados persistidos segue a tela com os componentes visuais:

Segue abaixo o Código cs do formulário com todas as operações, o mesmo está todo comentado!

using System;
using System.Data.SqlServerCe;
using System.Windows.Forms;

namespace DataGridViewParaBD
{
    public partial class Form1 : Form
    {
        public Form1()
        {
            InitializeComponent();
        }

        private void Form1_Load(object sender, EventArgs e)
        {
            CarregaGrid();
            //informo quantas colunas
            //o dgvClientes térá
            dgvClientes.ColumnCount = 3;

            //Informo os nomes das colunas do dgvClientes
            dgvClientes.Columns[0].Name = "Nome";
            dgvClientes.Columns[1].Name = "E-mail";
            dgvClientes.Columns[2].Name = "Telefone";
        }

        //Clique do botão adicionar
        //insiro os itens no dgvclientes
        private void btnAdicionar_Click(object sender, EventArgs e)
        {
            dgvClientes.Rows.Add(txtNome.Text, txtEmail.Text, txtTelefone.Text);
            //limpo os controles
            txtNome.Text = String.Empty;
            txtEmail.Text = String.Empty;
            txtTelefone.Text = String.Empty;
        }

        //Método para Inserir que
        private void Inserir()
        {
            //Instância da conexão onde passo a
            //ConnectionString
            var conn = new SqlCeConnection(@"Data Source=|DataDirectory|\Exemplo.sdf");
            //sql que será executado na tabela cliente
            var sql = "INSERT INTO Cliente (Nome, Email, Telefone) " +
                      "VALUES (@Nome, @Email, @Telefone)";
            //instância do comando onde passo
            //o sql e a conexão como parâmetro
            var cmd = new SqlCeCommand(sql, conn);
            //abro a conexão
            conn.Open();

            //percorro o DataGridView
            for (int i = 0; i < dgvClientes.Rows.Count - 1; i++)
            {
                //limpo os parâmetros
                cmd.Parameters.Clear();
                //crio os parâmetro do comando
                //e passo as linhas do dgvClientes para eles
                //onde a célula indica a coluna do dgv
                cmd.Parameters.AddWithValue("@Nome",
                    dgvClientes.Rows[i].Cells[0].Value);
                cmd.Parameters.AddWithValue("@Email",
                    dgvClientes.Rows[i].Cells[1].Value);
                cmd.Parameters.AddWithValue("@Telefone",
                    dgvClientes.Rows[i].Cells[2].Value);
                //executo o comando
                cmd.ExecuteNonQuery();
            }
            //Fecho conexão
            conn.Close();
        }

        //cçlique do botão Gravar
        private void btnGravarNoBD_Click(object sender, EventArgs e)
        {
            //Chamo o método
            Inserir();
            CarregaGrid();
            //limpo as linhas no DataGridView
            dgvClientes.Rows.Clear();
        }

        //Método para carregar o dataGridView1
        //com os dados persistidos na base
        private void CarregaGrid()
        {
            //limpo as linhas
            dataGridView1.Rows.Clear();
            //indico o número de colunas
            dataGridView1.ColumnCount = 4;
            //Instância da conexão onde passo a
            //ConnectionString você tem que passar a sua
            var conn = new SqlCeConnection(@"Data Source=|DataDirectory|\Exemplo.sdf");
            //sql que será executado na tabela cliente
            var sql = "SELECT * FROM Cliente";
            //instância do comando onde passo
            //o sql e a conexão como parâmetro
            var cmd = new SqlCeCommand(sql, conn);
            //abro a conexão
            conn.Open();
            //instâncio o leitor
            var leitor = cmd.ExecuteReader();
            //enquanto leitor está lendo
            while (leitor.Read())
            {
                //insiro os dados no dataGridView1
                dataGridView1.Rows.Add(leitor[0].ToString(),
                    leitor[1].ToString(),
                    leitor[2].ToString(),
                    leitor[3].ToString());
            }
            //fecho conexão
            conn.Close();
        }
    }
}

O download do exemplo pode ser feito aqui!!!

É isso ai pessoal é um exemplo bem simples e o mesmo deve melhorado/otimizado, porém pode proporcionar uma ideia de como implementar a rotina!

Até a próxima! 😉

Troca de dados entre DataGridView Windows Forms

Olá pessoal!

Hoje vou mostrar uma maneira fácil e rápida de trocar dados entre DataGridView, o exemplo consiste em pegar os dados exibidos no dgvClientes01 e transferi-los para o dgvClientes02 no exemplo foi criado uma Classe Cliente e criado uma lista do mesmo e setado como fonte de dados do dgvClientes01, apenas para simular uma base de dados e no clique do botão Transferir percorro o dgvClientes01 e passo seu conteúdo para o dgvClientes02.

Segue abaixo o exemplo todo comentado:

using System;
using System.Collections.Generic;
using System.Windows.Forms;

namespace TrocandoDadosEntreDataGridView
{
    public partial class Form1 : Form
    {
        public Form1()
        {
            InitializeComponent();
        }

        //Classe Cliente e suas propriedades
        class Cliente
        {
            public int Codigo { get; set; }
            public string Nome { get; set; }
            public string Email { get; set; }
        }

        private void Form1_Load(object sender, EventArgs e)
        {
            //list de Cliente para simular
            //uma base de dados
            var lista = new List<Cliente>()
                            {
                                new Cliente() {Codigo = 1, Nome = "Pablo",
                                    Email = "pablo@hotmail.com"},
                                new Cliente() {Codigo = 2, Nome = "Maria",
                                    Email = "maria@hotmail.com"},
                                new Cliente() {Codigo = 3, Nome = "João",
                                    Email = "joao@hotmail.com"}
                            };
            //Carrego o dgvClientes01 com o list criado
            dgvClientes01.DataSource = lista;
        }

        //Evento click do botão transferir
        private void btnTransferir_Click(object sender, EventArgs e)
        {
            //informo a quantidade de colunas que o dgvClientes02
            //irá possuir
            dgvClientes02.ColumnCount = 3;

            //Nomeio as colunas
            dgvClientes02.Columns[0].Name = "Codigo";
            dgvClientes02.Columns[1].Name = "Nome";
            dgvClientes02.Columns[2].Name = "Email";

            //percorro o dgvClientes01
            for (int i = 0; i < dgvClientes01.Rows.Count; i++)
            {
                //Adiciono as linhas no dgvClientes02
                dgvClientes02.Rows.Add(dgvClientes01.Rows[i].Cells[0].Value,
                    dgvClientes01.Rows[i].Cells[1].Value,
                    dgvClientes01.Rows[i].Cells[2].Value);
            }
        }
    }
}

O download do exemplo está disponível aqui!!!

Abraços e até a próxima!