ASP.NET Web Sayfalarına Giriş - Tutarlı Düzen Oluşturma
yazan: Tom FitzMacken
Bu öğreticide, ASP.NET Web Sayfaları kullanan bir sitedeki sayfalar için tutarlı bir görünüm oluşturmak için düzenlerin nasıl kullanılacağı gösterilmektedir. Seriyi ASP.NET Web Sayfalarında Veritabanı Verilerini Silme yoluyla tamamladığınız varsayılır.
Öğrenecekleriniz:
- Düzen sayfası nedir?
- Düzen sayfalarını dinamik içerikle birleştirme.
- Düzen sayfasına değer geçirme.
Düzenler Hakkında
Şimdiye kadar oluşturduğunuz sayfaların tamamı tek başına tamamlandı. Hepsi aynı siteye aittir, ancak ortak öğeleri veya standart bir görünümü yoktur.
Çoğu sitenin tutarlı bir görünümü ve düzeni vardır. Örneğin , Microsoft.com/web sitesine gidip etrafa bakarsanız, sayfaların genel bir düzene ve görsel bir temaya uyduğunu görürsünüz:
Bu düzeni oluşturmanın verimsiz bir yolu, sayfalarınızın her birinde ayrı olarak bir üst bilgi, gezinti çubuğu ve alt bilgi tanımlamaktır. Her seferinde aynı işaretlemeyi yinelersiniz. Bir şeyi değiştirmek istiyorsanız (örneğin, alt bilgiyi güncelleştirmek), her sayfayı ayrı olarak değiştirmeniz gerekir.
Düzen sayfaları burada devreye girer. ASP.NET Web Sayfaları'nda, sitenizdeki sayfalar için genel bir kapsayıcı sağlayan bir düzen sayfası tanımlayabilirsiniz. Örneğin, düzen sayfasında üst bilgi, gezinti alanı ve alt bilgi bulunabilir. Düzen sayfası, ana içeriğin gittiği bir yer tutucu içerir.
Ardından, işaretlemeyi ve yalnızca bu sayfanın kodunu içeren tek tek içerik sayfaları tanımlayabilirsiniz. İçerik sayfalarının tam HTML sayfaları olması gerekmez; Bir öğeye bile sahip <body> olmaları gerekmez. Ayrıca ASP.NET içeriği hangi düzen sayfasında görüntülemek istediğinizi belirten bir kod satırı da vardır. Bu ilişkinin kabaca nasıl çalıştığını gösteren bir resim aşağıdadır:
Bu etkileşimi çalışırken gördüğünüzde kolayca anlayabilirsiniz. Bu öğreticide, film sayfalarınızı düzen kullanacak şekilde değiştireceksiniz.
Düzen Sayfası Ekleme
İlk olarak, ana içerik için üst bilgi, alt bilgi ve alan içeren tipik bir sayfa düzenini tanımlayan bir düzen sayfası oluşturacaksınız. WebPagesMovies sitesinde , _Layout.cshtml adlı bir CSHTML sayfası ekleyin.
Baştaki alt çizgi ( _ ) karakteri önemlidir. Sayfanın adı alt çizgiyle başlıyorsa, ASP.NET bu sayfayı doğrudan tarayıcıya göndermez. Bu kural, siteniz için gerekli olan ancak kullanıcıların doğrudan istekte bulunamaması gereken sayfaları tanımlamanızı sağlar.
Sayfadaki içeriği aşağıdakilerle değiştirin:
<!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>
Gördüğünüz gibi, bu işaretleme yalnızca sayfadaki üç bölümü tanımlamak için öğeleri kullanan <div> HTML'dir ve üç bölümü barındıracak bir öğe daha <div> içerir. Alt bilgi biraz Razor kodu içerir: @DateTime.Now.Year, geçerli yılı sayfadaki o konumda işler.
Movies.css adlı stil sayfasının bağlantısı olduğuna dikkat edin. Stil sayfası, öğelerin fiziksel düzeninin ayrıntılarının tanımlandığı yerdir. Bunu birazdan oluşturacaksınız.
Bu _Layout.cshtml sayfasındaki tek olağan dışı özellik satırıdır @Render.Body() . Bu düzen başka bir sayfayla birleştirildiğinde içeriğin gideceği yer tutucu budur.
.css Dosyası Ekleme
Sayfadaki öğelerin gerçek düzenlemesini (yani görünümünü) tanımlamanın tercih edilen yolu, basamaklı stil sayfası (CSS) kurallarını kullanmaktır. Bu nedenle, yeni düzeniniz için kuralları içeren bir .css dosyası oluşturacaksınız.
WebMatrix'te sitenizin kökünü seçin. Ardından şeridin Dosyalar sekmesinde , Yeni düğmesinin altındaki oka tıklayın ve ardından Yeni Klasör'e tıklayın.
Yeni klasöre Stiller adını verin.
Yeni Stiller klasörünün içinde Movies.css adlı bir dosya oluşturun.
Yeni .css dosyasının içeriğini aşağıdakilerle değiştirin:
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;}
Bu CSS kuralları hakkında iki şeyi not etmek dışında pek bir şey söylemeyeceğiz. Bunlardan biri, yazı tiplerini ve boyutları ayarlamaya ek olarak, kuralların üst bilgi, alt bilgi ve ana içerik alanının konumunu belirlemek için mutlak konumlandırma kullanmasıdır. CSS'de konumlandırma konusunda yeniyseniz, W3Schools sitesinde CSS Konumlandırma öğreticisini okuyabilirsiniz.
Dikkate alınacak bir diğer nokta da, en altta, movies.cshtml dosyasında tek tek tanımlanan stil kurallarını kopyalamış olmamızdır. Bu kurallar, yardımcının tabloya şeritler ekleyen işaretlemeyi işlemesini sağlamak WebGrid için ASP.NET Web Sayfalarını Kullanarak Verileri Görüntülemeye Giriş öğreticisinde kullanılmıştır. (Stil tanımları için bir .css dosyası kullanacaksanız, sitenin tamamı için stil kurallarını da koyabilirsiniz.)
Filmler Dosyasını Düzeni Kullanacak Şekilde Güncelleştirme
Artık sitenizdeki mevcut dosyaları yeni düzeni kullanacak şekilde güncelleştirebilirsiniz. Movies.cshtml dosyasını açın. Üst kısımda, kodun ilk satırı olarak aşağıdakileri ekleyin:
Layout = "~/_Layout.cshtml";
Sayfa artık şu şekilde başlar:
@{
Layout = "~/_Layout.cshtml";
var db = Database.Open("WebPagesMovies") ;
var selectCommand = "SELECT * FROM Movies";
var searchTerm = "";
// Etc.
Bu tek kod satırı ASP.NET Filmler sayfası çalıştırıldığında _Layout.cshtml dosyasıyla birleştirilmesi gerektiğini bildirir.
Movies.cshtml dosyası artık bir düzen sayfası kullandığından, işaretlemeyi _Layout.cshtml dosyası tarafından ele alınan Movies.cshtml sayfasından kaldırabilirsiniz. , , <html>ve açma ve <body> kapatma etiketlerini çıkarma<!DOCTYPE>. Artık bu kuralları bir .css dosyasında edindiğiniz için, kılavuz için stil kurallarını içeren öğenin ve içeriğinin tamamını <head> alın. Bunu yaparken, var olan <h1> öğeyi bir <h2> öğe olarak değiştirin; düzen sayfasında zaten bir <h1> öğeniz var. <h2> Metni "Filmleri Listele" olarak değiştirin.
Normalde bir içerik sayfasında bu tür değişiklikler yapmanız gerekmez. Sitenizi bir düzen sayfasıyla başlattığınızda, başlangıçta tüm bu öğeler olmadan içerik sayfaları oluşturursunuz. Ancak bu durumda, tek başına bir sayfayı düzen kullanan bir sayfaya dönüştürüyorsunuz, bu nedenle biraz temizleme işlemi var.
İşiniz bittiğinde Movies.cshtml sayfası aşağıdaki gibi görünür:
@{
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>
Düzeni Test Etme
Artık düzenin nasıl göründüğünü görebilirsiniz. WebMatrix'te Movies.cshtml sayfasına sağ tıklayın ve Tarayıcıda başlat'ı seçin. Tarayıcı sayfayı görüntülediğinde şu sayfaya benzer:
ASP.NET, Movies.cshtml sayfasının içeriğini yöntemin bulunduğu RenderBody_Layout.cshtml sayfasında birleştirdi. Ve elbette _Layout.cshtml sayfası, sayfanın görünümünü tanımlayan bir .css dosyasına başvurur.
AddMovie Sayfasını Düzeni Kullanacak Şekilde Güncelleştirme
Düzenlerin gerçek avantajı, bunları sitenizdeki tüm sayfalar için kullanabilmenizdir. AddMovie.cshtml sayfasını açın.
AddMovie.cshtml sayfasının başlangıçta doğrulama hata iletilerinin görünümünü tanımlamak için bazı CSS kuralları olduğunu hatırlayabilirsiniz. Artık siteniz için bir .css dosyanız olduğundan, bu kuralları .css dosyasına taşıyabilirsiniz. Bunları AddMovie.cshtml dosyasından kaldırın ve Movies.css dosyasının altına ekleyin. Aşağıdaki kuralları taşıyorsunuz:
.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;
}
Şimdi, AddMovie.cshtml'de Movies.cshtml için yaptığınız değişikliklerin aynısını yapın; artık gereksiz olan HTML işaretlemesini ekleyin Layout="~/_Layout.cshtml; ve kaldırın. öğesini olarak <h1><h2>değiştirin. İşiniz bittiğinde sayfa şu örneğe benzer olacaktır:
@{
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>
Sayfayı çalıştırın. Şimdi şu çizime benzer:
Sitedeki sayfalarda da benzer değişiklikler yapmak istiyorsunuz: EditMovie.cshtml ve DeleteMovie.cshtml. Ancak, bunu yapmadan önce, düzeni biraz daha esnek hale getiren başka bir değişiklik yapabilirsiniz.
Başlık Bilgilerini Düzen Sayfasına Geçirme
Oluşturduğunuz _Layout.cshtml sayfasında "Film Sitem" olarak ayarlanmış bir <title> öğe vardır. Çoğu tarayıcı, bu öğenin içeriğini bir sekmede metin olarak görüntüler:
Bu başlık bilgileri geneldir. Başlık metninin geçerli sayfaya daha belirgin olmasını istediğinizi varsayalım. (Başlık metni, sayfanızın ne hakkında olduğunu belirlemek için arama motorları tarafından da kullanılır.) Movies.cshtml veya AddMovie.cshtml gibi bir içerik sayfasından düzen sayfasına bilgi geçirebilir ve ardından düzen sayfasının işleyebileceği işlemleri özelleştirmek için bu bilgileri kullanabilirsiniz.
Movies.cshtml sayfasını yeniden açın. En üstteki koda aşağıdaki satırı ekleyin:
Page.Title = "List Movies";
Nesne Page tüm .cshtml sayfalarında kullanılabilir ve bu amaçla, yani bir sayfa ile düzeni arasında bilgi paylaşmak için kullanılır.
_Layout.cshtml sayfasını açın. <title> öğesini şu işaretleme gibi görünecek şekilde değiştirin:
<title>@Page.Title</title>
Bu kod, özelliğinde Page.Title bulunan her şeyi doğrudan sayfadaki bu konumda işler.
Movies.cshtml sayfasını çalıştırın. Bu kez tarayıcı sekmesi, değerinin Page.Titlene olduğunu gösterir:
İstersensiniz, sayfa kaynağını tarayıcıda görüntüleyin. öğesinin <title> olarak <title>List Movies</title>işlendiğini görebilirsiniz.
İpucu
Sayfa Nesnesi
Bunun kullanışlı bir özelliği Page , dinamik bir nesne olmasıdır; Title özellik sabit veya ayrılmış bir ad değildir. Nesnenin Page değeri için herhangi bir ad kullanabilirsiniz. Örneğin, veya Page.MyPageadlı Page.CurrentName bir özelliği kullanarak başlığı kolayca geçirebilirsiniz. Tek kısıtlama, adın hangi özelliklerin adlandırılabilmesi için normal kurallara uyması gerektiğini gösterir. (Örneğin, ad boşluk içeremez.)
nesnesini kullanarak Page istediğiniz sayıda değer geçirebilirsiniz. Film bilgilerini düzen sayfasına geçirmek istiyorsanız ve Page.GenrePage.MovieYeargibi Page.MovieTitle bir şey kullanarak değerleri geçirebilirsiniz. (Veya bilgileri depolamak için icat ettiğiniz diğer adlar.) Büyük olasılıkla açık olan tek gereksinim, içerik sayfasında ve düzen sayfasında aynı adları kullanmanız gerekmektir.
Nesneyi kullanarak Page geçirdiğiniz bilgiler yalnızca düzen sayfasında görüntülenecek metinle sınırlı değildir. Düzen sayfasına bir değer geçirebilirsiniz ve düzen sayfasındaki kod değeri kullanarak sayfanın bir bölümünün görüntülenip görüntülenmeyeceğine, hangi .css dosyasının kullanılacağına vb. karar verebilir. Nesnesine Page geçirdiğiniz değerler, kodda kullandığınız diğer değerlere benzer. Yalnızca değerler içerik sayfasından kaynaklanır ve düzen sayfasına geçirilir.
AddMovie.cshtml sayfasını açın ve kodun en üstüne AddMovie.cshtml sayfası için başlık sağlayan bir satır ekleyin:
Page.Title = "Add a Movie";
AddMovie.cshtml sayfasını çalıştırın. Yeni başlığı burada görürsünüz:
Kalan Sayfaları Düzeni Kullanacak Şekilde Güncelleştirme
Artık sitenizdeki kalan sayfaları yeni düzeni kullanacak şekilde tamamlayabilirsiniz. Sırayla EditMovie.cshtml ve DeleteMovie.cshtml'yi açın ve her birinde aynı değişiklikleri yapın.
Düzen sayfasına bağlanan kod satırını ekleyin:
Layout = "~/_Layout.cshtml";
Sayfanın başlığını ayarlamak için bir satır ekleyin:
Page.Title = "Edit a Movie";
veya:
Page.Title = "Delete a Movie";
Tüm gereksiz HTML işaretlemesini kaldırın; temel olarak, yalnızca öğenin içindeki <body> bitleri (artı en üstte kod bloğunu) bırakın.
<h1> öğesini bir <h2> öğe olarak değiştirin.
Bu değişiklikleri yaptıktan sonra her birini test edin ve düzgün görüntülendiğinden ve başlığın doğru olduğundan emin olun.
Düzen Sayfaları Hakkındaki Düşünceleri Ayırma
Bu öğreticide bir _Layout.cshtml sayfası oluşturdunuz ve başka bir sayfadaki içeriği birleştirmek için yöntemini kullandınız RenderBody . Bu, Web Sayfalarında düzenleri kullanmaya yönelik temel desendir.
Düzen sayfalarında burada ele almadığımız ek özellikler vardır. Örneğin, düzen sayfalarını iç içe yerleştirebilirsiniz; bir düzen sayfası sırayla diğerine başvurabilir. Farklı düzenler gerektiren bir sitenin alt bölümleriyle çalışıyorsanız, iç içe yerleştirilmiş düzenler yararlı olabilir. Düzen sayfasında adlandırılmış bölümler ayarlamak için ek yöntemler de (örneğin, RenderSection) kullanabilirsiniz.
Düzen sayfaları ve .css dosyalarının birleşimi güçlüdür. Bir sonraki öğretici serisinde göreceğiniz gibi, WebMatrix'te şablona dayalı bir site oluşturabilirsiniz ve bu da size önceden oluşturulmuş işlevselliği olan bir site sağlar. Şablonlar, harika görünen ve menüler gibi özelliklere sahip siteler oluşturmak için düzen sayfalarını ve CSS'yi iyi kullanır. Burada, düzen sayfalarını ve CSS'yi kullanan özellikleri gösteren, şablona dayalı bir sitenin giriş sayfasının ekran görüntüsü yer alır:
Film Sayfası için Tam Liste (Düzen Sayfası Kullanacak Şekilde Güncelleştirildi)
@{
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>
Film Sayfası Ekle için Tam Sayfa Listesi (Düzen için Güncelleştirildi)
@{
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>
Film Sayfasını Sil için Tam Sayfa Listesi (Düzen için Güncelleştirildi)
@{
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>
Film Sayfasını Düzenle için Tam Sayfa Listesi (Düzen için Güncelleştirildi)
@{
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>
Sonraki Geliyor
Sonraki öğreticide, sitenizi herkesin görebilmesi için İnternet'te yayımlamayı öğreneceksiniz.
Ek Kaynaklar
- Tutarlı Bir Görünüm Oluşturma — Düzenlerle çalışma hakkında daha fazla ayrıntı sağlayan bir makale. Ayrıca, içeriğin bir bölümünü gösteren veya gizleyen bir düzen sayfasına bir değerin nasıl geçirildiğini de açıklar.
- Razor ile İç İçe Yerleştirilmiş Düzen Sayfaları — Mike Brind, düzen sayfalarını iç içe yerleştirmeye ilişkin bir örnektir. (Sayfaların indirilmesini içerir.)
Geri Bildirim
Çok yakında: 2024 boyunca, içerik için geri bildirim mekanizması olarak GitHub Sorunları’nı kullanımdan kaldıracak ve yeni bir geri bildirim sistemiyle değiştireceğiz. Daha fazla bilgi için bkz. https://aka.ms/ContentUserFeedback.
Gönderin ve geri bildirimi görüntüleyin