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'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 с обновленными значениями, записывая их обратно в базу данных. Проделав это, вы увидели, как перенаправить пользователя из формы к списку фильмов, и посмотрели результаты редактирования. На следующем шаге вы предоставите пользователям возможность удаления записи из базы данных!
Отдельно приношу извинения за все опечатки и ошибки в предыдущих частях - такую длинную методичку, да ещё с такими статьями очень тяжело писать. К сожалению, в отличие от печатной публикации здесь нет редактора, который на свежую голову вычитал бы мою работу. Если вы нашли опечатку или ошибку - пишите мне на почту!