Wprowadzenie ASP.NET stron internetowych — tworzenie spójnego układu
– autor Tom FitzMacken
W tym samouczku pokazano, jak za pomocą układów utworzyć spójne wyszukiwanie stron w witrynie korzystającej z ASP.NET stron sieci Web. Przyjęto założenie, że seria została ukończona przez usuwanie danych bazy danych w ASP.NET stronach sieci Web.
Zawartość:
- Jaka jest strona układu.
- Jak połączyć strony układu z zawartością dynamiczną.
- Jak przekazać wartości do strony układu.
Informacje o układach
Strony utworzone do tej pory zostały ukończone, autonomiczne strony. Wszystkie należą do tej samej witryny, ale nie mają żadnych wspólnych elementów ani standardowego wyglądu.
Większość witryn ma spójny wygląd i układ. Jeśli na przykład przejdziesz do witryny Microsoft.com/web i rozejrzysz się, zobaczysz, że strony są zgodne z ogólnym układem i motywem wizualnym:
Nieefektywnym sposobem utworzenia tego układu jest zdefiniowanie nagłówka, paska nawigacyjnego i stopki oddzielnie na każdej ze stron. Za każdym razem będziesz duplikować te same znaczniki. Jeśli chcesz coś zmienić (na przykład zaktualizować stopkę), musisz zmienić każdą stronę oddzielnie.
W tym miejscu pojawiają się strony układu . W ASP.NET stronach sieci Web można zdefiniować stronę układu, która udostępnia ogólny kontener stron w witrynie. Na przykład strona układu może zawierać nagłówek, obszar nawigacji i stopkę. Strona układu zawiera symbol zastępczy, w którym jest główną zawartością.
Następnie można zdefiniować poszczególne strony zawartości zawierające znaczniki i kod tylko dla tej strony. Strony zawartości nie muszą być pełne stron HTML; nawet nie muszą mieć <body> elementu. Mają one również wiersz kodu, który informuje ASP.NET strony układu, w której chcesz wyświetlić zawartość. Oto obraz przedstawiający mniej więcej sposób działania tej relacji:
Ta interakcja jest łatwa do zrozumienia, gdy widzisz ją w działaniu. W tym samouczku zmienisz strony filmów, aby używały układu.
Dodawanie strony układu
Zaczniesz od utworzenia strony układu, która definiuje typowy układ strony z nagłówkiem, stopką i obszarem zawartości głównej. W witrynie WebPagesFormat dodaj stronę CSHTML o nazwie _Layout.cshtml.
Znak podkreślenia wiodącego ( _ ) jest znaczący. Jeśli nazwa strony zaczyna się od podkreślenia, ASP.NET nie wyśle bezpośrednio tej strony do przeglądarki. Ta konwencja umożliwia definiowanie stron wymaganych dla witryny, ale użytkownicy nie powinni mieć możliwości bezpośredniego żądania.
Zastąp zawartość na stronie następującymi elementami:
<!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>
Jak widać, ten znacznik jest po prostu HTML, który używa <div> elementów do definiowania trzech sekcji na stronie i jeszcze jednego <div> elementu do przechowywania trzech sekcji. Stopka zawiera trochę kodu Razor: @DateTime.Now.Year, co spowoduje renderowanie bieżącego roku w tej lokalizacji na stronie.
Zwróć uwagę, że istnieje link do arkusza stylów o nazwie Movies.css. Arkusz stylów to miejsce, w którym zostaną zdefiniowane szczegóły układu fizycznego elementów. Utworzysz to za chwilę.
Jedyną nietypową funkcją @Render.Body() na tej stronie _Layout.cshtml jest wiersz. Jest to symbol zastępczy, w którym zawartość będzie przechodzić po scaleniu tego układu z inną stroną.
Dodawanie pliku CSS
Preferowanym sposobem definiowania rzeczywistego układu (czyli wyglądu) elementów na stronie jest użycie reguł kaskadowego arkusza stylów (CSS). W związku z tym utworzysz plik css zawierający reguły dla nowego układu.
W programie WebMatrix wybierz katalog główny witryny. Następnie na karcie Pliki na wstążce kliknij strzałkę pod przyciskiem Nowy , a następnie kliknij pozycję Nowy folder.
Nadaj nazwę nowym folderom Style.
W nowym folderze Styles utwórz plik o nazwie Movies.css.
Zastąp zawartość nowego pliku css następującymi elementami:
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;}
Nie powiemy zbyt wiele o tych regułach CSS, z wyjątkiem zanotowania dwóch rzeczy. Jedną z nich jest to, że oprócz ustawiania czcionek i rozmiarów reguły używają położenia bezwzględnego w celu ustalenia lokalizacji nagłówka, stopki i głównego obszaru zawartości. Jeśli dopiero zaczynasz pozycjonowanie w arkuszu CSS, możesz przeczytać samouczek pozycjonowania CSS w witrynie W3Schools.
Należy pamiętać, że w dolnej części skopiowaliśmy reguły stylu, które zostały pierwotnie zdefiniowane indywidualnie w pliku Movies.cshtml . Te reguły zostały użyte w samouczku Wprowadzenie do wyświetlania danych przy użyciu usługi ASP.NET Web Pages , aby znaczniki renderowania pomocniczego WebGrid , które dodały paski do tabeli. (Jeśli zamierzasz użyć pliku CSS dla definicji stylów, możesz również umieścić reguły stylu dla całej witryny w nim).
Aktualizowanie pliku filmów do korzystania z układu
Teraz możesz zaktualizować istniejące pliki w witrynie, aby użyć nowego układu. Otwórz plik Movies.cshtml . U góry jako pierwszy wiersz kodu dodaj następujące elementy:
Layout = "~/_Layout.cshtml";
Strona zaczyna się teraz w następujący sposób:
@{
Layout = "~/_Layout.cshtml";
var db = Database.Open("WebPagesMovies") ;
var selectCommand = "SELECT * FROM Movies";
var searchTerm = "";
// Etc.
Ten jeden wiersz kodu informuje ASP.NET, że po uruchomieniu strony Filmy należy ją scalić z plikiem _Layout.cshtml .
Ponieważ plik Movies.cshtml używa teraz strony układu, można usunąć znaczniki ze strony Movies.cshtml , która jest zajęta przez plik _Layout.cshtml . Wyjmij <!DOCTYPE>tagi , <html>i <body> otwierające i zamykające. Wyjmij cały <head> element i jego zawartość, która zawiera reguły stylu siatki, ponieważ te reguły są teraz dostępne w pliku css . Gdy jesteś w nim, zmień istniejący <h1> element na <h2> element; masz <h1> już element na stronie układu. Zmień tekst na <h2> "Lista filmów".
Zwykle nie trzeba wprowadzać tego rodzaju zmian na stronie zawartości. Po uruchomieniu witryny na stronie układu tworzysz strony zawartości bez wszystkich tych elementów. W takim przypadku jednak konwertujesz autonomiczną stronę na taką, która używa układu, więc jest trochę oczyszczania.
Po zakończeniu strona Movies.cshtml będzie wyglądać następująco:
@{
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>
Testowanie układu
Teraz możesz zobaczyć, jak wygląda układ. W programie WebMatrix kliknij prawym przyciskiem myszy stronę Movies.cshtml i wybierz polecenie Uruchom w przeglądarce. Gdy przeglądarka wyświetli stronę, wygląda następująco:
ASP.NET scaliła zawartość strony Movies.cshtml ze stroną _Layout.cshtml , w której RenderBody znajduje się metoda. Oczywiście strona _Layout.cshtml odwołuje się do pliku css definiującego wygląd strony.
Aktualizowanie strony AddFilm w celu korzystania z układu
Prawdziwą zaletą układów jest to, że można ich używać dla wszystkich stron w witrynie. Otwórz stronę AddImage.cshtml .
Możesz pamiętać, że strona AddImage.cshtml pierwotnie miała w nim pewne reguły CSS, aby zdefiniować wygląd komunikatów o błędach weryfikacji. Ponieważ masz teraz plik CSS dla witryny, możesz przenieść te reguły do pliku css . Usuń je z pliku AddImage.cshtml i dodaj je do dołu pliku Movies.css . Przenosisz następujące reguły:
.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;
}
Teraz wprowadź te same zmiany w pliku AddImage.cshtml , które zostały wprowadzone w pliku Movies.cshtml — dodaj Layout="~/_Layout.cshtml; i usuń znaczniki HTML, które są teraz nadmiarowe. Zmień element na <h1><h2>. Po zakończeniu strona będzie wyglądać następująco:
@{
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>
Uruchom stronę. Teraz wygląda na następującą ilustrację:
Chcesz wprowadzić podobne zmiany do stron w witrynie — EditImage.cshtml i DeleteImage.cshtml. Jednak zanim to zrobisz, możesz wprowadzić kolejną zmianę układu, która sprawia, że jest nieco bardziej elastyczna.
Przekazywanie informacji o tytule do strony układu
Utworzona strona _Layout.cshtml zawiera <title> element ustawiony na "Moja witryna filmowa". Większość przeglądarek wyświetla zawartość tego elementu jako tekst na karcie:
Te informacje o tytule są ogólne. Załóżmy, że chcesz, aby tekst tytułu był bardziej szczegółowy dla bieżącej strony. (Tekst tytułu jest również używany przez wyszukiwarki, aby określić, o czym jest twoja strona). Możesz przekazać informacje ze strony zawartości, takiej jak Movies.cshtml lub AddImage.cshtml , do strony układu, a następnie użyć tych informacji, aby dostosować renderowanie strony układu.
Otwórz ponownie stronę Movies.cshtml . W kodzie u góry dodaj następujący wiersz:
Page.Title = "List Movies";
Obiekt Page jest dostępny na wszystkich stronach cshtml i jest w tym celu, a mianowicie do udostępniania informacji między stroną a jego układem.
Otwórz stronę _Layout.cshtml . Zmień element tak <title> , aby wyglądał jak ten znacznik:
<title>@Page.Title</title>
Ten kod renderuje wszystko, co znajduje się w Page.Title właściwości bezpośrednio w tej lokalizacji na stronie.
Uruchom stronę Movies.cshtml . Tym razem karta przeglądarki pokazuje, co przekazano jako wartość elementu Page.Title:
Jeśli chcesz, wyświetl źródło strony w przeglądarce. Widać, że <title> element jest renderowany jako <title>List Movies</title>.
Porada
Obiekt strony
Przydatną funkcją Page jest to, że jest to obiekt dynamiczny — Title właściwość nie jest nazwą stałą ani zarezerwowaną. Możesz użyć dowolnej nazwy dla wartości Page obiektu. Na przykład można tak łatwo przekazać tytuł za pomocą właściwości o nazwie Page.CurrentName lub Page.MyPage. Jedynym ograniczeniem jest to, że nazwa musi przestrzegać normalnych reguł dotyczących właściwości, które mogą być nazwane. (Na przykład nazwa nie może zawierać spacji).
Można przekazać dowolną liczbę wartości przy użyciu Page obiektu . Jeśli chcesz przekazać informacje o filmie do strony układu, możesz przekazać wartości przy użyciu elementów takich jak Page.MovieTitle i i Page.GenrePage.MovieYear. (Lub wszelkie inne nazwy, które wymyśliłeś do przechowywania informacji). Jedynym wymaganiem — które jest prawdopodobnie oczywiste — jest to, że musisz używać tych samych nazw na stronie zawartości i na stronie układu.
Informacje przekazywane przy użyciu Page obiektu nie są ograniczone tylko do tekstu wyświetlanego na stronie układu. Możesz przekazać wartość do strony układu, a następnie kod na stronie układu może użyć wartości, aby zdecydować, czy wyświetlić sekcję strony, jaki plik css ma być używany itd. Wartości przekazywane w Page obiekcie są podobne do innych wartości, które są używane w kodzie. To tylko, że wartości pochodzą ze strony zawartości i są przekazywane do strony układu.
Otwórz stronę AddImage.cshtml i dodaj wiersz w górnej części kodu, który zawiera tytuł strony AddImage.cshtml :
Page.Title = "Add a Movie";
Uruchom stronę AddImage.cshtml . Zobaczysz tam nowy tytuł:
Aktualizowanie pozostałych stron do korzystania z układu
Teraz możesz zakończyć pozostałe strony w witrynie, aby korzystały z nowego układu. Otwórz plik EditImage.cshtml i DeleteImage.cshtml z kolei i wprowadź te same zmiany w każdym z nich.
Dodaj wiersz kodu, który łączy się ze stroną układu:
Layout = "~/_Layout.cshtml";
Dodaj wiersz, aby ustawić tytuł strony:
Page.Title = "Edit a Movie";
lub:
Page.Title = "Delete a Movie";
Usuń wszystkie dodatkowe znaczniki HTML — w zasadzie pozostaw tylko bity znajdujące się wewnątrz <body> elementu (plus blok kodu u góry).
<h1> Zmień element na <h2> element .
Po wprowadzeniu tych zmian przetestuj każdy i upewnij się, że jest on wyświetlany prawidłowo i czy tytuł jest poprawny.
Rozstanie myśli o stronach układu
W tym samouczku utworzono stronę _Layout.cshtml i użyto RenderBody metody do scalania zawartości z innej strony. Jest to podstawowy wzorzec używania układów na stronach sieci Web.
Strony układu mają dodatkowe funkcje, które nie zostały tu omówione. Na przykład można zagnieżdżać strony układu — jedna strona układu może z kolei odwoływać się do innej. Zagnieżdżone układy mogą być przydatne, jeśli pracujesz z podsekcjami witryny, która wymaga różnych układów. Możesz również użyć dodatkowych metod (na przykład RenderSection) do skonfigurowania nazwanych sekcji na stronie układu.
Kombinacja stron układu i plików CSS jest zaawansowana. Jak zobaczysz w następnej serii samouczków, w programie WebMatrix możesz utworzyć witrynę opartą na szablonie, który udostępnia witrynę, która ma wstępnie utworzone funkcje. Szablony dobrze wykorzystują strony układu i arkusze CSS do tworzenia witryn, które wyglądają świetnie i które mają takie funkcje jak menu. Oto zrzut ekranu strony głównej z witryny opartej na szablonie przedstawiający funkcje używające stron układu i css:
Kompletna lista dla strony filmu (zaktualizowana do korzystania ze strony układu)
@{
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>
Kompletna lista stron dla dodawania strony filmu (zaktualizowana dla układu)
@{
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>
Ukończ listę stron usuwania strony filmu (zaktualizowano dla układu)
@{
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>
Ukończ listę stron dla strony edycji filmu (zaktualizowano dla układu)
@{
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>
Następny etap
W następnym samouczku dowiesz się, jak opublikować witrynę w Internecie, aby wszyscy mogli ją zobaczyć.
Dodatkowe zasoby
- Tworzenie spójnego wyglądu — artykuł zawierający bardziej szczegółowe informacje na temat pracy z układami. W tym artykule opisano również sposób przekazywania wartości do strony układu, która pokazuje lub ukrywa część zawartości.
- Zagnieżdżone strony układu ze stronami Razor — Mike Brind opisuje przykład zagnieżdżania stron układu. (Obejmuje pobieranie stron).