Úvod do ASP.NET webových stránek – vytvoření konzistentního rozložení

Článek
07/13/2023

V tomto kurzu se dozvíte, jak pomocí rozložení vytvořit konzistentní vzhled stránek na webu, který používá ASP.NET webových stránek. Předpokládá se, že jste dokončili řadu odstraněním databázových dat na webových stránkách ASP.NET.

Naučíte se:

Co je stránka rozložení.

Jak kombinovat stránky rozložení s dynamickým obsahem.

Jak předat hodnoty na stránku rozložení.

O rozloženích

Všechny stránky, které jste zatím vytvořili, jsou kompletní, samostatné stránky. Všechny patří ke stejnému webu, ale nemají žádné společné prvky ani standardní vzhled.

Většina webů má konzistentní vzhled a rozložení. Pokud například přejdete na web Microsoft.com/web a podíváte se kolem, uvidíte, že všechny stránky odpovídají celkovému rozložení a vizuálnímu motivu:

Microsoft.com/web stránky webu zobrazující rozložení záhlaví, navigační oblasti, oblasti obsahu a zápatí

Neefektivní způsob, jak toto rozložení vytvořit, by bylo definovat záhlaví, navigační panel a zápatí zvlášť na každé stránce. Pokaždé byste duplikoval stejný kód. Pokud byste chtěli něco změnit (například aktualizovat zápatí), museli byste změnit každou stránku zvlášť.

To je místo, kde jsou stránky rozložení . V ASP.NET webové stránky můžete definovat stránku rozložení, která poskytuje celkový kontejner pro stránky na vašem webu. Stránka rozložení může například obsahovat záhlaví, navigační oblast a zápatí. Stránka rozložení obsahuje zástupný symbol hlavního obsahu.

Potom můžete definovat jednotlivé stránky obsahu, které obsahují kód a kód pouze pro danou stránku. Stránky obsahu nemusí být kompletní stránky HTML; nemusí mít <body> ani prvek. Obsahují také řádek kódu, který ASP.NET informuje, na jaké stránce rozložení chcete obsah zobrazit. Tady je obrázek, který přibližně ukazuje, jak tato relace funguje:

Koncepční diagram znázorňující dvě stránky obsahu a stránku rozložení, do které se vejdou

Tato interakce je snadno pochopitelná, když ji uvidíte v akci. V tomto kurzu změníte stránky filmů tak, aby používaly rozložení.

Přidání stránky rozložení

Začnete vytvořením stránky rozložení, která definuje typické rozložení stránky se záhlavím, zápatím a oblastí pro hlavní obsah. Na webu WebPagesMovies přidejte stránku CSHTML s názvem _Layout.cshtml.

Znak podtržítka na úvodním znaku ( _ ) je důležitý. Pokud název stránky začíná podtržítkem, ASP.NET neodešle stránku přímo do prohlížeče. Tato konvence umožňuje definovat stránky, které jsou pro váš web potřeba, ale uživatelé by o to neměli mít možnost žádat přímo.

Nahraďte obsah stránky následujícím kódem:

<!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>

Jak vidíte, tento kód je pouze HTML, který používá <div> elementy k definování tří oddílů na stránce a jednoho dalšího <div> elementu pro uložení těchto tří oddílů. Zápatí obsahuje část kódu Razor: @DateTime.Now.Year, který vykreslí aktuální rok na daném místě na stránce.

Všimněte si, že existuje odkaz na šablonu stylů s názvem Movies.css. Šablona stylů je místo, kde budou definovány podrobnosti fyzického rozložení prvků. Za chvíli to vytvoříte.

Jedinou neobvyklou funkcí na této stránce _Layout.cshtml je @Render.Body() řádek. To je zástupný symbol, kam se obsah přesune, když se toto rozložení sloučí s jinou stránkou.

Přidání souboru .css

Upřednostňovaným způsobem, jak definovat skutečné uspořádání (tj. vzhled) prvků na stránce, je použít pravidla šablony stylů CSS. Vytvoříte tedy soubor .css , který bude mít pravidla pro nové rozložení.

V nástroji WebMatrix vyberte kořen webu. Potom na pásu karet na kartě Soubory klikněte na šipku pod tlačítkem Nový a potom klikněte na Nová složka.

Možnost Nová složka v části Nová na pásu karet

Pojmenujte novou složku Styly.

Pojmenování nové složky Styly

Uvnitř nové složky Styly vytvořte soubor s názvem Movies.css.

Vytvoření nového souboru Movies.css

Obsah nového souboru .css nahraďte následujícím kódem:

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;}

O těchto pravidlech css toho moc neřekneme, až na dvě věci. Jedním z nich je, že kromě nastavení písem a velikostí pravidla používají absolutní umístění k určení umístění záhlaví, zápatí a oblasti hlavního obsahu. Pokud s umístěním v CSS začínáte, můžete si přečíst kurz umístění šablon stylů CSS na webu W3Schools.

Další věc, kterou je třeba poznamenat, je, že v dolní části jsme zkopírovali pravidla stylu, která byla původně definována jednotlivě v souboru Movies.cshtml . Tato pravidla se použila v kurzu Úvod k zobrazení dat pomocí ASP.NET webových stránek k tomu, aby WebGrid pomocník vykresloval značky, které do tabulky přidaly pruhy. (Pokud budete pro definice stylů používat soubor .css , můžete do něj také vložit pravidla stylu pro celý web.)

Aktualizace videosouboru tak, aby používal rozložení

Teď můžete aktualizovat existující soubory na webu tak, aby používaly nové rozložení. Otevřete soubor Movies.cshtml . V horní části jako první řádek kódu přidejte následující kód:

Layout = "~/_Layout.cshtml";

Stránka teď začíná takto:

@{
    Layout = "~/_Layout.cshtml";

    var db = Database.Open("WebPagesMovies") ;
    var selectCommand = "SELECT * FROM Movies";
    var searchTerm = "";

    // Etc.

Tento jeden řádek kódu ASP.NET, že při spuštění stránky Filmy by se měla sloučit se souborem _Layout.cshtml .

Vzhledem k tomu, že soubor Movies.cshtml teď používá stránku rozložení, můžete odebrat značky ze stránky Movies.cshtml , o kterou se postará soubor _Layout.cshtml . Vyřaďte značky <!DOCTYPE>, <html>a <body> otvírací a uzavírací značky. Seberte celý <head> prvek a jeho obsah, který zahrnuje pravidla stylu mřížky, protože tato pravidla teď máte v souboru .css . Zatímco jste u něj, změňte existující <h1> prvek na <h2> element. Prvek na stránce rozložení už máte <h1> . <h2> Změňte text na "Seznam filmů".

Za normálních okolností byste tyto druhy změn na stránce obsahu nemuseli provádět. Když spustíte web se stránkou rozložení, vytvoříte stránky obsahu bez všech těchto prvků. V tomto případě ale převádíte samostatnou stránku na stránku, která používá rozložení, takže je potřeba trochu vyčistit.

Po dokončení bude stránka Movies.cshtml vypadat takto:

@{
    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>

Testování rozložení

Teď vidíte, jak rozložení vypadá. V nástroji WebMatrix klikněte pravým tlačítkem na stránku Movies.cshtml a vyberte Spustit v prohlížeči. Když prohlížeč zobrazí stránku, vypadá jako tato stránka:

Stránka Filmy vykreslená pomocí rozložení

ASP.NET sloučil obsah stránky Movies.cshtml do stránky _Layout.cshtml přímo tam, kde RenderBody je metoda . A samozřejmě stránka _Layout.cshtml odkazuje na soubor .css , který definuje vzhled stránky.

Aktualizace stránky AddMovie tak, aby používala rozložení

Skutečnou výhodou rozložení je, že je můžete použít pro všechny stránky na vašem webu. Otevřete stránku AddMovie.cshtml .

Možná si pamatujete, že stránka AddMovie.cshtml původně obsahovala pravidla CSS, která definují vzhled chybových zpráv ověřování. Vzhledem k tomu, že teď máte pro svůj web soubor .css , můžete tato pravidla přesunout do souboru .css . Odeberte je ze souboru AddMovie.cshtml a přidejte je do dolní části souboru Movies.css . Přesouváte následující pravidla:

.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;
}

Teď v souboru AddMovie.cshtml proveďte stejné změny jako u souboru Movies.cshtml – přidejte Layout="~/_Layout.cshtml; a odeberte kód HTML, který je teď nadbytečný. <h1> Změňte element na <h2>. Po dokončení bude stránka vypadat jako v tomto příkladu:

@{
    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>

Spusťte stránku. Teď to vypadá jako na tomto obrázku:

Stránka Přidat filmy vykreslená pomocí rozložení

Chcete provést podobné změny na stránkách webu – EditMovie.cshtml a DeleteMovie.cshtml. Než to ale uděláte, můžete v rozložení udělat další změnu, díky které bude o něco flexibilnější.

Předání informací o názvu na stránku rozložení

Stránka _Layout.cshtml , kterou jste vytvořili, obsahuje <title> prvek, který je nastavený na "Web s filmem". Většina prohlížečů zobrazuje obsah tohoto prvku jako text na kartě:

Prvek nadpisu <> stránky zobrazený na kartě prohlížeče

Informace o tomto názvu jsou obecné. Předpokládejme, že chcete, aby byl text nadpisu konkrétnější pro aktuální stránku. (Text nadpisu používají také vyhledávací weby k určení, čeho se vaše stránka týká.) Na stránku rozložení můžete předat informace ze stránky obsahu, jako jsou Movies.cshtml nebo AddMovie.cshtml , a pak je použít k přizpůsobení toho, co se má stránka rozložení vykreslit.

Znovu otevřete stránku Movies.cshtml . Do kódu v horní části přidejte následující řádek:

Page.Title = "List Movies";

Objekt Page je k dispozici na všech stránkách .cshtml a slouží k tomuto účelu, konkrétně ke sdílení informací mezi stránkou a jejím rozložením.

Otevřete stránku _Layout.cshtml . <title> Změňte element tak, aby vypadal jako tento kód:

<title>@Page.Title</title>

Tento kód vykreslí vše, co je v právu Page.Title vlastnosti na daném místě na stránce.

Spusťte stránku Movies.cshtml . Tentokrát se na kartě prohlížeče zobrazí hodnota , kterou jste předali jako hodnotu Page.Title:

Karta prohlížeče zobrazující dynamicky vytvořený název

Pokud chcete, zobrazte zdroj stránky v prohlížeči. Uvidíte, že se element vykreslí <title> jako <title>List Movies</title>.

Tip

Objekt Page

Užitečnou vlastností Page je, že se jedná o dynamický objekt – Title vlastnost není pevný ani vyhrazený název. Pro hodnotu objektu Page můžete použít libovolný název. Mohli byste například snadno předat název pomocí vlastnosti s názvem Page.CurrentName nebo Page.MyPage. Jediným omezením je, že název musí dodržovat normální pravidla pro to, jaké vlastnosti lze pojmenovat. (Název například nemůže obsahovat mezeru.)

Pomocí objektu Page můžete předat libovolný počet hodnot. Pokud byste chtěli předat informace o filmu na stránku rozložení, mohli byste hodnoty předat pomocí například Page.MovieTitle a Page.Genre .Page.MovieYear (Nebo jakákoli jiná jména, která jste vymysleli pro uložení informací.) Jediným požadavkem, který je pravděpodobně zřejmý, je, že na stránce obsahu a na stránce rozložení musíte použít stejné názvy.

Informace, které předáte pomocí objektu Page , se neomezují jenom na text, který se zobrazí na stránce rozložení. Na stránku rozložení můžete předat hodnotu a kód na stránce rozložení pak může tuto hodnotu použít k rozhodnutí, jestli se má zobrazit část stránky, jaký soubor .css se má použít atd. Hodnoty, které předáte objektu Page , se podobají všem ostatním hodnotám, které použijete v kódu. Je to jen to, že hodnoty pocházejí ze stránky obsahu a jsou předány na stránku rozložení.

Otevřete stránku AddMovie.cshtml a na začátek kódu přidejte řádek, který poskytuje název stránky AddMovie.cshtml :

Page.Title = "Add a Movie";

Spusťte stránku AddMovie.cshtml . Uvidíte tam nový název:

Karta prohlížeče zobrazující dynamicky vytvořený název

Aktualizace zbývajících stránek tak, aby používaly rozložení

Teď můžete dokončit zbývající stránky na webu, aby používaly nové rozložení. Otevřete EditMovie.cshtml a DeleteMovie.cshtml a proveďte v každém z nich stejné změny.

Přidejte řádek kódu, který odkazuje na stránku rozložení:

Layout = "~/_Layout.cshtml";

Přidejte řádek pro nastavení názvu stránky:

Page.Title = "Edit a Movie";

nebo:

Page.Title = "Delete a Movie";

Odeberte všechny nadbytečné kódy HTML – v podstatě ponechte pouze bity, které jsou uvnitř elementu <body> (plus blok kódu nahoře).

Změňte element na <h1> element.<h2>

Po provedení těchto změn je otestujte a ujistěte se, že se zobrazují správně a že je název správný.

Dělení myšlenek na stránky rozložení

V tomto kurzu jste vytvořili stránku _Layout.cshtml a pomocí metody jste sloučili RenderBody obsah z jiné stránky. To je základní vzor pro použití rozložení ve webových stránkách.

Stránky rozložení obsahují další funkce, které jsme tady nepopisovali. Můžete například vnořit stránky rozložení – jedna stránka rozložení může zase odkazovat na jinou. Vnořená rozložení můžou být užitečná, pokud pracujete s dílčími oddíly webu, které vyžadují různá rozložení. K nastavení pojmenovaných oddílů na stránce rozložení můžete použít také další metody (například RenderSection).

Kombinace stránek rozložení a souborů .css je výkonná. Jak uvidíte v další sérii kurzů, v nástroji WebMatrix můžete vytvořit web založený na šabloně, která vám poskytne web s předem připravenými funkcemi. Šablony dobře využívají stránky rozložení a šablony stylů CSS k vytvoření webů, které vypadají skvěle a mají funkce, jako jsou nabídky. Tady je snímek obrazovky domovské stránky z webu založeného na šabloně, který zobrazuje funkce, které používají stránky rozložení a šablony stylů CSS:

Rozložení vytvořené šablonou webu WebMatrix zobrazující záhlaví, navigační oblast, oblast obsahu, volitelný oddíl a odkazy pro přihlášení

Kompletní výpis pro stránku filmu (aktualizováno tak, aby používalo stránku rozložení)

@{
    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>

Kompletní výpis stránky pro přidání stránky videa (aktualizováno pro rozložení)

@{
    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>

Kompletní výpis stránky pro odstranění stránky videa (aktualizováno pro rozložení)

@{
    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>

Kompletní výpis stránky pro úpravu stránky videa (aktualizováno pro rozložení)

@{
    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>

Připravujeme další

V dalším kurzu se dozvíte, jak publikovat web na internetu, aby ho všichni viděli.

Další materiály

Vytvoření konzistentního vzhledu – článek, který obsahuje další podrobnosti o práci s rozloženími. Popisuje také, jak předat hodnotu stránce rozložení, která zobrazuje nebo skryje část obsahu.
Vnořené stránky rozložení s Razor – Mike Brind bloguje o příkladu vnoření stránek rozložení. (Zahrnuje stažení stránek.)

Předchozí Další

Sdílet prostřednictvím

Úvod do ASP.NET webových stránek – vytvoření konzistentního rozložení

O rozloženích

Přidání stránky rozložení

Přidání souboru .css

Aktualizace videosouboru tak, aby používal rozložení

Testování rozložení

Aktualizace stránky AddMovie tak, aby používala rozložení

Předání informací o názvu na stránku rozložení

Aktualizace zbývajících stránek tak, aby používaly rozložení

Dělení myšlenek na stránky rozložení

Kompletní výpis pro stránku filmu (aktualizováno tak, aby používalo stránku rozložení)

Kompletní výpis stránky pro přidání stránky videa (aktualizováno pro rozložení)

Kompletní výpis stránky pro odstranění stránky videa (aktualizováno pro rozložení)

Kompletní výpis stránky pro úpravu stránky videa (aktualizováno pro rozložení)

Připravujeme další

Další materiály

Váš názor

Další materiály