Share via


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:

Üst bilgi, gezinti alanı, içerik alanı ve alt bilginin düzenini gösteren Microsoft.com/web site sayfası

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:

İki içerik sayfası ve sığdıkları bir düzen sayfası gösteren kavramsal diyagram

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">
          &copy; @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.

Şeritteki Yeni'nin altındaki 'Yeni Klasör' seçeneği.

Yeni klasöre Stiller adını verin.

Yeni klasörü 'Stiller' olarak adlandırma

Yeni Stiller klasörünün içinde Movies.css adlı bir dosya oluşturun.

Yeni bir Movies.css dosyası oluşturma

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:

Bir düzen kullanılarak işlenen filmler sayfası

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:

Düzen kullanılarak işlenen 'Film Ekle' sayfası

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:

Tarayıcı sekmesinde görüntülenen sayfanın <başlık> öğesi

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:

Dinamik olarak oluşturulan başlığı gösteren bir tarayıcı sekmesi

İ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:

Dinamik olarak oluşturulan 'Film Ekle' başlığını gösteren bir tarayıcı sekmesi

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:

Üst bilgi, gezinti alanı, içerik alanı, isteğe bağlı bölüm ve oturum açma bağlantılarını gösteren WebMatrix site şablonu tarafından oluşturulan düzen

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