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:

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".

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.

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!

Anúncios

Curso Técnico em Informática

Informativo

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

 

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:

Tela do exemplo.

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!