Introduzione Pagine Web ASP.NET - Creazione di un layout coerente
Questa esercitazione illustra come usare i layout per creare una ricerca coerente per le pagine di un sito che usa Pagine Web ASP.NET. Si presuppone che la serie sia stata completata tramite l'eliminazione dei dati del database in Pagine Web ASP.NET.
Contenuto dell'esercitazione:
- Che cos'è una pagina di layout.
- Come combinare pagine di layout con contenuto dinamico.
- Come passare i valori a una pagina di layout.
Informazioni sui layout
Le pagine create finora sono state completate, autonome. Appartengono tutti allo stesso sito, ma non hanno elementi comuni o un aspetto standard.
La maggior parte dei siti ha un aspetto e un layout coerenti. Ad esempio, se si passa al sito Microsoft.com/web e si guarda intorno, si noterà che le pagine sono conformi a un layout complessivo e a un tema visivo:
Un modo inefficiente per creare questo layout consiste nel definire un'intestazione, una barra di spostamento e un piè di pagina separatamente in ogni pagina. Si potrebbe duplicare lo stesso markup ogni volta. Se si vuole modificare qualcosa (ad esempio, aggiornare il piè di pagina), è necessario modificare ogni pagina separatamente.
Questa è la posizione in cui vengono visualizzate le pagine di layout . In Pagine Web ASP.NET è possibile definire una pagina di layout che fornisce un contenitore complessivo per le pagine del sito. Ad esempio, la pagina di layout può contenere l'intestazione, l'area di spostamento e il piè di pagina. La pagina di layout include un segnaposto in cui passa il contenuto principale.
È quindi possibile definire singole pagine di contenuto che contengono il markup e il codice solo per tale pagina. Le pagine contenuto non devono essere pagine HTML complete; non devono nemmeno avere un <body> elemento. Hanno anche una riga di codice che indica ASP.NET pagina di layout in cui si vuole visualizzare il contenuto. Ecco un'immagine che mostra approssimativamente come funziona questa relazione:
Questa interazione è facile da comprendere quando viene visualizzata in azione. In questa esercitazione si cambieranno le pagine dei film per usare un layout.
Aggiunta di una pagina layout
Si inizierà creando una pagina di layout che definisce un layout di pagina tipico con un'intestazione, un piè di pagina e un'area per il contenuto principale. Nel sito WebPagesMovies aggiungere una pagina CSHTML denominata _Layout.cshtml.
Il carattere di sottolineatura iniziale ( _ ) è significativo. Se il nome di una pagina inizia con un carattere di sottolineatura, ASP.NET non invierà direttamente la pagina al browser. Questa convenzione consente di definire le pagine necessarie per il sito, ma che gli utenti non devono essere in grado di richiedere direttamente.
Sostituire il contenuto nella pagina con quanto segue:
<!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">
© @DateTime.Now.Year My Movie Site
</div>
</div>
</body>
</html>
Come si può notare, questo markup è solo HTML che usa <div> elementi per definire tre sezioni nella pagina e un altro <div> elemento per contenere le tre sezioni. Il piè di pagina contiene un po' di codice Razor: @DateTime.Now.Year, che eseguirà il rendering dell'anno corrente in tale posizione nella pagina.
Si noti che è presente un collegamento a un foglio di stile denominato Movies.css. Il foglio di stile è il luogo in cui verranno definiti i dettagli del layout fisico degli elementi. In un momento verrà creato.
L'unica funzionalità insolita in questa pagina _Layout.cshtml è la @Render.Body() riga. Questo è il segnaposto in cui verrà eseguito il contenuto quando questo layout viene unito a un'altra pagina.
Aggiunta di un file css
Il modo preferito per definire la disposizione effettiva (ovvero l'aspetto) degli elementi nella pagina consiste nell'usare regole css (Cascading Style Sheet). Verrà quindi creato un file css con estensione css con le regole per il nuovo layout.
In WebMatrix selezionare la radice del sito. Nella scheda File della barra multifunzione fare clic sulla freccia sotto il pulsante Nuovo e quindi fare clic su Nuova cartella.
Assegnare al nuovo nome stili di cartella.
All'interno della nuova cartella Stili creare un file denominato Movies.css.
Sostituire il contenuto del nuovo file CSS con quanto segue:
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;}
Non diciamo molto su queste regole CSS, tranne per prendere nota di due cose. Uno è che oltre a impostare tipi di carattere e dimensioni, le regole usano la posizione assoluta per stabilire la posizione dell'intestazione, del piè di pagina e dell'area contenuto principale. Se non si ha familiarità con la posizione in CSS, è possibile leggere l'esercitazione sulla posizione CSS nel sito W3Schools.
L'altra cosa da notare è che nella parte inferiore sono state copiate le regole di stile definite singolarmente nel file Movies.cshtml . Queste regole sono state usate nell'esercitazione Introduzione alla visualizzazione dei dati usando Pagine Web ASP.NET per rendere il WebGrid markup di rendering helper che ha aggiunto strisce alla tabella. Se si userà un file css per le definizioni di stile, è possibile inserire anche le regole di stile per l'intero sito.
Aggiornamento del file film per l'uso del layout
È ora possibile aggiornare i file esistenti nel sito per usare il nuovo layout. Aprire il file Movies.cshtml . Nella parte superiore, come prima riga di codice, aggiungere quanto segue:
Layout = "~/_Layout.cshtml";
La pagina ora inizia in questo modo:
@{
Layout = "~/_Layout.cshtml";
var db = Database.Open("WebPagesMovies") ;
var selectCommand = "SELECT * FROM Movies";
var searchTerm = "";
// Etc.
Questa riga di codice indica ASP.NET che quando viene eseguita la pagina Movies , deve essere unito al file _Layout.cshtml .
Poiché il file Movies.cshtml ora usa una pagina di layout, è possibile rimuovere il markup dalla pagina Movies.cshtml a cui si fa riferimento dal file _Layout.cshtml . Estrai i <!DOCTYPE>tag , <html>e <body> apertura e chiusura. Estrae l'intero <head> elemento e il relativo contenuto, che include le regole di stile per la griglia, poiché ora sono presenti tali regole in un file css . Mentre lo si trova, modificare l'elemento esistente <h1> in un elemento; si dispone già di un <h2><h1> elemento nella pagina di layout. Modificare il <h2> testo in "Elenca film".
Normalmente non è necessario apportare queste modifiche in una pagina del contenuto. Quando si avvia il sito con una pagina di layout, si creano pagine di contenuto senza tutti questi elementi da iniziare. In questo caso, tuttavia, si converte una pagina autonoma in una pagina autonoma che usa un layout, quindi c'è un po' di pulizia.
Al termine, la pagina Movies.cshtml avrà un aspetto simile al seguente:
@{
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>
Test del layout
Ora è possibile visualizzare l'aspetto del layout. In WebMatrix fare clic con il pulsante destro del mouse sulla pagina Movies.cshtml e scegliere Avvia nel browser. Quando il browser visualizza la pagina, è simile alla pagina seguente:
ASP.NET ha unito il contenuto della pagina Movies.cshtml nella pagina _Layout.cshtml a destra in cui è il RenderBody metodo. Naturalmente la pagina _Layout.cshtml fa riferimento a un file css che definisce l'aspetto della pagina.
Aggiornamento della pagina AddMovie per usare il layout
Il vantaggio reale dei layout è che è possibile usarli per tutte le pagine del sito. Aprire la pagina AddMovie.cshtml .
Si potrebbe ricordare che la pagina AddMovie.cshtml originariamente aveva alcune regole CSS in esso per definire l'aspetto dei messaggi di errore di convalida. Poiché è ora disponibile un file CSS per il sito, è possibile spostare tali regole nel file CSS . Rimuoverli dal file AddMovie.cshtml e aggiungerli alla parte inferiore del file Movies.css . Si stanno spostando le regole seguenti:
.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;
}
Ora apportare gli stessi tipi di modifiche in AddMovie.cshtml che hai fatto per Movies.cshtml , aggiungere Layout="~/_Layout.cshtml; e rimuovere il markup HTML che è ora extraneous. Modificare l'elemento <h1> in <h2>. Al termine, la pagina sarà simile all'esempio seguente:
@{
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>
Eseguire la pagina. Ora è simile alla figura seguente:
Si desidera apportare modifiche simili alle pagine nel sito - EditMovie.cshtml e DeleteMovie.cshtml. Tuttavia, prima di eseguire, è possibile apportare un'altra modifica al layout che lo rende un po'più flessibile.
Passaggio delle informazioni sul titolo alla pagina layout
La pagina _Layout.cshtml creata ha un <title> elemento impostato su "My Movie Site". La maggior parte dei browser visualizza il contenuto di questo elemento come testo in una scheda:
Queste informazioni sul titolo sono generice. Si supponga di voler che il testo del titolo sia più specifico della pagina corrente. Il testo del titolo viene usato anche dai motori di ricerca per determinare il contenuto della pagina. È possibile passare informazioni da una pagina di contenuto come Movies.cshtml o AddMovie.cshtml alla pagina di layout e quindi usare tali informazioni per personalizzare il rendering della pagina di layout.
Aprire di nuovo la pagina Movies.cshtml . Nel codice nella parte superiore aggiungere la riga seguente:
Page.Title = "List Movies";
L'oggetto Page è disponibile in tutte le pagine con estensione cshtml ed è per questo scopo, ovvero condividere le informazioni tra una pagina e il relativo layout.
Aprire la pagina _Layout.cshtml . Modificare l'elemento <title> in modo che abbia un aspetto simile al markup seguente:
<title>@Page.Title</title>
Questo codice esegue il rendering di qualsiasi elemento nella Page.Title proprietà direttamente in tale posizione nella pagina.
Eseguire la pagina Movies.cshtml . Questa volta la scheda del browser mostra ciò che è stato passato come valore di Page.Title:
Se si desidera, visualizzare l'origine della pagina nel browser. È possibile notare che il rendering dell'elemento <title> viene eseguito come <title>List Movies</title>.
Suggerimento
Oggetto Page
Una funzionalità utile di è che si tratta di Page un oggetto dinamico, ovvero la Title proprietà non è un nome fisso o riservato. È possibile utilizzare qualsiasi nome per un valore dell'oggetto Page . Ad esempio, è possibile passare facilmente il titolo usando una proprietà denominata Page.CurrentName o Page.MyPage. L'unica restrizione è che il nome deve seguire le normali regole per le proprietà che possono essere denominate. Ad esempio, il nome non può contenere uno spazio.
È possibile passare qualsiasi numero di valori usando l'oggetto Page . Se si desidera passare le informazioni sui film alla pagina di layout, è possibile passare i valori usando un valore simile Page.MovieTitle a e Page.Genre .Page.MovieYear Oppure qualsiasi altro nome inventato per archiviare le informazioni. L'unico requisito, probabilmente ovvio, è che è necessario usare gli stessi nomi nella pagina del contenuto e nella pagina di layout.
Le informazioni passate tramite l'oggetto Page non sono limitate solo al testo da visualizzare nella pagina di layout. È possibile passare un valore alla pagina di layout e quindi il codice nella pagina di layout può usare il valore per decidere se visualizzare una sezione della pagina, il file CSS da usare e così via. I valori passati nell'oggetto Page sono simili a tutti gli altri valori usati nel codice. È solo che i valori hanno origine nella pagina del contenuto e vengono passati alla pagina di layout.
Aprire la pagina AddMovie.cshtml e aggiungere una riga all'inizio del codice che fornisce un titolo per la pagina AddMovie.cshtml :
Page.Title = "Add a Movie";
Eseguire la pagina AddMovie.cshtml . Verrà visualizzato il nuovo titolo:
Aggiornamento delle pagine rimanenti per l'uso del layout
È ora possibile completare le pagine rimanenti nel sito in modo che usino il nuovo layout. Aprire EditMovie.cshtml e DeleteMovie.cshtml a sua volta e apportare le stesse modifiche in ognuna.
Aggiungere la riga di codice che collega alla pagina di layout:
Layout = "~/_Layout.cshtml";
Aggiungere una riga per impostare il titolo della pagina:
Page.Title = "Edit a Movie";
oppure:
Page.Title = "Delete a Movie";
Rimuovere tutto il markup HTML estraneo, in pratica lasciare solo i bit all'interno dell'elemento <body> (più il blocco di codice nella parte superiore).
Modificare l'elemento <h1> in modo che sia un <h2> elemento.
Dopo aver apportato queste modifiche, testa ognuna e verifica che venga visualizzata correttamente e che il titolo sia corretto.
Pensieri di parti sulle pagine di layout
In questa esercitazione è stata creata una pagina _Layout.cshtml e si è usato il RenderBody metodo per unire il contenuto da un'altra pagina. Questo è il modello di base per l'uso dei layout nelle pagine Web.
Le pagine di layout hanno funzionalità aggiuntive che non sono state illustrate qui. Ad esempio, è possibile annidare le pagine di layout: una pagina di layout può a sua volta fare riferimento a un'altra. I layout annidati possono essere utili se si utilizzano sottosezioni di un sito che richiedono layout diversi. È anche possibile usare metodi aggiuntivi ,ad esempio , RenderSectionper configurare sezioni denominate nella pagina di layout.
La combinazione di pagine di layout e file CSS è potente. Come si vedrà nella prossima serie di esercitazioni, in WebMatrix è possibile creare un sito basato su un modello, che offre un sito con funzionalità predefinite. I modelli fanno un buon uso di pagine di layout e CSS per creare siti che hanno un aspetto ottimale e che hanno caratteristiche come menu. Ecco uno screenshot della home page di un sito basato su un modello, che mostra le funzionalità che usano pagine di layout e CSS:
Elenco completo per la pagina filmato (aggiornata per l'uso di una pagina 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>
Pagina completa per l'aggiunta di un filmato (aggiornata per il 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>
Pagina completa per l'eliminazione della pagina filmato (aggiornata per il 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>
Pagina completa per la pagina Modifica filmato (aggiornata per il 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>
Prossima attività
Nell'esercitazione successiva si apprenderà come pubblicare il sito in Internet in modo che tutti possano visualizzarlo.
Risorse aggiuntive
- Creazione di un aspetto coerente : articolo che fornisce altri dettagli sull'uso dei layout. Viene inoltre descritto come passare un valore a una pagina di layout che mostra o nasconde parte del contenuto.
- Pagine di layout annidate con Razor : Mike Brind blog su come annidare le pagine di layout. Include un download delle pagine.