Arquivo da categoria: Asp.Net

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

Paginando Gridview em Asp.net C#

Olá pessoal!

Este é o primeiro de uma série de tutoriais para iniciantes em desenvolvimento que estarei disponibilizando, espero que compreendam que este é o primeiro que faço, portanto estou meio “cru” ainda, mais acredito que com a prática irei melhorar! 😉

Este é um tutorial que demonstra uma maneira simples e fácil de se paginar um Gridview em Asp.net C#, claro que é apenas um exemplo e o mesmo deve ser melhorado e otimizado!

Segue o link para o Download do Projeto.

É isso ai pessoal espero que tenham gostado até a próxima!!!