Criação de um aplicativo do MVC 3 com Razor e JavaScript não obstrusivoCreating a MVC 3 Application with Razor and Unobtrusive JavaScript

pela Microsoftby Microsoft

O aplicativo web de amostra de lista de usuário demonstra o quão simples é criar ASP.NET aplicativos MVC 3 usando o mecanismo razor view.The User List sample web application demonstrates how simple it is to create ASP.NET MVC 3 applications using the Razor view engine. O aplicativo de exemplo mostra como usar o novo mecanismo razor view com ASP.NET mvc versão 3 e Visual Studio 2010 para criar um site fictício da Lista de Usuários que inclui funcionalidades como criação, exibição, edição e exclusão de usuários.The sample application shows how to use the new Razor view engine with ASP.NET MVC version 3 and Visual Studio 2010 to create a fictional User List website that includes functionality such as creating, displaying, editing, and deleting users.

Este tutorial descreve as etapas que foram tomadas para construir a amostra da Lista de Usuários ASP.NET aplicativo MVC 3.This tutorial describes the steps that were taken in order to build the User List sample ASP.NET MVC 3 application. Um projeto do Visual Studio com código fonte C# e VB está disponível para acompanhar este tópico: Download.A Visual Studio project with C# and VB source code is available to accompany this topic: Download. Se você tiver dúvidas sobre este tutorial, por favor, poste-as no fórum MVC.If you have questions about this tutorial, please post them to the MVC forum.

Visão geralOverview

O aplicativo que você estará construindo é um site de lista de usuários simples.The application you'll be building is a simple user list website. Os usuários podem inserir, visualizar e atualizar as informações do usuário.Users can enter, view, and update user information.

Local da amostra

Você pode baixar o projeto vb e c# concluído aqui.You can download the VB and C# completed project here.

Criando o Aplicativo webCreating the Web Application

Para iniciar o tutorial, abra o Visual Studio 2010 e crie um novo projeto usando o modelo de aplicativo web ASP.NET MVC 3.To start the tutorial, open Visual Studio 2010 and create a new project using the ASP.NET MVC 3 Web Application template. Nomeie "o aplicativo"Mvc3Razor .Name the application "Mvc3Razor".

Novo projeto MVC 3New MVC 3 project

Na caixa de diálogo Projeto MVC 3 do Novo ASP.NET, selecione Aplicativo da Internet, selecione o mecanismo de exibição de Navalha e clique em OK.In the New ASP.NET MVC 3 Project dialog, select Internet Application, select the Razor view engine, and then click OK.

Diálogo do Projeto MVC 3 do novo ASP.NET

Neste tutorial você não estará usando o provedor de associação ASP.NET, para que você possa excluir todos os arquivos associados ao logon e associação.In this tutorial you will not be using the ASP.NET membership provider, so you can delete all the files associated with logon and membership. No Solution Explorer, remova os seguintes arquivos e diretórios:In Solution Explorer, remove the following files and directories:

  • Controladores\AccountControllerControllers\AccountController
  • Modelos\Modelos de contaModels\AccountModels
  • Visualizações_LogOnPartial\compartilhadasViews\Shared\_LogOnPartial
  • Visualizações\Conta (e todos os arquivos neste diretório)Views\Account (and all the files in this directory)

Soln Exp

Edite <div> o logindisplay "" _arquivo Layout.cshtml e substitua a marcação dentro do elemento nomeado com a mensagem Login Desativado .Edit the _Layout.cshtml file and replace the markup inside the <div> element named logindisplay with the message "Login Disabled". O exemplo a seguir mostra a nova marcação:The following example shows the new markup:

<div id="logindisplay">
  Login Disabled
</div>

Adicionando o ModeloAdding the Model

No Solution Explorer, clique com o botão direito do mouse na pasta Modelos, selecione Adicionare clique em Classe.In Solution Explorer, right-click the Models folder, select Add, and then click Class.

Nova classe Mdl do usuário

Nome da classe UserModel.Name the class UserModel. Substitua o conteúdo do arquivo UserModel pelo seguinte código:Replace the contents of the UserModel file with the following code:

using System.ComponentModel.DataAnnotations;
using System.Collections.Generic;

namespace Mvc3Razor.Models {
    public class UserModel {

        [Required]
        [StringLength(6, MinimumLength = 3)]
        [Display(Name = "User Name")]
        [RegularExpression(@"(\S)+", ErrorMessage = "White space is not allowed")]
        [ScaffoldColumn(false)]
        public string UserName { get; set; }

        [Required]
        [StringLength(8, MinimumLength = 3)]
        [Display(Name = "First Name")]
        public string FirstName { get; set; }
        [Required]
        [StringLength(9, MinimumLength = 2)]
        [Display(Name = "Last Name")]
        public string LastName { get; set; }
        [Required()]
        public string City { get; set; }

    }

    public class Users {

        public Users() {
            _usrList.Add(new UserModel
            {
                UserName = "BenM",
                FirstName = "Ben",
                LastName = "Miller",
                City = "Seattle"
            });
            _usrList.Add(new UserModel
            {
                UserName = "AnnB",
                FirstName = "Ann",
                LastName = "Beebe",
                City = "Boston"
            });
        }

        public List<UserModel> _usrList = new List<UserModel>();

        public void Update(UserModel umToUpdate) {

            foreach (UserModel um in _usrList) {
                if (um.UserName == umToUpdate.UserName) {
                    _usrList.Remove(um);
                    _usrList.Add(umToUpdate);
                    break;
                }
            }
        }

        public void Create(UserModel umToUpdate) {
            foreach (UserModel um in _usrList) {
                if (um.UserName == umToUpdate.UserName) {
                    throw new System.InvalidOperationException("Duplicat username: " + um.UserName);
                }
            }
            _usrList.Add(umToUpdate);
        }

        public void Remove(string usrName) {

            foreach (UserModel um in _usrList) {
                if (um.UserName == usrName) {
                    _usrList.Remove(um);
                    break;
                }
            }
        }

        public  UserModel GetUser(string uid) {
            UserModel usrMdl = null;

            foreach (UserModel um in _usrList)
                if (um.UserName == uid)
                    usrMdl = um;

            return usrMdl;
        }

    }    
}

A UserModel classe representa os usuários.The UserModel class represents users. Cada membro da classe é anotado com o atributo Obrigatório do namespace DataAnnotations.Each member of the class is annotated with the Required attribute from the DataAnnotations namespace. Os atributos no namespace DataAnnotations fornecem validação automática do lado do cliente e do servidor para aplicativos web.The attributes in the DataAnnotations namespace provide automatic client- and server-side validation for web applications.

Abra HomeController a classe using e adicione uma diretiva UserModel para Users que você possa acessar as aulas e as classes:Open the HomeController class and add a using directive so that you can access the UserModel and Users classes:

using Mvc3Razor.Models;

Logo após HomeController a declaração, adicione o Users seguinte comentário e a referência a uma classe:Just after the HomeController declaration, add the following comment and the reference to a Users class:

public class HomeController : Controller {

// The __usrs class is replacement for a real data access strategy.
private static Users _usrs = new Users();

A Users classe é um armazenamento de dados simplificado na memória que você usará neste tutorial.The Users class is a simplified, in-memory data store that you'll use in this tutorial. Em um aplicativo real, você usaria um banco de dados para armazenar informações do usuário.In a real application you would use a database to store user information. As primeiras linhas HomeController do arquivo são mostradas no seguinte exemplo:The first few lines of the HomeController file are shown in the following example:

using System.Web.Mvc;
using Mvc3Razor.Models;

namespace Mvc3Razor.Controllers {
       
    public class HomeController : Controller {

        // The __usrs class is replacement for a real data access strategy.
        private static Users _usrs = new Users();

Construa o aplicativo para que o modelo do usuário esteja disponível para o assistente de andaimes na próxima etapa.Build the application so that the user model will be available to the scaffolding wizard in the next step.

Criando a exibição padrãoCreating the Default View

O próximo passo é adicionar um método de ação e exibição para exibir os usuários.The next step is to add an action method and view to display the users.

Exclua o arquivo Views\Home\Index existente.Delete the existing Views\Home\Index file. Você criará um novo arquivo Index para exibir os usuários.You will create a new Index file to display the users.

Na HomeController classe, substitua o Index conteúdo do método pelo seguinte código:In the HomeController class, replace the contents of the Index method with the following code:

return View(_usrs._usrList);

Clique com o Index botão direito do mouse dentro do método e clique em Adicionar exibição.Right-click inside the Index method and then click Add View.

Adicionar visualização

Selecione a Opção Criar uma opção de exibição fortemente digitada.Select the Create a strongly-typed view option. Para exibir classe de dados, selecione Mvc3Razor.Models.UserModel.For View data class, select Mvc3Razor.Models.UserModel. (Se você não ver Mvc3Razor.Models.UserModel na caixa de classe de dados Exibir, você precisa construir o projeto.) Certifique-se de que o motor de exibição está definido como Razor.(If you don't see Mvc3Razor.Models.UserModel in the View data class box, you need to build the project.) Make sure that the view engine is set to Razor. Defina exibir conteúdo para Lista e clique em Adicionar.Set View content to List and then click Add.

Adicionar visualização de índice

A nova exibição desarma automaticamente os dados do Index usuário que são passados para a exibição.The new view automatically scaffolds the user data that's passed to the Index view. Examine o arquivo Visualizações\Home\Index recém-gerado.Examine the newly generated Views\Home\Index file. Os links Criar novo, editar, editare excluir não funcionam, mas o resto da página está funcional.The Create New, Edit, Details, and Delete links don't work, but the rest of the page is functional. Execute a página.Run the page. Você vê uma lista de usuários.You see a list of users.

Página do Índice

Abra o arquivo Index.cshtml e ActionLink substitua a marcação para Editar, Detalhese Excluir com o seguinte código:Open the Index.cshtml file and replace the ActionLink markup for Edit, Details, and Delete with the following code:

@Html.ActionLink("Edit", "Edit", new {  id=item.UserName  }) |
@Html.ActionLink("Details", "Details", new {  id=item.UserName  }) |
@Html.ActionLink("Delete", "Delete", new {  id=item.UserName  })

O nome de usuário é usado como ID para encontrar o registro selecionado nos links Editar, Detalhese Excluir.The user name is used as the ID to find the selected record in the Edit, Details, and Delete links.

Criando a exibição de detalhesCreating the Details View

O próximo passo é Details adicionar um método de ação e visualização para exibir os detalhes do usuário.The next step is to add a Details action method and view in order to display user details.

Detalhes

Adicione o Details seguinte método ao controlador doméstico:Add the following Details method to the home controller:

public ViewResult Details(string id) {
    return View(_usrs.GetUser(id));
}

Clique com o Details botão direito do mouse dentro do método e selecione Adicionar exibição.Right-click inside the Details method and then select Add View. Verifique se a caixa de classe de dados Exibir contém Mvc3Razor.Models.UserModel.Verify that the View data class box contains Mvc3Razor.Models.UserModel. Defina o conteúdo de exibição para Detalhes e clique em Adicionar.Set View content to Details and then click Add.

Adicionar visualização de detalhes

Execute o aplicativo e selecione um link de detalhes.Run the application and select a details link. O andaime automático mostra cada propriedade no modelo.The automatic scaffolding shows each property in the model.

Detalhes

Criando a exibição editarCreating the Edit View

Adicione o Edit seguinte método ao controlador doméstico.Add the following Edit method to the home controller.

public ViewResult Edit(string id) {
    return View(_usrs.GetUser(id));
}

[HttpPost]
public ViewResult Edit(UserModel um) {

    if (!TryUpdateModel(um)) {
        ViewBag.updateError = "Update Failure";
        return View(um);
    }

    // ToDo: add persistent to DB.
    _usrs.Update(um);
    return View("Details", um);
}

Adicione uma exibição como nas etapas anteriores, mas defina exibir conteúdo para Editar.Add a view as in the previous steps, but set View content to Edit.

Adicionar exibição editar

Execute o aplicativo e edite o primeiro e sobrenome de um dos usuários.Run the application and edit the first and last name of one of the users. Se você DataAnnotation violar quaisquer restrições que UserModel tenham sido aplicadas à classe, ao enviar o formulário, verá erros de validação que são produzidos pelo código do servidor.If you violate any DataAnnotation constraints that have been applied to the UserModel class, when you submit the form, you will see validation errors that are produced by server code. Por exemplo, se você "alterar" "o"primeiro nome Ann para A, quando você enviar o formulário, o seguinte erro será exibido no formulário:For example, if you change the first name "Ann" to "A", when you submit the form, the following error is displayed on the form:

The field First Name must be a string with a minimum length of 3 and a maximum length of 8.

Neste tutorial, você está tratando o nome de usuário como a chave principal.In this tutorial, you're treating the user name as the primary key. Portanto, a propriedade do nome do usuário não pode ser alterada.Therefore, the user name property cannot be changed. No arquivo Edit.cshtml, logo Html.BeginForm após a declaração, defina o nome de usuário como um campo oculto.In the Edit.cshtml file, just after the Html.BeginForm statement, set the user name to be a hidden field. Isso faz com que a propriedade seja aprovada no modelo.This causes the property to be passed in the model. O fragmento de código a Hidden seguir mostra a colocação da declaração:The following code fragment shows the placement of the Hidden statement:

<h2>Edit</h2>
    @using (Html.BeginForm()) {
@Html.Hidden("UserName", Model.UserName)

Substitua TextBoxFor ValidationMessageFor a marcação e a DisplayFor marcação para o nome de usuário por uma chamada.Replace the TextBoxFor and ValidationMessageFor markup for the user name with a DisplayFor call. O DisplayFor método exibe a propriedade como um elemento somente leitura.The DisplayFor method displays the property as a read-only element. O exemplo a seguir mostra a marcação concluída.The following example shows the completed markup. O TextBoxFor original ValidationMessageFor e as chamadas são comentados com os@* *@caracteres de início de navalha e comentários finais ( )The original TextBoxFor and ValidationMessageFor calls are commented out with the Razor begin-comment and end-comment characters (@* *@)

<div class="editor-label">
  @Html.LabelFor(model => model.UserName)
</div>

<div class="editor-field">
@*
  @Html.TextBoxFor(model => model.UserName)
  @Html.ValidationMessageFor(model => model.UserName)
*@
@Html.DisplayFor(model => model.UserName)
</div>

Habilitando a validação do lado do clienteEnabling Client-Side Validation

Para habilitar a validação do lado do cliente em ASP.NET MVC 3, você deve definir dois sinalizadores e deve incluir três arquivos JavaScript.To enable client-side validation in ASP.NET MVC 3, you must set two flags and you must include three JavaScript files.

Abra o arquivo Web.config do aplicativo.Open the application's Web.config file. Verifique that ClientValidationEnabled UnobtrusiveJavaScriptEnabled e esteja definido como verdadeiro nas configurações do aplicativo.Verify that ClientValidationEnabled and UnobtrusiveJavaScriptEnabled are set to true in the application settings. O fragmento a seguir do arquivo root Web.config mostra as configurações corretas:The following fragment from the root Web.config file shows the correct settings:

<appSettings>
  <add key="ClientValidationEnabled" value="true"/> 
  <add key="UnobtrusiveJavaScriptEnabled" value="true"/> 
 </appSettings>

A UnobtrusiveJavaScriptEnabled configuração para true permite a validação discreta do Ajax e do cliente discreto.Setting UnobtrusiveJavaScriptEnabled to true enables unobtrusive Ajax and unobtrusive client validation. Quando você usa validação discreta, as regras de validação são transformadas em atributos HTML5.When you use unobtrusive validation, the validation rules are turned into HTML5 attributes. Os nomes de atributos HTML5 podem consistir apenas em letras minúsculas, números e traços.HTML5 attribute names can consist of only lowercase letters, numbers, and dashes.

A ClientValidationEnabled configuração para true permite a validação do lado do cliente.Setting ClientValidationEnabled to true enables client-side validation. Ao definir essas chaves no arquivo Web.config do aplicativo, você habilita a validação do cliente e o JavaScript discreto para todo o aplicativo.By setting these keys in the application Web.config file, you enable client validation and unobtrusive JavaScript for the entire application. Você também pode habilitar ou desativar essas configurações em visualizações individuais ou em métodos de controlador usando o seguinte código:You can also enable or disable these settings in individual views or in controller methods using the following code:

HtmlHelper.ClientValidationEnabled = true; 
HtmlHelper.UnobtrusiveJavaScriptEnabled = true;

Você também precisa incluir vários arquivos JavaScript na exibição renderizada.You also need to include several JavaScript files in the rendered view. Uma maneira fácil de incluir o JavaScript em todas as exibições é adicioná-los ao arquivo Views\Shared\_Layout.cshtml.An easy way to include the JavaScript in all views is to add them to the Views\Shared\_Layout.cshtml file. Substitua <head> o * _* elemento do arquivo Layout.cshtml pelo seguinte código:Replace the <head> element of the _Layout.cshtml file with the following code:

<head>
  <title>@View.Title</title>
  <link href="@Url.Content("~/Content/Site.css")" rel="stylesheet" type="text/css" />
  <script src="https://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.4.2.min.js"></script>
  <script src="https://ajax.aspnetcdn.com/ajax/jquery.validate/1.7/jquery.validate.min.js"></script>
  <script src="@Url.Content("~/Scripts/jquery.validate.unobtrusive.min.js")" type="text/javascript"></script>
</head>

Os dois primeiros scripts jQuery são hospedados pela Microsoft Ajax Content Delivery Network (CDN).The first two jQuery scripts are hosted by the Microsoft Ajax Content Delivery Network (CDN). Aproveitando o CDN do Microsoft Ajax, você pode melhorar significativamente o desempenho de primeiro hit de seus aplicativos.By taking advantage of the Microsoft Ajax CDN, you can significantly improve the first-hit performance of your applications.

Execute o aplicativo e clique em um link de edição.Run the application and click an edit link. Veja a fonte da página no navegador.View the page's source in the browser. A fonte do navegador mostra data-val muitos atributos do formulário (para validação de dados).The browser source shows many attributes of the form data-val (for data validation). Quando a validação do cliente e o JavaScript discreto são habilitados, os data-val="true" campos de entrada com uma regra de validação do cliente contêm o atributo para desencadear a validação discreta do cliente.When client validation and unobtrusive JavaScript is enabled, input fields with a client-validation rule contain the data-val="true" attribute to trigger unobtrusive client validation. Por exemplo, City o campo no modelo foi decorado com o atributo Obrigatório, o que resulta no HTML mostrado no exemplo a seguir:For example, the City field in the model was decorated with the Required attribute, which results in the HTML shown in the following example:

<div class="editor-field">
  <input data-val="true" data-val-required="The City field is required." id="City" name="City" type="text" value="Seattle" />
  <span class="field-validation-valid" data-valmsg-for="City" data-valmsg-replace="true"></span>
</div>

Para cada regra de validação do cliente, data-val-rulename="message"é adicionado um atributo que tem o formulário .For each client-validation rule, an attribute is added that has the form data-val-rulename="message". Usando City o exemplo de campo mostrado anteriormente, data-val-required a regra "de validação"do cliente necessária gera o atributo e a mensagem O campo Cidade é necessário .Using the City field example shown earlier, the required client-validation rule generates the data-val-required attribute and the message "The City field is required". Execute o aplicativo, edite um dos City usuários e limpe o campo.Run the application, edit one of the users, and clear the City field. Quando você faz a guia para fora do campo, você vê uma mensagem de erro de validação do lado do cliente.When you tab out of the field, you see a client-side validation error message.

Cidade necessária

Da mesma forma, para cada parâmetro na regra de validação do data-val-rulename-paramname=paramvaluecliente, é adicionado um atributo que tem o formulário .Similarly, for each parameter in the client-validation rule, an attribute is added that has the form data-val-rulename-paramname=paramvalue. Por exemplo, FirstName a propriedade é anotada com o atributo StringLength e especifica um comprimento mínimo de 3 e um comprimento máximo de 8.For example, the FirstName property is annotated with the StringLength attribute and specifies a minimum length of 3 and a maximum length of 8. A regra de length validação de max dados nomeada tem o nome do parâmetro e o valor do parâmetro 8.The data validation rule named length has the parameter name max and the parameter value 8. A seguir, mostra o HTML FirstName gerado para o campo quando você edita um dos usuários:The following shows the HTML that is generated for the FirstName field when you edit one of the users:

<input data-val="true"         
       data-val-length="The field First Name must be a string with a minimum length of 3 and a maximum length of 8." 
       data-val-length-max="8" 
       data-val-length-min="3" 
       data-val-required="The First Name field is required." 
       id="FirstName" 
       name="FirstName" 
       type="text" 
       value="Ben" />

Para obter mais informações sobre validação de clientes discretas, consulte a entrada Validação de ClienteS Discretas em ASP.NET MVC 3 no blog de Brad Wilson.For more information about unobtrusive client validation, see the entry Unobtrusive Client Validation in ASP.NET MVC 3 in Brad Wilson's blog.

Note

Em ASP.NET MVC 3 Beta, às vezes você precisa enviar o formulário para iniciar a validação do lado do cliente.In ASP.NET MVC 3 Beta, you sometimes need to submit the form in order to start client-side validation. Isso pode ser alterado para a versão final.This might be changed for the final release.

Criando a visualização de criaçãoCreating the Create View

O próximo passo é Create adicionar um método de ação e visualização para permitir que o usuário crie um novo usuário.The next step is to add a Create action method and view in order to enable the user to create a new user. Adicione o Create seguinte método ao controlador doméstico:Add the following Create method to the home controller:

public ViewResult Create() {
    return View(new UserModel());
}

[HttpPost]
public ViewResult Create(UserModel um) {

    if (!TryUpdateModel(um)) {
        ViewBag.updateError = "Create Failure";
        return View(um);
    }

    // ToDo: add persistent to DB.
    _usrs.Create(um);
    return View("Details", um);
}

Adicione uma exibição como nas etapas anteriores, mas defina exibir conteúdo para Criar.Add a view as in the previous steps, but set View content to Create.

Criar exibição

Execute o aplicativo, selecione o link Criar e adicione um novo usuário.Run the application, select the Create link, and add a new user. O Create método aproveita automaticamente a validação do lado do cliente e do lado do servidor.The Create method automatically takes advantage of client-side and server-side validation. Tente inserir um nome de usuário que "contenha espaço em branco, como Ben X".Try to enter a user name that contains white space, such as "Ben X". Quando você faz a guia para fora do campoWhite space is not allowednome de usuário, um erro de validação do lado do cliente () é exibido.When you tab out of the user name field, a client-side validation error (White space is not allowed) is displayed.

Adicionar o método ExcluirAdd the Delete method

Para completar o tutorial, Delete adicione o seguinte método ao controlador doméstico:To complete the tutorial, add the following Delete method to the home controller:

public ViewResult Delete(string id) {
    return View(_usrs.GetUser(id));
}

[HttpPost]
public RedirectToRouteResult Delete(string id, FormCollection collection) {
    _usrs.Remove(id);
    return RedirectToAction("Index");
}

Adicionar Delete uma exibição como nas etapas anteriores, definindo Exibir conteúdo para Excluir.Add a Delete view as in the previous steps, setting View content to Delete.

Excluir Exibição

Agora você tem um aplicativo simples, mas totalmente funcional ASP.NET MVC 3 com validação.You now have a simple but fully functional ASP.NET MVC 3 application with validation.