Разработка сайта 101: Часть 7, Создание страницы редактирования данных


13.01.2012

От автора: Дорогие друзья, приношу извинения, что вновь получилась очень длинная статья (почти 10500 знаков, да ещё 6 иллюстраций), однако разрывать её пополам значило бы резать по живому. Обращайтесь ко мне через форму обратной связи или почту (a@coffeediz.ru) - я скину вам оригинал в ворде, если вам так будет удобнее читать. Спасибо за понимание!

Итак, вы уже научились создавать свою страницу фильмов, разрабатывать ее (уроки с 1 по 4), делать так, чтобы она управляла данными (часть 1 и часть 2), и затем создавать форму, которую вы могли использовать для добавления фильмов в базу данных. Следующий шаг будет заключаться в создании подобной формы, которую вы сможете использовать для редактирования уже существующего списка фильмов.

Давайте посмотрим на приложение, оно теперь выглядит так:

Создание страницы редактирования данных

Видно, что у страницы со списком фильмов есть возможность добавления нового фильма с помощью ссылки в нижней части страницы. Чтобы получился эффект наведения мыши, мы сделали каждую запись фильма в списке гиперссылкой, используя тег <a>. В этом был смысл, потому что, если мы хотим отредактировать фильм, то мы должны использовать эту гиперссылку. Давайте подробнее рассмотрим этот процесс.

Создание страницы редактирования

Во-первых, давайте создадим новую страницу CSHTML в WebMatrix и назовем ее EditMovie.cshtml. У этой страницы в конечном счете будет форма, которая заполнена описанием фильма, который вы выбрали, и когда изменяли это описание. Изменения будут представлены в базе данных.

Замените по умолчанию содержащийся контент в EditMovie.cshtml такой формой. Она должна выглядеть подобно той, которую вы создавали в последней главе.

<h1>Edit a Movie</h1><form action="" method="post">

<p>Name:<input type="text" name="formName" /></p>

<p>Genre:<input type="text" name="formGenre" /></p>

<p>Year:<input type="text" name="formYear" /></p>

<p><input type="submit" value="Edit Movie" /></p></form>

Присвоение имени странице редактирования в списке фильмов

Итак, у нас теперь есть основа для формы редактирования. Но как сделать инициализацию формы с содержанием базы данных для определенного фильма, которую вы выбрали? Ну, во-первых, давайте выясним, как сообщить этой странице, какой фильм вы хотите отредактировать. Сделать это мы должны, вернувшись к странице dataMovies.cshtml.

Как вы помните, мы выписывали следующие элементы списка:

<li><a href="#">@row.Name, @row.Genre, @row.ReleaseYear</a></li>

Гиперссылка никуда нас не привела, потому что href содержит значение "#". Так что давайте заставим гиперссылку вести на нашу страницу EditMovie.cshtml, как показано здесь:

<li><a href="EditMovie.cshtml ">@row.Name, @row.Genre, @row.ReleaseYear</a></li>

Хорошо, но относительно фильма, который вы выбираете, она будет всегда называться EditMovie.cshtml, и эта страница не будет понимать, какой фильм вы редактируете. Но ведь страница dataMovies.cshtml уже (!) понимает, какой фильм вы редактируете, потому что вы выбрали его таким образом, что для передачи информации можете использовать ID фильма:

EditMovie.cshtml?id=<something>

Мы уже знаем, что идентификатор текущей строки – это (@row.id), и можем использовать Razor для выписывания ID. Мы выписываем список и таким образом изменяем <li>, чтобы код был похож на следующий:

<li><a href="EditMovie.cshtml?id=@row.id">@row.Name, @row.Genre, @row.ReleaseYear</a></li>

Теперь, когда мы посмотрим на dataMovies.cshtml, мы получим следующее:

Создание страницы редактирования данных

Действительно нет никаких отличий, но что произойдет, когда мы посмотрим на HTML вариант этой страницы? Это уже не страница .cshtml, которую вы видели в WebMatrix. Вместо нее сервер сгенерировал HTML (инструкциями в cshtml) и передал браузеру.

Вы можете просмотреть страницу в Internet Explorer 9 (корректная работа в более старых браузерах не гарантируется, к сожалению), щелкая правой кнопкой мыши по любому месту на странице и выбрав «View Source» (Просмотреть исходный код) .

1: <!DOCTYPE html>

2: <html lang="en">

3: <head>

4: <meta charset="utf-8" />

5: <title>My Favorite Movies</title>

6: <link rel="stylesheet" type="text/css" href="movies-html5.css" />

7: </head>

8:

9: <body>

10: <header>

11: <h1>A list of my Favorite Movies</h1>

12: </header>

13:

14: <div id="movieslist">

15: <ol>

16: <li><a href="EditMovie.cshtml?id=1">It&#39;s a wonderful life, Comedy, 1946</a></li>

17: <li><a href="EditMovie.cshtml?id=2">Lord of the Rings, Drama, 2001</a></li>

18: <li><a href="EditMovie.cshtml?id=3">The Fourth World, Anime, 2012</a></li>

19: <li><a href="EditMovie.cshtml?id=4">The Lion King, Family, 1994</a></li>

20: <li><a href="EditMovie.cshtml?id=5">Forrest Gump, Comedy, 1994</a></li>

21: <li><a href="EditMovie.cshtml?id=6">The Million Year Journey, Anime, 2014</a></li>

22: </ol>

23:

24: <a href="AddMovie.cshtml">Add a new movie</a>

25: </div>

26:

27: <footer>

28:

29: This site was built using Microsoft WebMatrix.

30:

31: <a href="http://web.ms/webmatrix">Download it now.</a>

32:

33: </footer>

34:

35: </html>

Теперь посмотрите, можно ли извлечь этот ID при загрузке EditMovie.cshtml и использовать его, чтобы найти определенную запись, которая нам интересна.

Последние штрихи в странице редактирования

Давайте вернемся к EditMovie.cshtml.

Помните ранее, мы видели, что, если вы помещаете @ { вверху страницы и вписываете внутрь код, тогда код выполнялся бы, если страница загружалась? Это идеальное место для размещения кода, чтобы считывать ID, который был в URL страницы. Используйте этот метод, чтобы найти имя, жанр и год выпуска фильма.

Когда вы вызываете страницу с синтаксисом, который мы используем (то есть PageName.cshtml?<Parameter>=<Value>), вы можете узнать значение параметра, используя объект запроса. Так, например, для EditMovie.cshtml? id=6 можно использовать следующий код:

var id=Request["id"];

Этот код говорит нам о том, что создается локальная переменная, называемая «идентификатором» (ID) и для инициализации используется значение параметра (также называемое «идентификатором» (ID)). WebMatrix понимает, что оба идентификатора отличаются контекстом использования.

Теперь, когда у нас есть «идентификатор» (ID), мы можем использовать его с запросом «SELECT» в SQL, чтобы найти запись фильма.

1: var id=Request["id"];

2: var SQLSELECT = "SELECT * FROM Favorites where ID=@0";

3: var db = Database.Open("Movies");

4: var Movie = db.QuerySingle(SQLSELECT,id);

5: var MovieName=Movie.Name;

6: var MovieGenre=Movie.Genre;

7: var MovieYear=Movie.ReleaseYear;

Правильно? Мы пишем Select * from Favorites, где поле ID равно ID, который мы передали и затем выполнили в базе данных. Поскольку нас интересует только 1 запись, мы пишем db.QuerySingle, чтобы получить единственную запись.

Затем выполняется запрос, и Имя, Жанр и значения ReleaseYear загружаются в локальные переменные.

Это очень хорошо, но, проблема заключается в значениях переменных, а не в форме. Как пользователь редактирует их? Хорошо, ответ прост – он помнит, что этот код выполняется перед рендерингом страницы, таким образом, у нас есть переменные до того, как мы напишем HTML. Мы можем инициализировать форму с этими значениями. Форма использует поля <input>, чтобы дать нам текстовые поля, которые поддерживают свойство «value». Теперь мы можем использовать его непосредственно для инициализации переменных.

Вот полный код страницы:

1: @{

2: var id=Request["id"];

3: var SQLSELECT = "SELECT * FROM Favorites where ID=@0";

4: var db = Database.Open("Movies");

5: var Movie = db.QuerySingle(SQLSELECT,id);

6: var MovieName=Movie.Name;

7: var MovieGenre=Movie.Genre;

8: var MovieYear=Movie.ReleaseYear;

9: }

10:

11: <h1>Edit a Movie</h1>

12: <form action="" method="post">

13: <p>Name:<input type="text" name="formName" value="@MovieName" /></p>

14: <p>Genre:<input type="text" name="formGenre" value="@MovieGenre" /></p>

15: <p>Year:<input type="text" name="formYear" value="@MovieYear" /></p>

16: <p><input type="submit" value="Edit Movie" /></p>

17: </form>

Теперь, когда вы запустите страницу, вы увидеть, что она инициализирована со значениями фильма. Попробуйте сделать это, работая сначала в dataMovies.cshtml, как показано здесь:

Создание страницы редактирования данных

Затем, выберите фильм. Вы можете увидите на экране, что я выбираю фильм «The Fourth World», вызываемый со страницы EditMovie.cshtml и имеющий идентификатор (ID) 3.

После закрузки страница будет похожа на эту:

Создание страницы редактирования данных

Вы можете вводить значения в поля, чтобы изменить любое из значений, но когда вы нажмете «Edit Movie» (Редактировать фильм), ничего не произойдет. Возможно вы помните из страницы «Add Movie» (Добавить фильм) в последней главе, что должны быть обработаны триггеры кнопки, которые представляет форма - POST HTTP (или GET HTTP, который работает, когда страницу вызывают из гиперссылки).

Вы делали это раньше, если использовали часть кода if(IsPost), так что давайте сделаем то же самое и здесь.

1: if(IsPost){

2: MovieName=Request["formName"];

3: MovieGenre=Request["formGenre"];

4: MovieYear=Request["formYear"];

5: }

Для Имени, Жанра и значений Года Выпуска форма использует значения formName, formGenre и formYear (я ставлю префикс «f», чтобы запомнить, что они получаются из формы). В объекте запроса их не ставим. Если пользователь будет всегда их редактировать, новые значения отобразятся здесь, таким образом, мы сможем обновлять базу данных.

Чтобы обновить базу данных, используйте команду SQL «UPDATE», которая имеет следующий синтаксис:

UPDATE table SET column=value, column=value, column=value... WHERE key=value

Так в нашем случае у нас есть 3 столбца, в которых мы обновляем ID. Вот код для создания запроса и его выполнения:

1: var SQLUPDATE = "UPDATE Favorites Set Name=@0, Genre=@1, ReleaseYear=@2 WHERE id=@3";

2: db.Execute(SQLUPDATE, MovieName, MovieGenre, MovieYear,id);

Для более легкого прочтения SQL здесь используются параметры (@0, @1 и т.д., чтобы не перепутать с теми, которые отмечены при запуске блока Razor). Помните, что значения @ заменены значениями, находящимися в db.Execute(). В данном случае MovieName – это @0, MovieGenre – это @1 и т.д.

Наконец, как только фильм отредактирован, хорошей идеей будет перенаправить его к странице списка так, чтобы мы могли видеть результаты нашего редактирования, обновленного динамически. Закончим с добавлением фильмов на страницу. Вот получившийся код:

Response.Redirect("dataMovies.cshtml");

Вот полный код страницы EditMovies.cshtml:

1: @{

2: var id=Request["id"];

3: var SQLSELECT = "SELECT * FROM Favorites where ID=@0";

4: var db = Database.Open("Movies");

5: var Movie = db.QuerySingle(SQLSELECT,id);

6: var MovieName=Movie.Name;

7: var MovieGenre=Movie.Genre;

8: var MovieYear=Movie.ReleaseYear;

9:

10: if(IsPost){

11: MovieName=Request["formName"];

12: MovieGenre=Request["formGenre"];

13: MovieYear=Request["formYear"];

14: var SQLUPDATE = "UPDATE Favorites Set Name=@0, Genre=@1, ReleaseYear=@2 WHERE id=@3";

15: db.Execute(SQLUPDATE, MovieName, MovieGenre, MovieYear,id);

16: Response.Redirect("dataMovies.cshtml");

17: }

18: }

19:

20: <h1>Edit a Movie</h1>

21: <form action="" method="post">

22: <p>Name:<input type="text" name="formName" value="@MovieName" /></p>

23: <p>Genre:<input type="text" name="formGenre" value="@MovieGenre" /></p>

24: <p>Year:<input type="text" name="formYear" value="@MovieYear" /></p>

25: <p><input type="submit" value="Edit Movie" /></p>

26: </form>

Давайте посмотрим, что произойдет, когда мы выполним этот код. Откройте страницу dataMovies.cshtml и отредактируйте один из фильмов. У вас должно получится следующее:

Создание страницы редактирования данных

Если теперь вы отредактируете значение поля «Год», изменив 2012 на 2011, и нажмете кнопку «Edit Movie» (редактировать фильм), то база данных обновится, и вы будете перенаправлены к списку фильмов, в котором увидете, что год выпуска изменился на 2011.

Создание страницы редактирования данных

Теперь вы успешно отредактировали запись в своей базе данных!

Заключение

При создании сайтов с управляемыми данными важно не только предоставлять пользователям возможность просмотра и добавления записей, но также и их редактирования. В этой главе вы научились легко делать это с использованием WebMatrix, создавая страницу редактирования, и используя параметр инициализации страницы с требуемой записью. Вы узнали, как использовать код Razor для инициализации формы с правильными значениями из базы данных, и использовали POST HTTP с обновленными значениями, записывая их обратно в базу данных. Проделав это, вы увидели, как перенаправить пользователя из формы к списку фильмов, и посмотрели результаты редактирования. На следующем шаге вы предоставите пользователям возможность удаления записи из базы данных!

Отдельно приношу извинения за все опечатки и ошибки в предыдущих частях - такую длинную методичку, да ещё с такими статьями очень тяжело писать. К сожалению, в отличие от печатной публикации здесь нет редактора, который на свежую голову вычитал бы мою работу. Если вы нашли опечатку или ошибку - пишите мне на почту!

13 января 2012
Задойный А.В.

Разработка сайта 101: Часть 7, Создание страницы редактирования данных

<p style="text-align: justify; "><i><font color="#00a650">От автора:</font> Дорогие друзья, приношу извинения, что вновь получилась очень длинная статья (почти 10500 знаков, да ещё 6 иллюстраций), однако разрывать её пополам значило бы резать по живому. Обращайтесь ко мне через форму обратной связи или почту (a@coffeediz.ru) - я скину вам оригинал в ворде, если вам так будет удобнее читать. Спасибо за понимание!</i></p> <p style="text-align: justify; ">Итак, вы уже научились создавать свою страницу фильмов, разрабатывать ее (уроки с 1 по 4), делать так, чтобы она управляла данными (<a href="/information/veb_razrabotka_101_chast_5_ispolzovanie_dannykh_nachalo/" title="Веб-разработка 101: Часть 5, Использование данных (началое)" >часть 1</a> и <a href="/information/veb_razrabotka_101_chast_5_ispolzovanie_dannykh_okonchanie/" title="Веб-разработка 101: Часть 5, Использование данных (окончание)" >часть 2</a>), и затем создавать форму, которую вы могли использовать для <a href="/information/razrabotka_sayta_101_chast_6_sozdanie_dobavlyayushchey_informatsionnoy_stranitsy/" title="Разработка сайта 101: Часть 6, Создание добавляющей информационной страницы" >добавления фильмов в базу данных</a>. Следующий шаг будет заключаться в создании подобной формы, которую вы сможете использовать для редактирования уже существующего списка фильмов.</p> <p style="text-align: justify; ">Давайте посмотрим на приложение, оно теперь выглядит так:</p> <p><img src="/upload/medialibrary/3c6/3c6565be20a8028ef7cd286a8a5b1ede.PNG" title="Создание страницы редактирования данных" hspace="5" vspace="5" border="0" alt="Создание страницы редактирования данных" width="700" height="383" /></p> <p style="text-align: justify; ">Видно, что у страницы со списком фильмов есть возможность добавления нового фильма с помощью ссылки в нижней части страницы. Чтобы получился эффект наведения мыши, мы сделали каждую запись фильма в списке гиперссылкой, используя тег &lt;a&gt;. В этом был смысл, потому что, если мы хотим отредактировать фильм, то мы должны использовать эту гиперссылку. Давайте подробнее рассмотрим этот процесс.</p> <h2>Создание страницы редактирования</h2> <p style="text-align: justify; ">Во-первых, давайте создадим новую страницу CSHTML в WebMatrix и назовем ее EditMovie.cshtml. У этой страницы в конечном счете будет форма, которая заполнена описанием фильма, который вы выбрали, и когда изменяли это описание. Изменения будут представлены в базе данных.</p> <p style="text-align: justify; ">Замените по умолчанию содержащийся контент в EditMovie.cshtml такой формой. Она должна выглядеть подобно той, которую вы создавали в последней главе.</p> <p style="text-align: justify; "><span style="background-color: rgb(225, 225, 225); ">&lt;h1&gt;Edit a Movie&lt;/h1&gt;&lt;form action=&quot;&quot; method=&quot;post&quot;&gt; </span></p> <p style="text-align: justify; "><span style="background-color: rgb(225, 225, 225); ">&lt;p&gt;Name:&lt;input type=&quot;text&quot; name=&quot;formName&quot; /&gt;&lt;/p&gt; </span></p> <p style="text-align: justify; "><span style="background-color: rgb(225, 225, 225); "> &lt;p&gt;Genre:&lt;input type=&quot;text&quot; name=&quot;formGenre&quot; /&gt;&lt;/p&gt; </span></p> <p style="text-align: justify; "><span style="background-color: rgb(225, 225, 225); "> &lt;p&gt;Year:&lt;input type=&quot;text&quot; name=&quot;formYear&quot; /&gt;&lt;/p&gt; </span></p> <p style="text-align: justify; "><span style="background-color: rgb(225, 225, 225); "> &lt;p&gt;&lt;input type=&quot;submit&quot; value=&quot;Edit Movie&quot; /&gt;&lt;/p&gt;&lt;/form&gt; </span></p> <h3>Присвоение имени странице редактирования в списке фильмов</h3> <p style="text-align: justify; ">Итак, у нас теперь есть основа для формы редактирования. Но как сделать инициализацию формы с содержанием базы данных для определенного фильма, которую вы выбрали? Ну, во-первых, давайте выясним, как сообщить этой странице, какой фильм вы хотите отредактировать. Сделать это мы должны, вернувшись к странице dataMovies.cshtml.</p> <p style="text-align: justify; ">Как вы помните, мы выписывали следующие элементы списка:</p> <p><span style="background-color: rgb(225, 225, 225); ">&lt;li&gt;&lt;a href=&quot;#&quot;&gt;@row.Name, @row.Genre, @row.ReleaseYear&lt;/a&gt;&lt;/li&gt; </span></p> <p style="text-align: justify; ">Гиперссылка никуда нас не привела, потому что href содержит значение &quot;#&quot;. Так что давайте заставим гиперссылку вести на нашу страницу EditMovie.cshtml, как показано здесь:</p> <p><span style="background-color: rgb(215, 215, 215); ">&lt;li&gt;&lt;a href=&quot;EditMovie.cshtml &quot;&gt;@row.Name, @row.Genre, @row.ReleaseYear&lt;/a&gt;&lt;/li&gt; </span></p> <p style="text-align: justify; ">Хорошо, но относительно фильма, который вы выбираете, она будет всегда называться EditMovie.cshtml, и эта страница не будет понимать, какой фильм вы редактируете. Но ведь страница dataMovies.cshtml уже (!) понимает, какой фильм вы редактируете, потому что вы выбрали его таким образом, что для передачи информации можете использовать ID фильма:</p> <p><span style="background-color: rgb(215, 215, 215); ">EditMovie.cshtml?id=&lt;something&gt;</span></p> <p style="text-align: justify; ">Мы уже знаем, что идентификатор текущей строки – это (@row.id), и можем использовать Razor для выписывания ID. Мы выписываем список и таким образом изменяем &lt;li&gt;, чтобы код был похож на следующий:</p> <p><span style="background-color: rgb(215, 215, 215); ">&lt;li&gt;&lt;a href=&quot;EditMovie.cshtml?id=@row.id&quot;&gt;@row.Name, @row.Genre, @row.ReleaseYear&lt;/a&gt;&lt;/li&gt; </span></p> <p style="text-align: justify; ">Теперь, когда мы посмотрим на dataMovies.cshtml, мы получим следующее:</p> <p><img src="/upload/medialibrary/48b/48bc08c56e7cdd2abe13d0ded54fc1b0.PNG" title="Создание страницы редактирования данных" hspace="5" vspace="5" border="0" alt="Создание страницы редактирования данных" width="700" height="383" /></p> <p style="text-align: justify; ">Действительно нет никаких отличий, но что произойдет, когда мы посмотрим на HTML вариант этой страницы? Это уже не страница .cshtml, которую вы видели в WebMatrix. Вместо нее сервер сгенерировал HTML (инструкциями в cshtml) и передал браузеру.</p> <p style="text-align: justify; ">Вы можете просмотреть страницу в Internet Explorer 9 (корректная работа в более старых браузерах не гарантируется, к сожалению), щелкая правой кнопкой мыши по любому месту на странице и выбрав «View Source» (Просмотреть исходный код) .</p> <p style="text-align: justify; "><span style="background-color: rgb(215, 215, 215); "> 1: &lt;!DOCTYPE html&gt; </span></p> <p style="text-align: justify; "><span style="background-color: rgb(215, 215, 215); "> 2: &lt;html lang=&quot;en&quot;&gt; </span></p> <p style="text-align: justify; "><span style="background-color: rgb(215, 215, 215); "> 3: &lt;head&gt; </span></p> <p style="text-align: justify; "><span style="background-color: rgb(215, 215, 215); "> 4: &lt;meta charset=&quot;utf-8&quot; /&gt; </span></p> <p style="text-align: justify; "><span style="background-color: rgb(215, 215, 215); "> 5: &lt;title&gt;My Favorite Movies&lt;/title&gt; </span></p> <p style="text-align: justify; "><span style="background-color: rgb(215, 215, 215); "> 6: &lt;link rel=&quot;stylesheet&quot; type=&quot;text/css&quot; href=&quot;movies-html5.css&quot; /&gt; </span></p> <p style="text-align: justify; "><span style="background-color: rgb(215, 215, 215); "> 7: &lt;/head&gt; </span></p> <p style="text-align: justify; "><span style="background-color: rgb(215, 215, 215); "> 8: </span></p> <p style="text-align: justify; "><span style="background-color: rgb(215, 215, 215); "> 9: &lt;body&gt; </span></p> <p style="text-align: justify; "><span style="background-color: rgb(215, 215, 215); "> 10: &lt;header&gt; </span></p> <p style="text-align: justify; "><span style="background-color: rgb(215, 215, 215); "> 11: &lt;h1&gt;A list of my Favorite Movies&lt;/h1&gt; </span></p> <p style="text-align: justify; "><span style="background-color: rgb(215, 215, 215); "> 12: &lt;/header&gt; </span></p> <p style="text-align: justify; "><span style="background-color: rgb(215, 215, 215); "> 13: </span></p> <p style="text-align: justify; "><span style="background-color: rgb(215, 215, 215); "> 14: &lt;div id=&quot;movieslist&quot;&gt; </span></p> <p style="text-align: justify; "><span style="background-color: rgb(215, 215, 215); "> 15: &lt;ol&gt; </span></p> <p style="text-align: justify; "><span style="background-color: rgb(215, 215, 215); "> 16: &lt;li&gt;&lt;a href=&quot;EditMovie.cshtml?id=1&quot;&gt;It&amp;#39;s a wonderful life, Comedy, 1946&lt;/a&gt;&lt;/li&gt; </span></p> <p style="text-align: justify; "><span style="background-color: rgb(215, 215, 215); "> 17: &lt;li&gt;&lt;a href=&quot;EditMovie.cshtml?id=2&quot;&gt;Lord of the Rings, Drama, 2001&lt;/a&gt;&lt;/li&gt; </span></p> <p style="text-align: justify; "><span style="background-color: rgb(215, 215, 215); "> 18: &lt;li&gt;&lt;a href=&quot;EditMovie.cshtml?id=3&quot;&gt;The Fourth World, Anime, 2012&lt;/a&gt;&lt;/li&gt; </span></p> <p style="text-align: justify; "><span style="background-color: rgb(215, 215, 215); "> 19: &lt;li&gt;&lt;a href=&quot;EditMovie.cshtml?id=4&quot;&gt;The Lion King, Family, 1994&lt;/a&gt;&lt;/li&gt; </span></p> <p style="text-align: justify; "><span style="background-color: rgb(215, 215, 215); "> 20: &lt;li&gt;&lt;a href=&quot;EditMovie.cshtml?id=5&quot;&gt;Forrest Gump, Comedy, 1994&lt;/a&gt;&lt;/li&gt; </span></p> <p style="text-align: justify; "><span style="background-color: rgb(215, 215, 215); "> 21: &lt;li&gt;&lt;a href=&quot;EditMovie.cshtml?id=6&quot;&gt;The Million Year Journey, Anime, 2014&lt;/a&gt;&lt;/li&gt; </span></p> <p style="text-align: justify; "><span style="background-color: rgb(215, 215, 215); "> 22: &lt;/ol&gt; </span></p> <p style="text-align: justify; "><span style="background-color: rgb(215, 215, 215); "> 23: </span></p> <p style="text-align: justify; "><span style="background-color: rgb(215, 215, 215); "> 24: &lt;a href=&quot;AddMovie.cshtml&quot;&gt;Add a new movie&lt;/a&gt; </span></p> <p style="text-align: justify; "><span style="background-color: rgb(215, 215, 215); "> 25: &lt;/div&gt; </span></p> <p style="text-align: justify; "><span style="background-color: rgb(215, 215, 215); "> 26: </span></p> <p style="text-align: justify; "><span style="background-color: rgb(215, 215, 215); "> 27: &lt;footer&gt; </span></p> <p style="text-align: justify; "><span style="background-color: rgb(215, 215, 215); "> 28: </span></p> <p style="text-align: justify; "><span style="background-color: rgb(215, 215, 215); "> 29: This site was built using Microsoft WebMatrix. </span></p> <p style="text-align: justify; "><span style="background-color: rgb(215, 215, 215); "> 30: </span></p> <p style="text-align: justify; "><span style="background-color: rgb(215, 215, 215); "> 31: &lt;a href=&quot;http://web.ms/webmatrix&quot;&gt;Download it now.&lt;/a&gt; </span></p> <p style="text-align: justify; "><span style="background-color: rgb(215, 215, 215); "> 32: </span></p> <p style="text-align: justify; "><span style="background-color: rgb(215, 215, 215); "> 33: &lt;/footer&gt; </span></p> <p style="text-align: justify; "><span style="background-color: rgb(215, 215, 215); "> 34: </span></p> <p style="text-align: justify; "><span style="background-color: rgb(215, 215, 215); "> 35: &lt;/html&gt;</span></p> <p style="text-align: justify; ">Теперь посмотрите, можно ли извлечь этот ID при загрузке EditMovie.cshtml и использовать его, чтобы найти определенную запись, которая нам интересна.</p> <h2>Последние штрихи в странице редактирования</h2> <p style="text-align: justify; ">Давайте вернемся к EditMovie.cshtml.</p> <p style="text-align: justify; ">Помните ранее, мы видели, что, если вы помещаете <span style="background-color: rgb(225, 225, 225); ">@ {</span> вверху страницы и вписываете внутрь код, тогда код выполнялся бы, если страница загружалась? Это идеальное место для размещения кода, чтобы считывать ID, который был в URL страницы. Используйте этот метод, чтобы найти имя, жанр и год выпуска фильма.</p> <p style="text-align: justify; ">Когда вы вызываете страницу с синтаксисом, который мы используем (то есть PageName.cshtml?&lt;Parameter&gt;=&lt;Value&gt;), вы можете узнать значение параметра, используя объект запроса. Так, например, для EditMovie.cshtml? id=6 можно использовать следующий код:</p> <p style="text-align: justify; "><span style="background-color: rgb(225, 225, 225); ">var id=Request[&quot;id&quot;];</span></p> <p style="text-align: justify; ">Этот код говорит нам о том, что создается локальная переменная, называемая «идентификатором» (ID) и для инициализации используется значение параметра (также называемое «идентификатором» (ID)). WebMatrix понимает, что оба идентификатора отличаются контекстом использования.</p> <p style="text-align: justify; ">Теперь, когда у нас есть «идентификатор» (ID), мы можем использовать его с запросом «SELECT» в SQL, чтобы найти запись фильма.</p> <p style="text-align: justify; "><span style="background-color: rgb(225, 225, 225); "> 1: var id=Request[&quot;id&quot;]; </span></p> <p style="text-align: justify; "><span style="background-color: rgb(225, 225, 225); "> 2: var SQLSELECT = &quot;SELECT * FROM Favorites where ID=@0&quot;; </span></p> <p style="text-align: justify; "><span style="background-color: rgb(225, 225, 225); "> 3: var db = Database.Open(&quot;Movies&quot;); </span></p> <p style="text-align: justify; "><span style="background-color: rgb(225, 225, 225); "> 4: var Movie = db.QuerySingle(SQLSELECT,id); </span></p> <p style="text-align: justify; "><span style="background-color: rgb(225, 225, 225); "> 5: var MovieName=Movie.Name; </span></p> <p style="text-align: justify; "><span style="background-color: rgb(225, 225, 225); "> 6: var MovieGenre=Movie.Genre; </span></p> <p style="text-align: justify; "><span style="background-color: rgb(225, 225, 225); "> 7: var MovieYear=Movie.ReleaseYear; </span></p> <p style="text-align: justify; ">Правильно? Мы пишем Select * from Favorites, где поле ID равно ID, который мы передали и затем выполнили в базе данных. Поскольку нас интересует только 1 запись, мы пишем db.QuerySingle, чтобы получить единственную запись.</p> <p style="text-align: justify; ">Затем выполняется запрос, и Имя, Жанр и значения ReleaseYear загружаются в локальные переменные.</p> <p style="text-align: justify; ">Это очень хорошо, но, проблема заключается в значениях переменных, а не в форме. Как пользователь редактирует их? Хорошо, ответ прост – он помнит, что этот код выполняется перед рендерингом страницы, таким образом, у нас есть переменные до того, как мы напишем HTML. Мы можем инициализировать форму с этими значениями. Форма использует поля &lt;input&gt;, чтобы дать нам текстовые поля, которые поддерживают свойство «value». Теперь мы можем использовать его непосредственно для инициализации переменных.</p> <p style="text-align: justify; ">Вот полный код страницы:</p> <p style="text-align: justify; "><span style="background-color: rgb(225, 225, 225); "> 1: @{ </span></p> <p style="text-align: justify; "><span style="background-color: rgb(225, 225, 225); "> 2: var id=Request[&quot;id&quot;]; </span></p> <p style="text-align: justify; "><span style="background-color: rgb(225, 225, 225); "> 3: var SQLSELECT = &quot;SELECT * FROM Favorites where ID=@0&quot;; </span></p> <p style="text-align: justify; "><span style="background-color: rgb(225, 225, 225); "> 4: var db = Database.Open(&quot;Movies&quot;); </span></p> <p style="text-align: justify; "><span style="background-color: rgb(225, 225, 225); "> 5: var Movie = db.QuerySingle(SQLSELECT,id); </span></p> <p style="text-align: justify; "><span style="background-color: rgb(225, 225, 225); "> 6: var MovieName=Movie.Name; </span></p> <p style="text-align: justify; "><span style="background-color: rgb(225, 225, 225); "> 7: var MovieGenre=Movie.Genre; </span></p> <p style="text-align: justify; "><span style="background-color: rgb(225, 225, 225); "> 8: var MovieYear=Movie.ReleaseYear; </span></p> <p style="text-align: justify; "><span style="background-color: rgb(225, 225, 225); "> 9: } </span></p> <p style="text-align: justify; "><span style="background-color: rgb(225, 225, 225); "> 10: </span></p> <p style="text-align: justify; "><span style="background-color: rgb(225, 225, 225); "> 11: &lt;h1&gt;Edit a Movie&lt;/h1&gt; </span></p> <p style="text-align: justify; "><span style="background-color: rgb(225, 225, 225); "> 12: &lt;form action=&quot;&quot; method=&quot;post&quot;&gt; </span></p> <p style="text-align: justify; "><span style="background-color: rgb(225, 225, 225); "> 13: &lt;p&gt;Name:&lt;input type=&quot;text&quot; name=&quot;formName&quot; value=&quot;@MovieName&quot; /&gt;&lt;/p&gt; </span></p> <p style="text-align: justify; "><span style="background-color: rgb(225, 225, 225); "> 14: &lt;p&gt;Genre:&lt;input type=&quot;text&quot; name=&quot;formGenre&quot; value=&quot;@MovieGenre&quot; /&gt;&lt;/p&gt; </span></p> <p style="text-align: justify; "><span style="background-color: rgb(225, 225, 225); "> 15: &lt;p&gt;Year:&lt;input type=&quot;text&quot; name=&quot;formYear&quot; value=&quot;@MovieYear&quot; /&gt;&lt;/p&gt; </span></p> <p style="text-align: justify; "><span style="background-color: rgb(225, 225, 225); "> 16: &lt;p&gt;&lt;input type=&quot;submit&quot; value=&quot;Edit Movie&quot; /&gt;&lt;/p&gt; </span></p> <p style="text-align: justify; "><span style="background-color: rgb(225, 225, 225); "> 17: &lt;/form&gt;</span></p> <p style="text-align: justify; ">Теперь, когда вы запустите страницу, вы увидеть, что она инициализирована со значениями фильма. Попробуйте сделать это, работая сначала в dataMovies.cshtml, как показано здесь:</p> <p><img src="/upload/medialibrary/278/278130060bd4564a155f42689ddb233f.PNG" title="Создание страницы редактирования данных" hspace="5" vspace="5" border="0" alt="Создание страницы редактирования данных" width="700" height="383" /></p> <p style="text-align: justify; ">Затем, выберите фильм. Вы можете увидите на экране, что я выбираю фильм «The Fourth World», вызываемый со страницы EditMovie.cshtml и имеющий идентификатор (ID) 3.</p> <p>После закрузки страница будет похожа на эту:</p> <p><img src="/upload/medialibrary/14d/14df130c90f796aebfda7b81f553875d.PNG" title="Создание страницы редактирования данных" hspace="5" vspace="5" border="0" alt="Создание страницы редактирования данных" width="700" height="383" /></p> <p style="text-align: justify; ">Вы можете вводить значения в поля, чтобы изменить любое из значений, но когда вы нажмете «Edit Movie» (Редактировать фильм), ничего не произойдет. Возможно вы помните из страницы «Add Movie» (Добавить фильм) в последней главе, что должны быть обработаны триггеры кнопки, которые представляет форма - POST HTTP (или GET HTTP, который работает, когда страницу вызывают из гиперссылки).</p> <p style="text-align: justify; ">Вы делали это раньше, если использовали часть кода if(IsPost), так что давайте сделаем то же самое и здесь.</p> <p style="text-align: justify; "><span style="background-color: rgb(225, 225, 225); "> 1: if(IsPost){ </span></p> <p style="text-align: justify; "><span style="background-color: rgb(225, 225, 225); "> 2: MovieName=Request[&quot;formName&quot;]; </span></p> <p style="text-align: justify; "><span style="background-color: rgb(225, 225, 225); "> 3: MovieGenre=Request[&quot;formGenre&quot;]; </span></p> <p style="text-align: justify; "><span style="background-color: rgb(225, 225, 225); "> 4: MovieYear=Request[&quot;formYear&quot;]; </span></p> <p style="text-align: justify; "><span style="background-color: rgb(225, 225, 225); "> 5: }</span></p> <p style="text-align: justify; ">Для Имени, Жанра и значений Года Выпуска форма использует значения formName, formGenre и formYear (я ставлю префикс «f», чтобы запомнить, что они получаются из формы). В объекте запроса их не ставим. Если пользователь будет всегда их редактировать, новые значения отобразятся здесь, таким образом, мы сможем обновлять базу данных.</p> <p style="text-align: justify; ">Чтобы обновить базу данных, используйте команду SQL «UPDATE», которая имеет следующий синтаксис:</p> <p><span style="background-color: rgb(225, 225, 225); ">UPDATE table SET column=value, column=value, column=value... WHERE key=value</span></p> <p style="text-align: justify; ">Так в нашем случае у нас есть 3 столбца, в которых мы обновляем ID. Вот код для создания запроса и его выполнения:</p> <p style="text-align: justify; "><span style="background-color: rgb(225, 225, 225); "> 1: var SQLUPDATE = &quot;UPDATE Favorites Set Name=@0, Genre=@1, ReleaseYear=@2 WHERE id=@3&quot;; </span></p> <p style="text-align: justify; "><span style="background-color: rgb(225, 225, 225); "> 2: db.Execute(SQLUPDATE, MovieName, MovieGenre, MovieYear,id); </span></p> <p style="text-align: justify; ">Для более легкого прочтения SQL здесь используются параметры (@0, @1 и т.д., чтобы не перепутать с теми, которые отмечены при запуске блока Razor). Помните, что значения @ заменены значениями, находящимися в db.Execute(). В данном случае MovieName – это @0, MovieGenre – это @1 и т.д.</p> <p style="text-align: justify; ">Наконец, как только фильм отредактирован, хорошей идеей будет перенаправить его к странице списка так, чтобы мы могли видеть результаты нашего редактирования, обновленного динамически. Закончим с добавлением фильмов на страницу. Вот получившийся код:</p> <p><span style="background-color: rgb(225, 225, 225); ">Response.Redirect(&quot;dataMovies.cshtml&quot;);</span></p> <p style="text-align: justify; ">Вот полный код страницы EditMovies.cshtml:</p> <p style="text-align: justify; "><span style="background-color: rgb(225, 225, 225); "> 1: @{ </span></p> <p style="text-align: justify; "><span style="background-color: rgb(225, 225, 225); "> 2: var id=Request[&quot;id&quot;]; </span></p> <p style="text-align: justify; "><span style="background-color: rgb(225, 225, 225); "> 3: var SQLSELECT = &quot;SELECT * FROM Favorites where ID=@0&quot;; </span></p> <p style="text-align: justify; "><span style="background-color: rgb(225, 225, 225); "> 4: var db = Database.Open(&quot;Movies&quot;); </span></p> <p style="text-align: justify; "><span style="background-color: rgb(225, 225, 225); "> 5: var Movie = db.QuerySingle(SQLSELECT,id); </span></p> <p style="text-align: justify; "><span style="background-color: rgb(225, 225, 225); "> 6: var MovieName=Movie.Name; </span></p> <p style="text-align: justify; "><span style="background-color: rgb(225, 225, 225); "> 7: var MovieGenre=Movie.Genre; </span></p> <p style="text-align: justify; "><span style="background-color: rgb(225, 225, 225); "> 8: var MovieYear=Movie.ReleaseYear; </span></p> <p style="text-align: justify; "><span style="background-color: rgb(225, 225, 225); "> 9: </span></p> <p style="text-align: justify; "><span style="background-color: rgb(225, 225, 225); "> 10: if(IsPost){ </span></p> <p style="text-align: justify; "><span style="background-color: rgb(225, 225, 225); "> 11: MovieName=Request[&quot;formName&quot;]; </span></p> <p style="text-align: justify; "><span style="background-color: rgb(225, 225, 225); "> 12: MovieGenre=Request[&quot;formGenre&quot;]; </span></p> <p style="text-align: justify; "><span style="background-color: rgb(225, 225, 225); "> 13: MovieYear=Request[&quot;formYear&quot;]; </span></p> <p style="text-align: justify; "><span style="background-color: rgb(225, 225, 225); "> 14: var SQLUPDATE = &quot;UPDATE Favorites Set Name=@0, Genre=@1, ReleaseYear=@2 WHERE id=@3&quot;; </span></p> <p style="text-align: justify; "><span style="background-color: rgb(225, 225, 225); "> 15: db.Execute(SQLUPDATE, MovieName, MovieGenre, MovieYear,id); </span></p> <p style="text-align: justify; "><span style="background-color: rgb(225, 225, 225); "> 16: Response.Redirect(&quot;dataMovies.cshtml&quot;); </span></p> <p style="text-align: justify; "><span style="background-color: rgb(225, 225, 225); "> 17: } </span></p> <p style="text-align: justify; "><span style="background-color: rgb(225, 225, 225); "> 18: } </span></p> <p style="text-align: justify; "><span style="background-color: rgb(225, 225, 225); "> 19: </span></p> <p style="text-align: justify; "><span style="background-color: rgb(225, 225, 225); "> 20: &lt;h1&gt;Edit a Movie&lt;/h1&gt; </span></p> <p style="text-align: justify; "><span style="background-color: rgb(225, 225, 225); "> 21: &lt;form action=&quot;&quot; method=&quot;post&quot;&gt; </span></p> <p style="text-align: justify; "><span style="background-color: rgb(225, 225, 225); "> 22: &lt;p&gt;Name:&lt;input type=&quot;text&quot; name=&quot;formName&quot; value=&quot;@MovieName&quot; /&gt;&lt;/p&gt; </span></p> <p style="text-align: justify; "><span style="background-color: rgb(225, 225, 225); "> 23: &lt;p&gt;Genre:&lt;input type=&quot;text&quot; name=&quot;formGenre&quot; value=&quot;@MovieGenre&quot; /&gt;&lt;/p&gt; </span></p> <p style="text-align: justify; "><span style="background-color: rgb(225, 225, 225); "> 24: &lt;p&gt;Year:&lt;input type=&quot;text&quot; name=&quot;formYear&quot; value=&quot;@MovieYear&quot; /&gt;&lt;/p&gt; </span></p> <p style="text-align: justify; "><span style="background-color: rgb(225, 225, 225); "> 25: &lt;p&gt;&lt;input type=&quot;submit&quot; value=&quot;Edit Movie&quot; /&gt;&lt;/p&gt; </span></p> <p style="text-align: justify; "><span style="background-color: rgb(225, 225, 225); "> 26: &lt;/form&gt;</span></p> <p style="text-align: justify; ">Давайте посмотрим, что произойдет, когда мы выполним этот код. Откройте страницу dataMovies.cshtml и отредактируйте один из фильмов. У вас должно получится следующее:</p> <p><img src="/upload/medialibrary/83a/83ad6b5d445dd8a033439033cf1ed992.PNG" title="Создание страницы редактирования данных" hspace="5" vspace="5" border="0" alt="Создание страницы редактирования данных" width="700" height="383" /></p> <p style="text-align: justify; ">Если теперь вы отредактируете значение поля «Год», изменив 2012 на 2011, и нажмете кнопку «Edit Movie» (редактировать фильм), то база данных обновится, и вы будете перенаправлены к списку фильмов, в котором увидете, что год выпуска изменился на 2011.</p> <p style="text-align: center; "><img src="/upload/medialibrary/e1c/e1c421120ac67d3457f8d1a76951696f.PNG" title="Создание страницы редактирования данных" hspace="5" vspace="5" border="0" alt="Создание страницы редактирования данных" width="700" height="383" /></p> <p style="text-align: center; "><b>Теперь вы успешно отредактировали запись в своей базе данных!</b></p> <h2>Заключение</h2> <p style="text-align: justify; ">При создании сайтов с управляемыми данными важно не только предоставлять пользователям возможность просмотра и добавления записей, но также и их редактирования. В этой главе вы научились легко делать это с использованием WebMatrix, создавая страницу редактирования, и используя параметр инициализации страницы с требуемой записью. Вы узнали, как использовать код Razor для инициализации формы с правильными значениями из базы данных, и использовали POST HTTP с обновленными значениями, записывая их обратно в базу данных. Проделав это, вы увидели, как перенаправить пользователя из формы к списку фильмов, и посмотрели результаты редактирования. На следующем шаге вы предоставите пользователям возможность удаления записи из базы данных!</p> <p><i>Отдельно приношу извинения за все опечатки и ошибки в предыдущих частях - такую длинную методичку, да ещё с такими статьями очень тяжело писать. К сожалению, в отличие от печатной публикации здесь нет редактора, который на свежую голову вычитал бы мою работу. <font color="#00a650">Если вы нашли опечатку или ошибку - пишите мне на почту!</font></i></p> <div style="text-align: right; ">13 января 2012</div> <div style="text-align: right; ">Задойный А.В.</div>

Возврат к списку

Яндекс.Метрика