Compartilhar via


Apresentando Páginas da Web do ASP.NET – Criando um layout consistente

por Tom FitzMacken

Este tutorial mostra como usar layouts para criar uma aparência consistente para as páginas em um site que usa Páginas da Web do ASP.NET. Ele pressupõe que você concluiu a série por meio da exclusão de dados de banco de dados em Páginas da Web do ASP.NET.

O que você aprenderá:

  • O que é uma página de layout.
  • Como combinar páginas de layout com conteúdo dinâmico.
  • Como passar valores para uma página de layout.

Sobre layouts

As páginas que você criou até agora foram todas páginas autônomas e completas. Todos eles pertencem ao mesmo site, mas não têm elementos comuns ou uma aparência padrão.

A maioria dos sites tem uma aparência e um layout consistentes. Por exemplo, se você acessar o site Microsoft.com/web e olhar ao redor, verá que todas as páginas seguem um layout geral e a um tema visual:

Microsoft.com/web página do site mostrando o layout do cabeçalho, da área de navegação, da área de conteúdo e do rodapé

Uma maneira ineficiente de criar esse layout seria definir um cabeçalho, barra de navegação e rodapé separadamente em cada uma de suas páginas. Você estaria duplicando a mesma marcação todas as vezes. Se você quisesse alterar algo (por exemplo, atualizar o rodapé), teria que alterar cada página separadamente.

É aí que entram as páginas de layout . Em Páginas da Web do ASP.NET, você pode definir uma página de layout que fornece um contêiner geral para páginas em seu site. Por exemplo, a página de layout pode conter o cabeçalho, a área de navegação e o rodapé. A página de layout inclui um espaço reservado para onde o conteúdo do main vai.

Em seguida, você pode definir páginas de conteúdo individuais que contêm a marcação e o código somente para essa página. As páginas de conteúdo não precisam ser páginas HTML completas; eles nem precisam ter um <body> elemento . Eles também têm uma linha de código que informa ASP.NET em qual página de layout você deseja exibir o conteúdo. Aqui está uma imagem que mostra aproximadamente como essa relação funciona:

Diagrama conceitual que mostra duas páginas de conteúdo e uma página de layout na qual elas se encaixam

Essa interação é fácil de entender quando você a vê em ação. Neste tutorial, você alterará suas páginas de filmes para usar um layout.

Adicionando uma página de layout

Você começará criando uma página de layout que define um layout de página típico com um cabeçalho, rodapé e uma área para o conteúdo main. No site WebPagesMovies, adicione uma página CSHTML chamada _Layout.cshtml.

O caractere de sublinhado à esquerda ( _ ) é significativo. Se o nome de uma página começar com um sublinhado, ASP.NET não enviará diretamente essa página para o navegador. Essa convenção permite definir páginas que são necessárias para seu site, mas que os usuários não devem ser capazes de solicitar diretamente.

Substitua o conteúdo na página pelo seguinte:

<!DOCTYPE html>
<html>
  <head>
    <title>My Movie Site</title>
    <link href="~/Styles/Movies.css" rel="stylesheet" type="text/css" />
  </head>
  <body>
    <div id="container">
        <div id="header">
          <h1>My Movie Site</h1>
        </div>
        <div id="main">
          @RenderBody()
        </div>
        <div id="footer">
          &copy; @DateTime.Now.Year My Movie Site
        </div>
    </div>
  </body>
</html>

Como você pode ver, essa marcação é apenas HTML que usa elementos <div> para definir três seções na página mais um <div> elemento para manter as três seções. O rodapé contém um pouco de código Razor: @DateTime.Now.Year, que renderizará o ano atual nesse local na página.

Observe que há um link para uma folha de estilos chamada Movies.css. A folha de estilos é onde os detalhes do layout físico dos elementos serão definidos. Você criará isso em um momento.

O único recurso incomum nesta página _Layout.cshtml é a @Render.Body() linha. Esse é o espaço reservado para onde o conteúdo irá quando esse layout for mesclado com outra página.

Adicionando um arquivo .css

A maneira preferencial de definir a disposição real (ou seja, aparência) dos elementos na página é usar regras de CSS (folha de estilos em cascata). Portanto, você criará um arquivo .css que tem as regras para o novo layout.

No WebMatrix, selecione a raiz do seu site. Em seguida, na guia Arquivos da faixa de opções, clique na seta sob o botão Novo e clique em Nova Pasta.

A opção

Nomeie a nova pasta Estilos.

Nomeando a nova pasta 'Estilos'

Dentro da nova pasta Estilos , crie um arquivo chamado Movies.css.

Criando um novo arquivo Movies.css

Substitua o conteúdo do novo arquivo .css pelo seguinte:

html{ height:100%; margin:0; padding:0; }

body {
  height:60%;
  font-family:'Trebuchet MS',  'Arial', 'Helvetica', 'sans-serif';
  font-size:10pt;
  background-color: LightGray;
  line-height:1.6em;
}

h1{ font-size:1.6em; }
h2{ font-size:1.4em; }

#container{
   min-height:100%;
   position:relative;
   left:10%;
}

#header{
  padding:8px;
  width:80%;
  background-color:#4b6c9e;
  color:White;
}

#main{
  width:80%;
  padding: 8px;
  padding-bottom:4em;
  background-color:White;
}

#footer{
  width:80%;
  height:2em;
  padding:8px;
  margin-top:-2em;
  background-color:LightGray;
}

.head { background-color: #E8E8E8; font-weight: bold; color: #FFF; }
.grid th, .grid td { border: 1px solid #C0C0C0; padding: 5px; }
.alt { background-color: #E8E8E8; color: #000; }
.selected {background-color:Yellow;}
span.caption {width:100px;}
span.dataDisplay {font-weight:bold;}

Não falaremos muito sobre essas regras de CSS, exceto para observar duas coisas. Uma delas é que, além de definir fontes e tamanhos, as regras usam o posicionamento absoluto para estabelecer o local do cabeçalho, rodapé e main área de conteúdo. Se você não estiver familiarizado com o posicionamento no CSS, poderá ler o tutorial Posicionamento do CSS no site do W3Schools.

A outra coisa a observar é que, na parte inferior, copiamos as regras de estilo que foram originalmente definidas individualmente no arquivo Movies.cshtml . Essas regras foram usadas no tutorial Introdução à Exibição de Dados usando Páginas da Web do ASP.NET para fazer a WebGrid marcação de renderização do auxiliar que adicionou listras à tabela. (Se você vai usar um arquivo .css para definições de estilo, você pode muito bem colocar as regras de estilo para todo o site nele.)

Atualizando o arquivo de filmes para usar o layout

Agora você pode atualizar os arquivos existentes em seu site para usar o novo layout. Abra o arquivo Movies.cshtml . Na parte superior, como a primeira linha de código, adicione o seguinte:

Layout = "~/_Layout.cshtml";

A página agora começa dessa maneira:

@{
    Layout = "~/_Layout.cshtml";

    var db = Database.Open("WebPagesMovies") ;
    var selectCommand = "SELECT * FROM Movies";
    var searchTerm = "";

    // Etc.

Esta linha de código informa ASP.NET que, quando a página Filmes for executada, ela deverá ser mesclada com o arquivo _Layout.cshtml .

Como o arquivo Movies.cshtml agora usa uma página de layout, você pode remover a marcação da página Movies.cshtml que é cuidada pelo arquivo _Layout.cshtml . Tire as <!DOCTYPE>marcas , <html>e abrindo <body> e fechando. Remova todo <head> o elemento e seu conteúdo, que inclui as regras de estilo para a grade, já que agora você tem essas regras em um arquivo .css . Enquanto estiver nele, altere o elemento existente <h1> para um <h2> elemento; você já tem um <h1> elemento na página de layout. Altere o <h2> texto para "Listar Filmes".

Normalmente, você não teria que fazer esses tipos de alterações em uma página de conteúdo. Ao iniciar seu site com uma página de layout, você cria páginas de conteúdo sem todos esses elementos para começar. Nesse caso, porém, você está convertendo uma página autônoma em uma que usa um layout, portanto, há um pouco de limpeza.

Quando você terminar, a página Movies.cshtml terá a seguinte aparência:

@{
    Layout = "~/_Layout.cshtml";

    var db = Database.Open("WebPagesMovies") ;
    var selectCommand = "SELECT * FROM Movies";
    var searchTerm = "";

    if(!Request.QueryString["searchGenre"].IsEmpty() ) {
        selectCommand = "SELECT * FROM Movies WHERE Genre = @0";
        searchTerm = Request.QueryString["searchGenre"];
    }

    if(!Request.QueryString["searchTitle"].IsEmpty() ) {
      selectCommand = "SELECT * FROM Movies WHERE Title LIKE @0";
      searchTerm = "%" + Request.QueryString["searchTitle"] + "%";
    }

    var selectedData = db.Query(selectCommand, searchTerm);
    var grid = new WebGrid(source: selectedData, defaultSort: "Genre", rowsPerPage:3);
}
  <h2>List Movies</h2>
  <form method="get">
    <div>
      <label for="searchGenre">Genre to look for:</label>
      <input type="text" name="searchGenre"
         value="@Request.QueryString["searchGenre"]" />
      <input type="Submit" value="Search Genre" /><br/>
      (Leave blank to list all movies.)<br/>
    </div>
    <div>
       <label for="SearchTitle">Movie title contains the following:</label>
       <input type="text" name="searchTitle" value="@Request.QueryString["searchTitle"]" />
       <input type="Submit" value="Search Title" /><br/>
    </div>
  </form>
  <div>
    @grid.GetHtml(
        tableStyle: "grid",
        headerStyle: "head",
        alternatingRowStyle: "alt",
        columns: grid.Columns(
            grid.Column(format: @<a href="~/EditMovie?id=@item.ID">Edit</a>),
            grid.Column("Title"),
            grid.Column("Genre"),
            grid.Column("Year"),
            grid.Column(format: @<a href="~/DeleteMovie?id=@item.ID">Delete</a>)
       )
    )
  </div>
  <p><a href="~/AddMovie">Add a movie</a></p>

Testando o layout

Agora você pode ver como é a aparência do layout. No WebMatrix, clique com o botão direito do mouse na página Movies.cshtml e selecione Iniciar no navegador. Quando o navegador exibe a página, ele se parece com esta página:

Página de filmes renderizada usando um layout

ASP.NET mescla o conteúdo da página Movies.cshtml na página _Layout.cshtml exatamente onde o RenderBody método está. E, claro, a página _Layout.cshtml faz referência a um arquivo .css que define a aparência da página.

Atualizando a página AddMovie para usar o layout

O verdadeiro benefício dos layouts é que você pode usá-los para todas as páginas em seu site. Abra a página AddMovie.cshtml .

Você deve se lembrar de que a página AddMovie.cshtml originalmente tinha algumas regras CSS para definir a aparência das mensagens de erro de validação. Como você tem um arquivo .css para seu site agora, pode mover essas regras para o arquivo .css . Remova-os do arquivo AddMovie.cshtml e adicione-os à parte inferior do arquivo Movies.css . Você está movendo as seguintes regras:

.field-validation-error {
  font-weight:bold;
  color:red;
  background-color:yellow;
 }
.validation-summary-errors{
  border:2px dashed red;
  color:red;
  background-color:yellow;
  font-weight:bold;
  margin:12px;
}

Agora faça os mesmos tipos de alterações em AddMovie.cshtml que você fez para Movies.cshtml — adicione Layout="~/_Layout.cshtml; e remova a marcação HTML que agora é desnecessária. Altere o <h1> elemento para <h2>. Quando terminar, a página será semelhante a este exemplo:

@{
    Layout = "~/_Layout.cshtml";
    Validation.RequireField("title", "You must enter a title");
    Validation.RequireField("genre", "Genre is required");
    Validation.RequireField("year", "You haven't entered a year");

    var title = "";
    var genre = "";
    var year = "";

    if(IsPost){
        if(Validation.IsValid()){
            title = Request.Form["title"];
            genre = Request.Form["genre"];
            year = Request.Form["year"];

            var db = Database.Open("WebPagesMovies");
            var insertCommand =
                "INSERT INTO Movies (Title, Genre, Year) Values(@0, @1, @2)";
            db.Execute(insertCommand, title, genre, year);
            Response.Redirect("~/Movies");
        }
    }
}
  <h2>Add a Movie</h2>
    @Html.ValidationSummary()
 <form method="post">
  <fieldset>
    <legend>Movie Information</legend>
    <p><label for="title">Title:</label>
      <input type="text" name="title" value="@Request.Form["title"]" />
      @Html.ValidationMessage("title")
    </p>

    <p><label for="genre">Genre:</label>
      <input type="text" name="genre" value="@Request.Form["genre"]" />
      @Html.ValidationMessage("genre")
    </p>

    <p><label for="year">Year:</label>
      <input type="text" name="year" value="@Request.Form["year"]" />
      @Html.ValidationMessage("year")
    </p>

    <p><input type="submit" name="buttonSubmit" value="Add Movie" /></p>
  </fieldset>
  </form>

Execute a página. Agora ele se parece com esta ilustração:

Página 'Adicionar Filmes' renderizada usando um layout

Você deseja fazer alterações semelhantes às páginas no site – EditMovie.cshtml e DeleteMovie.cshtml. No entanto, antes disso, você pode fazer outra alteração no layout que o torna um pouco mais flexível.

Passando informações de título para a página de layout

A página _Layout.cshtml que você criou tem um <title> elemento definido como "Meu Site de Filme". A maioria dos navegadores exibe o conteúdo desse elemento como o texto em uma guia:

O elemento de título> da <página exibido em uma guia do navegador

Essas informações de título são genéricas. Suponha que você queira que o texto do título seja mais específico para a página atual. (O texto do título também é usado pelos mecanismos de pesquisa para determinar do que se trata sua página.) Você pode passar informações de uma página de conteúdo como Movies.cshtml ou AddMovie.cshtml para a página de layout e, em seguida, usar essas informações para personalizar o que a página de layout renderiza.

Abra a página Movies.cshtml novamente. No código na parte superior, adicione a seguinte linha:

Page.Title = "List Movies";

O Page objeto está disponível em todas as páginas .cshtml e é para essa finalidade, ou seja, compartilhar informações entre uma página e seu layout.

Abra a página _Layout.cshtml . Altere o <title> elemento para que ele se pareça com esta marcação:

<title>@Page.Title</title>

Esse código renderiza o que está na Page.Title propriedade diretamente nesse local na página.

Execute a página Movies.cshtml . Desta vez, a guia do navegador mostra o que você passou como o valor de Page.Title:

Uma guia do navegador mostrando o título criado dinamicamente

Se desejar, exiba a origem da página no navegador. Você pode ver que o <title> elemento é renderizado como <title>List Movies</title>.

Dica

O objeto Page

Um recurso útil de Page é que ele é um objeto dinâmico – a Title propriedade não é um nome fixo ou reservado. Você pode usar qualquer nome para um valor do Page objeto . Por exemplo, você poderia facilmente ter passado o título usando uma propriedade chamada Page.CurrentName ou Page.MyPage. A única restrição é que o nome precisa seguir as regras normais para quais propriedades podem ser nomeadas. (Por exemplo, o nome não pode conter um espaço.)

Você pode passar qualquer número de valores usando o Page objeto . Se você quisesse passar informações de filme para a página de layout, poderia passar valores usando algo como Page.MovieTitle e Page.Genre e Page.MovieYear. (Ou quaisquer outros nomes que você inventou para armazenar as informações.) O único requisito — que provavelmente é óbvio — é que você tenha que usar os mesmos nomes na página de conteúdo e na página de layout.

As informações passadas usando o Page objeto não se limitam apenas ao texto a ser exibido na página de layout. Você pode passar um valor para a página de layout e, em seguida, o código na página de layout pode usar o valor para decidir se deseja exibir uma seção da página, qual arquivo .css usar e assim por diante. Os valores que você passa no Page objeto são como quaisquer outros valores que você usa no código. É que os valores se originam na página de conteúdo e são passados para a página de layout.

Abra a página AddMovie.cshtml e adicione uma linha à parte superior do código que fornece um título para a página AddMovie.cshtml :

Page.Title = "Add a Movie";

Execute a página AddMovie.cshtml . Você verá o novo título lá:

Uma guia do navegador mostrando o título 'Adicionar Filmes' criado dinamicamente

Atualizando as páginas restantes para usar o layout

Agora você pode concluir as páginas restantes em seu site para que elas usem o novo layout. Abra EditMovie.cshtml e DeleteMovie.cshtml por sua vez e faça as mesmas alterações em cada um.

Adicione a linha de código vinculada à página de layout:

Layout = "~/_Layout.cshtml";

Adicione uma linha para definir o título da página:

Page.Title = "Edit a Movie";

ou:

Page.Title = "Delete a Movie";

Remova toda a marcação HTML desnecessária — basicamente, deixe apenas os bits que estão dentro do <body> elemento (além do bloco de código na parte superior).

Altere o <h1> elemento para ser um <h2> elemento .

Quando você fizer essas alterações, teste cada uma delas e verifique se ela está sendo exibida corretamente e se o título está correto.

Pensamentos de despedida sobre páginas de layout

Neste tutorial, você criou uma página _Layout.cshtml e usou o RenderBody método para mesclar conteúdo de outra página. Esse é o padrão básico para usar layouts em Páginas da Web.

As páginas de layout têm recursos adicionais que não abordamos aqui. Por exemplo, você pode aninhar páginas de layout — uma página de layout pode, por sua vez, referenciar outra. Layouts aninhados podem ser úteis se você estiver trabalhando com subseções de um site que exigem layouts diferentes. Você também pode usar métodos adicionais (por exemplo, RenderSection) para configurar seções nomeadas na página de layout.

A combinação de páginas de layout e arquivos .css é poderosa. Como você verá na próxima série de tutoriais, no WebMatrix, você pode criar um site com base em um modelo, que fornece um site que tem funcionalidade predefinida nele. Os modelos fazem um bom uso de páginas de layout e CSS para criar sites que têm ótima aparência e que têm recursos como menus. Aqui está uma captura de tela da home page de um site com base em um modelo, mostrando recursos que usam páginas de layout e CSS:

Layout criado pelo modelo de site webMatrix mostrando o cabeçalho, a área de navegação, a área de conteúdo, a seção opcional e os links de logon

Lista completa para página de filme (atualizada para usar uma página de layout)

@{
    Layout = "~/_Layout.cshtml";
    Page.Title = "List Movies";

    var db = Database.Open("WebPagesMovies") ;
    var selectCommand = "SELECT * FROM Movies";
    var searchTerm = "";

    if(!Request.QueryString["searchGenre"].IsEmpty() ) {
        selectCommand = "SELECT * FROM Movies WHERE Genre = @0";
        searchTerm = Request.QueryString["searchGenre"];
    }

    if(!Request.QueryString["searchTitle"].IsEmpty() ) {
        selectCommand = "SELECT * FROM Movies WHERE Title LIKE @0";
        searchTerm = "%" + Request.QueryString["searchTitle"] + "%";
    }

    var selectedData = db.Query(selectCommand, searchTerm);
    var grid = new WebGrid(source: selectedData, defaultSort: "Genre", rowsPerPage:3);
}

<h2>List Movies</h2>
    <form method="get">
      <div>
        <label for="searchGenre">Genre to look for:</label>
        <input type="text" name="searchGenre" value="@Request.QueryString["searchGenre"]" />
        <input type="Submit" value="Search Genre" /><br/>
        (Leave blank to list all movies.)<br/>
      </div>

      <div>
        <label for="SearchTitle">Movie title contains the following:</label>
        <input type="text" name="searchTitle" value="@Request.QueryString["searchTitle"]" />
        <input type="Submit" value="Search Title" /><br/>
      </div>
    </form>

<div>
    @grid.GetHtml(
        tableStyle: "grid",
        headerStyle: "head",
        alternatingRowStyle: "alt",
        columns: grid.Columns(
    grid.Column(format: @<a href="~/EditMovie?id=@item.ID">Edit</a>),
    grid.Column("Title"),
    grid.Column("Genre"),
    grid.Column("Year"),
    grid.Column(format: @<a href="~/DeleteMovie?id=@item.ID">Delete</a>)
        )
    )
</div>
<p><a href="~/AddMovie">Add a movie</a></p>

Lista de páginas completas para adicionar página de filme (atualizada para layout)

@{
    Layout = "~/_Layout.cshtml";
    Page.Title = "Add a Movie";

    Validation.RequireField("title", "You must enter a title");
    Validation.RequireField("genre", "Genre is required");
    Validation.RequireField("year", "You haven't entered a year");

    var title = "";
    var genre = "";
    var year = "";

    if(IsPost){
        if(Validation.IsValid()){
            title = Request.Form["title"];
            genre = Request.Form["genre"];
            year = Request.Form["year"];

            var db = Database.Open("WebPagesMovies");
            var insertCommand = "INSERT INTO Movies (Title, Genre, Year) VALUES(@0, @1, @2)";
            db.Execute(insertCommand, title, genre, year);

            Response.Redirect("~/Movies");
        }
    }
}

<h2>Add a Movie</h2>
@Html.ValidationSummary()
<form method="post">
<fieldset>
    <legend>Movie Information</legend>
    <p><label for="title">Title:</label>
        <input type="text" name="title" value="@Request.Form["title"]" />
        @Html.ValidationMessage("title")

    <p><label for="genre">Genre:</label>
        <input type="text" name="genre" value="@Request.Form["genre"]" />
        @Html.ValidationMessage("genre")

    <p><label for="year">Year:</label>
        <input type="text" name="year" value="@Request.Form["year"]" />
        @Html.ValidationMessage("year")

    <p><input type="submit" name="buttonSubmit" value="Add Movie" /></p>
</fieldset>
</form>

Lista de páginas completas para excluir página de filme (atualizada para layout)

@{
    Layout = "~/_Layout.cshtml";
    Page.Title = "Delete a Movie";

    var title = "";
    var genre = "";
    var year = "";
    var movieId = "";

    if(!IsPost){
        if(!Request.QueryString["ID"].IsEmpty() && Request.QueryString["ID"].AsInt() > 0){
            movieId = Request.QueryString["ID"];
            var db = Database.Open("WebPagesMovies");
            var dbCommand = "SELECT * FROM Movies WHERE ID = @0";
            var row = db.QuerySingle(dbCommand, movieId);
            if(row != null) {
                title = row.Title;
                genre = row.Genre;
                year = row.Year;
            }
            else{
                Validation.AddFormError("No movie was found for that ID.");
                // If you are using a version of ASP.NET Web Pages 2 that's
                // earlier than the RC release, comment out the preceding
                // statement and uncomment the following one.
                //ModelState.AddFormError("No movie was found for that ID.");
            }
        }
        else{
            Validation.AddFormError("No movie was found for that ID.");
            // If you are using a version of ASP.NET Web Pages 2 that's
            // earlier than the RC release, comment out the preceding
            // statement and uncomment the following one.
            //ModelState.AddFormError("No movie was found for that ID.");
        }
    }

    if(IsPost && !Request["buttonDelete"].IsEmpty()){
        movieId = Request.Form["movieId"];
        var db = Database.Open("WebPagesMovies");
        var deleteCommand = "DELETE FROM Movies WHERE ID = @0";
        db.Execute(deleteCommand, movieId);
        Response.Redirect("~/Movies");
    }

}

<h2>Delete a Movie</h2>
@Html.ValidationSummary()
<p><a href="~/Movies">Return to movie listing</a></p>

<form method="post">
<fieldset>
<legend>Movie Information</legend>

<p><span>Title:</span>
    <span>@title</span></p>

<p><span>Genre:</span>
    <span>@genre</span></p>

<p><span>Year:</span>
    <span>@year</span></p>

<input type="hidden" name="movieid" value="@movieId" />
<p><input type="submit" name="buttonDelete" value="Delete Movie" /></p>
</fieldset>
</form>

Lista de páginas completas para editar página de filme (atualizada para layout)

@{
    Layout = "~/_Layout.cshtml";
    Page.Title = "Edit a Movie";

    var title = "";
    var genre = "";
    var year = "";
    var movieId = "";

    if(!IsPost){
        if(!Request.QueryString["ID"].IsEmpty() && Request.QueryString["ID"].IsInt()) {
            movieId = Request.QueryString["ID"];
            var db = Database.Open("WebPagesMovies");
            var dbCommand = "SELECT * FROM Movies WHERE ID = @0";
            var row = db.QuerySingle(dbCommand, movieId);

            if(row != null) {
                title = row.Title;
                genre = row.Genre;
                year = row.Year;
            }
            else{
                Validation.AddFormError("No movie was selected.");
                // If you are using a version of ASP.NET Web Pages 2 that's
                // earlier than the RC release, comment out the preceding
                // statement and uncomment the following one.
                //ModelState.AddFormError("No movie was selected.");
            }
        }
        else{
            Validation.AddFormError("No movie was selected.");
            // If you are using a version of ASP.NET Web Pages 2 that's
            // earlier than the RC release, comment out the preceding
            // statement and uncomment the following one.
            //ModelState.AddFormError("No movie was selected.");
        }
    }

    if(IsPost){
        Validation.RequireField("title", "You must enter a title");
        Validation.RequireField("genre", "Genre is required");
        Validation.RequireField("year", "You haven't entered a year");
        Validation.RequireField("movieid", "No movie ID was submitted!");

        title = Request.Form["title"];
        genre = Request.Form["genre"];
        year = Request.Form["year"];
        movieId = Request.Form["movieId"];

        if(Validation.IsValid()){
            var db = Database.Open("WebPagesMovies");
            var updateCommand = "UPDATE Movies SET Title=@0, Genre=@1, Year=@2 WHERE Id=@3";
            db.Execute(updateCommand, title, genre, year, movieId);
            Response.Redirect("~/Movies");
        }
    }
}

<h2>Edit a Movie</h2>
@Html.ValidationSummary()
<form method="post">
<fieldset>
    <legend>Movie Information</legend>

    <p><label for="title">Title:</label>
        <input type="text" name="title" value="@title" /></p>

    <p><label for="genre">Genre:</label>
        <input type="text" name="genre" value="@genre" /></p>

    <p><label for="year">Year:</label>
        <input type="text" name="year" value="@year" /></p>

    <input type="hidden" name="movieid" value="@movieId" />

    <p><input type="submit" name="buttonSubmit" value="Submit Changes" /></p>
</fieldset>
</form>
<p><a href="~/Movies">Return to movie listing</a></p>

Próximo passo a seguir

No próximo tutorial, você aprenderá a publicar seu site na Internet para que todos possam vê-lo.

Recursos adicionais

  • Criando uma aparência consistente – um artigo que fornece mais detalhes sobre como trabalhar com layouts. Ele também descreve como passar um valor para uma página de layout que mostra ou oculta parte do conteúdo.
  • Páginas de layout aninhadas com Razor — Mike Brind escreve um exemplo de como aninhar páginas de layout. (Inclui um download das páginas.)