Desenvolvimento Código Aberto

Assim como o famoso framework Rails o framework ASP.NET MVC utiliza Helpers para criar elementos. Os auxiliares HTML são usados para modificar HTML. Sobretudo auxiliares HTML são mais leves. Ao contrário dos controles de formulário (Web Forms), um auxiliar HTML não tem um modelo de evento. O MVC inclui helpers padrão para os tipos mais comuns de elementos HTML, como links em HTML e elementos de formulário HTML. Também como o Rails o ASP.NET MVC possibilita que você use Scaffolding para criar automaticamente seus HTML Helpers.

Scaffolding é uma técnica apoiada por alguns frameworks MVC, nos quais o programador pode especificar a forma como o banco de dados de aplicativo pode ser usado. O compilador ou estrutura usa essa especificação, em conjunto com modelos de código pré-definido, para gerar o código final que o aplicativo podem usar para criar, ler, atualizar e excluir entradas de banco de dados, tratar eficazmente os modelos como um “Scaffolding” sobre o qual construir uma aplicação mais poderosa.

Scaffolding é uma evolução de geradores de código de banco de dados de ambientes de desenvolvimento anteriores, como CASE Gerador da Oracle, e muitos outros produtos de desenvolvimento de software 4GL cliente-servidor.

O Scaffolding se tornou popular pelo framework Ruby on Rails. Foi adaptado para outras estruturas de software, incluindo a Plataforma  OutSystems Platform, Express Framework, Play! Framework, Django, MonoRail, Symfony, Laravel, CodeIgniter, Yii, CakePHP, Model-Glue, PRADO, Grails, Catalyst, Seam Framework, Spring Roo, ASP.NET Dynamic Data e ASP.NET MVC Framework’s Metadata Template Helpers.

Os HTML Helpers pertencem a classe HtmlHelper e suporta a renderização de controles HTML em uma exibição.

HtmlHelper: https://msdn.microsoft.com/pt-br/library/system.web.mvc.htmlhelper(v=vs.118).aspx

Usando HTML Helper através de Scaffolding

1 – Crie um projeto ASP.NET MVC utilizando o template padrão. Crie um novo controlador, um modelo e uma View de acordo com os exemplos anteriores, caso não os tenha utilizado acesse o link a seguir:

Controlador, modelo e visão base do exemplo: Razor Templates

2 – Após utilizar com sucesso o exemplo acima, você pode ver que o Scaffolding de lista nos retornou um controlador pronto, para as operações básicas de um banco de dados. No entanto precisamos criar as visões para que possamos utilizar cada operação. Clique com o botão direito na ação de edição e adicione uma nova visão:

3 – Preencha os dados para o modelo, o Scaffolding de edição e a classe de contexto de dados:

4 – Como você pode ver o código com os HTML Helpers foram criados automaticamente para você, os Helpers criaram os elementos de edição para os registros guardados dentro de nossa lista e o botão para que possamos utilizar a ação de alteração dos dados:

5 – Agora você precisa preencher o código em suas ações de edição no controlador. Você pode perceber que existem dois métodos de edição no controlador. O primeiro utiliza o método GET que é responsável por ler os dados e alimenta-los nos elementos HTML. O segundo utiliza o método POST e é responsável por enviar os dados para que sejam alterados:

6 – Para acionar o método de edição de dados POST, você pode alterar os dados e envia-los:

7 – Assim que você postar os dados para alteração você pode ver que eles foram alterados em nossa coleção e exibidos na visão de lista:

Exemplo:

Neste exemplo utilizamos o template padrão MVC e criamos um controlador, um modelo, uma visão de lista e uma visão de edição utilizando elementos HTML através de HTML Helpers.

C#

Controlador

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.Mvc;
using WebApplication1.Models;

namespace WebApplication1.Controllers
{
    public class CursosController : Controller
    {
        // GET: Cursos
        public ActionResult Index()
        {
            var modelo =
                from r in _cursos
                orderby r.Id
                select r;

            return View(modelo);
        }

        // GET: Cursos/Details/5
        public ActionResult Details(int id)
        {
            return View();
        }

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

        // POST: Cursos/Create
        [HttpPost]
        public ActionResult Create(FormCollection collection)
        {
            try
            {
                // TODO: Add insert logic here

                return RedirectToAction("Index");
            }
            catch
            {
                return View();
            }
        }

        // GET: Cursos/Edit/5
        public ActionResult Edit(int id)
        {

            // Recebe identificador do item da coleção
            var modelo = _cursos.Single(r => r.Id == id);

            // Adiciona modelo à visão
            return View(modelo);
        }

        // POST: Cursos/Edit/5
        [HttpPost]
        public ActionResult Edit(int id, FormCollection collection)
        {
            // Recebe identificador do item da coleção
            var modelo = _cursos.Single(r => r.Id == id);

            // Ainda não estamos utilizando um banco de dados
            // Então apenas vamos alterar o item da coleção
            if (TryUpdateModel(modelo))
            {
                // Caso bem sucedido redireciona para a lista
                return RedirectToAction("Index");
            }

            // retorna modelo
            return View(modelo);

        }

        // GET: Cursos/Delete/5
        public ActionResult Delete(int id)
        {
            return View();
        }

        // POST: Cursos/Delete/5
        [HttpPost]
        public ActionResult Delete(int id, FormCollection collection)
        {
            try
            {
                // TODO: Add delete logic here

                return RedirectToAction("Index");
            }
            catch
            {
                return View();
            }
        }

        // Lista estatica enquanto ainda não utilizamos banco de dados
        // Lista alimenta os dados para nossa pagina

        static List<CursosModelo> _cursos = new List<CursosModelo>
        {
            new CursosModelo {
                Id =1,
                Curso = "ASP.NET MVC",
                Linguagem = "C#",
                Dia = "Segunda",
                hora = "8:00"
            },

            new CursosModelo {
                Id =2,
                Curso = "Web Dynpro MVC",
                Linguagem = "ABAP",
                Dia = "Terça",
                hora = "8:00"
            },

            new CursosModelo {
                Id =3,
                Curso = "Ruby on Rail",
                Linguagem = "Ruby",
                Dia = "Quarta",
                hora = "8:00"
            },

            new CursosModelo {
                Id =4,
                Curso = "Django",
                Linguagem = "Python",
                Dia = "Quinta",
                hora = "8:00"
            },

            new CursosModelo {
                Id =1,
                Curso = "Java EE MVC",
                Linguagem = "Java",
                Dia = "Sexta",
                hora = "8:00"
            }
        };

    }
}

Visão

@model WebApplication1.Models.CursosModelo

@{
    ViewBag.Title = "Edit";
}

<h2>Edit</h2>

@using (Html.BeginForm())
{
    @Html.AntiForgeryToken()

    <div class="form-horizontal">
        <h4>CursosModelo</h4>
        <hr />
        @Html.ValidationSummary(true, "", new { @class = "text-danger" })
        @Html.HiddenFor(model => model.Id)

        <div class="form-group">
            @Html.LabelFor(model => model.Curso, htmlAttributes: new { @class = "control-label col-md-2" })
            <div class="col-md-10">
                @Html.EditorFor(model => model.Curso, new { htmlAttributes = new { @class = "form-control" } })
                @Html.ValidationMessageFor(model => model.Curso, "", new { @class = "text-danger" })
            </div>
        </div>

        <div class="form-group">
            @Html.LabelFor(model => model.Linguagem, htmlAttributes: new { @class = "control-label col-md-2" })
            <div class="col-md-10">
                @Html.EditorFor(model => model.Linguagem, new { htmlAttributes = new { @class = "form-control" } })
                @Html.ValidationMessageFor(model => model.Linguagem, "", new { @class = "text-danger" })
            </div>
        </div>

        <div class="form-group">
            @Html.LabelFor(model => model.Dia, htmlAttributes: new { @class = "control-label col-md-2" })
            <div class="col-md-10">
                @Html.EditorFor(model => model.Dia, new { htmlAttributes = new { @class = "form-control" } })
                @Html.ValidationMessageFor(model => model.Dia, "", new { @class = "text-danger" })
            </div>
        </div>

        <div class="form-group">
            @Html.LabelFor(model => model.hora, htmlAttributes: new { @class = "control-label col-md-2" })
            <div class="col-md-10">
                @Html.EditorFor(model => model.hora, new { htmlAttributes = new { @class = "form-control" } })
                @Html.ValidationMessageFor(model => model.hora, "", new { @class = "text-danger" })
            </div>
        </div>

        <div class="form-group">
            <div class="col-md-offset-2 col-md-10">
                <input type="submit" value="Save" class="btn btn-default" />
            </div>
        </div>
    </div>
}

<div>
    @Html.ActionLink("Back to List", "Index")
</div>

@section Scripts {
    @Scripts.Render("~/bundles/jqueryval")
}