Catatan
Akses ke halaman ini memerlukan otorisasi. Anda dapat mencoba masuk atau mengubah direktori.
Akses ke halaman ini memerlukan otorisasi. Anda dapat mencoba mengubah direktori.
oleh Tom FitzMacken
Tutorial ini menunjukkan kepada Anda cara menggunakan tata letak untuk membuat tampilan yang konsisten untuk halaman di situs yang menggunakan halaman web ASP.NET. Ini mengasumsikan Anda telah menyelesaikan seri melalui Menghapus Data Database di Halaman Web ASP.NET.
Yang akan Anda pelajari:
- Apa itu halaman tata letak.
- Cara menggabungkan halaman tata letak dengan konten dinamis.
- Cara meneruskan nilai ke halaman tata letak.
Tentang Tata Letak
Halaman yang Anda buat sejauh ini telah selesai, halaman mandiri. Semuanya termasuk dalam situs yang sama, tetapi tidak memiliki elemen umum atau tampilan standar.
Sebagian besar situs memang memiliki tampilan dan tata letak yang konsisten. Misalnya, jika Anda masuk ke situs Microsoft.com/web dan melihat-lihat, Anda melihat bahwa semua halaman mematuhi tata letak keseluruhan dan ke tema visual:
Cara yang tidak efisien untuk membuat tata letak ini adalah dengan menentukan header, bilah navigasi, dan footer secara terpisah di setiap halaman Anda. Anda akan menduplikasi markup yang sama setiap kali. Jika Anda ingin mengubah sesuatu (misalnya, memperbarui footer), Anda harus mengubah setiap halaman secara terpisah.
Di situlah halaman tata letak masuk. Di ASP.NET Halaman Web, Anda bisa menentukan halaman tata letak yang menyediakan kontainer keseluruhan untuk halaman di situs Anda. Misalnya, halaman tata letak dapat berisi header, area navigasi, dan footer. Halaman tata letak menyertakan tempat penampung tempat konten utama berada.
Anda kemudian dapat menentukan halaman konten individual yang berisi markup dan kode hanya untuk halaman tersebut. Halaman konten tidak harus melengkapi halaman HTML; mereka bahkan tidak harus memiliki <body> elemen . Mereka juga memiliki baris kode yang memberi tahu ASP.NET halaman tata letak tempat Anda ingin menampilkan konten. Berikut adalah gambar yang menunjukkan kira-kira cara kerja hubungan ini:
Interaksi ini mudah dipahami ketika Anda melihatnya beraksi. Dalam tutorial ini, Anda akan mengubah halaman film untuk menggunakan tata letak.
Menambahkan Halaman Tata Letak
Anda akan mulai dengan membuat halaman tata letak yang menentukan tata letak halaman umum dengan header, footer, dan area untuk konten utama. Di situs WebPagesMovies, tambahkan halaman CSHTML bernama _Layout.cshtml.
Karakter garis bawah terdepan ( _ ) signifikan. Jika nama halaman dimulai dengan garis bawah, ASP.NET tidak akan langsung mengirim halaman tersebut ke browser. Konvensi ini memungkinkan Anda menentukan halaman yang diperlukan untuk situs Anda tetapi pengguna tersebut seharusnya tidak dapat meminta secara langsung.
Ganti konten di halaman dengan yang berikut ini:
<!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>
Seperti yang Anda lihat, markup ini hanya HTML yang menggunakan <div> elemen untuk menentukan tiga bagian di halaman ditambah satu elemen lagi <div> untuk menahan tiga bagian. Footer berisi sedikit kode Razor: @DateTime.Now.Year, yang akan merender tahun ini di lokasi tersebut di halaman.
Perhatikan bahwa ada tautan ke lembar gaya bernama Movies.css. Lembar gaya adalah tempat detail tata letak fisik elemen akan ditentukan. Anda akan membuatnya dalam sesaat.
Satu-satunya fitur yang tidak biasa di halaman _Layout.cshtml ini adalah @Render.Body() baris. Itulah tempat penampung tempat konten akan pergi ketika tata letak ini digabungkan dengan halaman lain.
Menambahkan File .css
Cara yang disukai untuk menentukan pengaturan aktual (yaitu, tampilan) elemen pada halaman adalah dengan menggunakan aturan lembar gaya kaskade (CSS). Jadi Anda akan membuat file .css yang memiliki aturan untuk tata letak baru Anda.
Di WebMatrix, pilih akar situs Anda. Lalu di tab File dari pita, klik panah di bawah tombol Baru lalu klik Folder Baru.
Beri nama folder Baru Gaya.
Di dalam folder Gaya baru, buat file bernama Movies.css.
Ganti konten file .css baru dengan yang berikut ini:
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;}
Kami tidak akan mengatakan banyak tentang aturan CSS ini, kecuali untuk mencatat dua hal. Salah satunya adalah bahwa selain mengatur font dan ukuran, aturan menggunakan posisi absolut untuk menetapkan lokasi header, footer, dan area konten utama. Jika Anda baru dalam posisi di CSS, Anda dapat membaca tutorial Pemosisian CSS di situs W3Schools.
Hal lain yang perlu diperhatikan adalah bahwa di bagian bawah, kami telah menyalin aturan gaya yang awalnya didefinisikan secara individual dalam file Movies.cshtml . Aturan ini digunakan dalam tutorial Pengantar Menampilkan Data dengan Menggunakan Halaman Web ASP.NET untuk membuat WebGrid markup render pembantu yang menambahkan garis-garis ke tabel. (Jika Anda akan menggunakan file .css untuk definisi gaya, Anda mungkin juga menempatkan aturan gaya untuk seluruh situs di dalamnya.)
Memperbarui File Film untuk Menggunakan Tata Letak
Sekarang Anda dapat memperbarui file yang ada di situs Anda untuk menggunakan tata letak baru. Buka file Movies.cshtml . Di bagian atas, sebagai baris pertama kode, tambahkan yang berikut ini:
Layout = "~/_Layout.cshtml";
Halaman sekarang dimulai dengan cara ini:
@{
Layout = "~/_Layout.cshtml";
var db = Database.Open("WebPagesMovies") ;
var selectCommand = "SELECT * FROM Movies";
var searchTerm = "";
// Etc.
Satu baris kode ini memberi tahu ASP.NET bahwa ketika halaman Film berjalan, itu harus digabungkan dengan file _Layout.cshtml .
Karena file Movies.cshtml sekarang menggunakan halaman tata letak, Anda dapat menghapus markup dari halaman Movies.cshtml yang diurus oleh file _Layout.cshtml . Keluarkan <!DOCTYPE>tag , <html>, dan <body> buka dan tutup. Keluarkan seluruh <head> elemen dan kontennya, yang mencakup aturan gaya untuk kisi, karena Anda sekarang telah mendapatkan aturan tersebut dalam file .css . Saat Anda berada di dalamnya, ubah elemen yang ada <h1> menjadi <h2> elemen; Anda sudah memiliki <h1> elemen di halaman tata letak. Ubah teks menjadi <h2> "Daftar Film".
Biasanya Anda tidak perlu membuat perubahan semacam ini di halaman konten. Saat Anda memulai situs Anda dengan halaman tata letak, Anda membuat halaman konten tanpa semua elemen ini untuk memulai. Namun, dalam hal ini, Anda mengonversi halaman mandiri menjadi halaman yang menggunakan tata letak, sehingga ada sedikit pembersihan.
Setelah selesai, halaman Movies.cshtml akan terlihat seperti berikut ini:
@{
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>
Menguji Tata Letak
Sekarang Anda dapat melihat seperti apa tata letaknya. Di WebMatrix, klik kanan halaman Movies.cshtml dan pilih Luncurkan di browser. Saat browser menampilkan halaman, halaman terlihat seperti halaman ini:
ASP.NET telah menggabungkan konten halaman Movies.cshtml ke halaman _Layout.cshtml tepat di mana RenderBody metode berada. Dan tentu saja halaman _Layout.cshtml mereferensikan file .css yang menentukan tampilan halaman.
Memperbarui Halaman AddMovie untuk Menggunakan Tata Letak
Manfaat nyata tata letak adalah Anda dapat menggunakannya untuk semua halaman di situs Anda. Buka halaman AddMovie.cshtml .
Anda mungkin ingat bahwa halaman AddMovie.cshtml awalnya memiliki beberapa aturan CSS di dalamnya untuk menentukan tampilan pesan kesalahan validasi. Karena Anda memiliki file .css untuk situs Anda sekarang, Anda dapat memindahkan aturan tersebut ke file .css . Hapus dari file AddMovie.cshtml dan tambahkan ke bagian bawah file Movies.css . Anda memindahkan aturan berikut:
.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;
}
Sekarang buat perubahan yang sama di AddMovie.cshtml yang Anda lakukan untuk Movies.cshtml — tambahkan Layout="~/_Layout.cshtml; dan hapus markup HTML yang sekarang asing. Ubah elemen menjadi <h1><h2>. Setelah selesai, halaman akan terlihat seperti contoh ini:
@{
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>
Jalankan halaman. Sekarang terlihat seperti ilustrasi ini:
Anda ingin membuat perubahan serupa pada halaman di situs — EditMovie.cshtml dan DeleteMovie.cshtml. Namun, sebelum melakukannya, Anda dapat membuat perubahan lain pada tata letak yang membuatnya sedikit lebih fleksibel.
Meneruskan Informasi Judul ke Halaman Tata Letak
Halaman _Layout.cshtml yang Anda buat memiliki <title> elemen yang diatur ke "Situs Film Saya". Sebagian besar browser menampilkan konten elemen ini sebagai teks pada tab:
Informasi judul ini umum. Misalkan Anda ingin teks judul lebih spesifik untuk halaman saat ini. (Teks judul juga digunakan oleh mesin pencari untuk menentukan tentang apa halaman Anda.) Anda dapat meneruskan informasi dari halaman konten seperti Movies.cshtml atau AddMovie.cshtml ke halaman tata letak, lalu menggunakan informasi tersebut untuk menyesuaikan apa yang dirender halaman tata letak.
Buka lagi halaman Movies.cshtml . Di kode di bagian atas, tambahkan baris berikut:
Page.Title = "List Movies";
Objek Page tersedia di semua halaman .cshtml dan untuk tujuan ini, yaitu untuk berbagi informasi antara halaman dan tata letaknya.
Buka halaman _Layout.cshtml .
<title> Ubah elemen sehingga terlihat seperti markup ini:
<title>@Page.Title</title>
Kode ini merender apa pun yang ada di Page.Title properti tepat di lokasi tersebut di halaman.
Jalankan halaman Movies.cshtml . Kali ini tab browser menunjukkan apa yang Anda lewati sebagai nilai Page.Title:
Jika mau, lihat sumber halaman di browser. Anda dapat melihat bahwa <title> elemen dirender sebagai <title>List Movies</title>.
Tip
Objek Halaman
Fitur yang berguna adalah bahwa ini adalah objek dinamis - Title properti bukan nama tetap atau dipesanPage. Anda dapat menggunakan nama apa pun untuk nilai Page objek. Misalnya, Anda bisa dengan mudah melewati judul dengan menggunakan properti bernama Page.CurrentName atau Page.MyPage. Satu-satunya batasan adalah bahwa nama harus mengikuti aturan normal untuk properti apa yang dapat diberi nama. (Misalnya, nama tidak boleh berisi spasi.)
Anda dapat meneruskan sejumlah nilai dengan menggunakan Page objek . Jika Anda ingin meneruskan informasi film ke halaman tata letak, Anda dapat meneruskan nilai dengan menggunakan sesuatu seperti Page.MovieTitle dan Page.MovieYearPage.Genre . (Atau nama lain yang Anda temukan untuk menyimpan informasi.) Satu-satunya persyaratan — yang mungkin jelas - adalah Anda harus menggunakan nama yang sama di halaman konten dan halaman tata letak.
Informasi yang Anda lewati menggunakan Page objek tidak terbatas hanya pada teks untuk ditampilkan di halaman tata letak. Anda dapat meneruskan nilai ke halaman tata letak, lalu kode di halaman tata letak dapat menggunakan nilai untuk memutuskan apakah akan menampilkan bagian halaman, file .css apa yang akan digunakan, dan sebagainya. Nilai yang Anda berikan dalam Page objek seperti nilai lain yang Anda gunakan dalam kode. Hanya saja nilai berasal dari halaman konten dan diteruskan ke halaman tata letak.
Buka halaman AddMovie.cshtml dan tambahkan baris ke bagian atas kode yang menyediakan judul untuk halaman AddMovie.cshtml :
Page.Title = "Add a Movie";
Jalankan halaman AddMovie.cshtml . Anda melihat judul baru di sana:
Memperbarui Halaman yang Tersisa untuk Menggunakan Tata Letak
Sekarang Anda bisa menyelesaikan halaman yang tersisa di situs Anda sehingga mereka menggunakan tata letak baru. Buka EditMovie.cshtml dan DeleteMovie.cshtml secara bergantian dan buat perubahan yang sama di masing-masing.
Tambahkan baris kode yang ditautkan ke halaman tata letak:
Layout = "~/_Layout.cshtml";
Tambahkan baris untuk mengatur judul halaman:
Page.Title = "Edit a Movie";
atau:
Page.Title = "Delete a Movie";
Hapus semua markup HTML asing — pada dasarnya, hanya biarkan bit yang ada di dalam <body> elemen (ditambah blok kode di bagian atas).
<h1> Ubah elemen menjadi <h2> elemen .
Ketika Anda telah membuat perubahan ini, uji masing-masing dan pastikan bahwa perubahan tersebut ditampilkan dengan benar dan judulnya sudah benar.
Pemikiran Pemisahan Tentang Halaman Tata Letak
Dalam tutorial ini Anda membuat halaman _Layout.cshtml dan menggunakan RenderBody metode untuk menggabungkan konten dari halaman lain. Itu adalah pola dasar untuk menggunakan tata letak di Halaman Web.
Halaman tata letak memiliki fitur tambahan yang tidak kami bahas di sini. Misalnya, Anda dapat menumpuk halaman tata letak — satu halaman tata letak dapat mereferensikan halaman tata letak lainnya secara bergantian. Tata letak berlapis dapat berguna jika Anda bekerja dengan subbagian situs yang memerlukan tata letak yang berbeda. Anda juga dapat menggunakan metode tambahan (misalnya, RenderSection) untuk menyiapkan bagian bernama di halaman tata letak.
Kombinasi halaman tata letak dan file .css sangat kuat. Seperti yang akan Anda lihat di seri tutorial berikutnya, di WebMatrix Anda dapat membuat situs berdasarkan templat, yang memberi Anda situs yang memiliki fungsionalitas bawaan di dalamnya. Templat memanfaatkan halaman tata letak dan CSS dengan baik untuk membuat situs yang terlihat hebat dan memiliki fitur seperti menu. Berikut adalah cuplikan layar halaman beranda dari situs berdasarkan templat, memperlihatkan fitur yang menggunakan halaman tata letak dan CSS:
Daftar Lengkap untuk Halaman Film (Diperbarui untuk Menggunakan Halaman Tata Letak)
@{
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>
Daftar Halaman Lengkap untuk Tambahkan Halaman Film (Diperbarui untuk Tata Letak)
@{
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>
Daftar Halaman Lengkap untuk Hapus Halaman Film (Diperbarui untuk Tata Letak)
@{
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>
Daftar Halaman Lengkap untuk Edit Halaman Film (Diperbarui untuk Tata Letak)
@{
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>
Berikutnya
Dalam tutorial berikutnya, Anda akan mempelajari cara menerbitkan situs Anda ke Internet sehingga semua orang dapat melihatnya.
Sumber Daya Tambahan
- Membuat Tampilan Konsisten — Artikel yang menyediakan beberapa detail selengkapnya tentang bekerja dengan tata letak. Ini juga menjelaskan cara meneruskan nilai ke halaman tata letak yang memperlihatkan atau menyembunyikan beberapa konten.
- Halaman Tata Letak Berlapis dengan Razor - Mike Brind membuat blog contoh cara menumpuk halaman tata letak. (Termasuk unduhan halaman.)