Разработка сайта 101: Часть 8. Создание страницы удаления данных

16.01.2012

Итак, вы уже создавали управляемый список любимых фильмов, разрабатывали его, добавляли новые фильмыи отредактировали существующие фильмы в базе данных. Далее вы научитесь удалять записи из базы данных - это предпоследний шаг, а значит уже в следующем уроке мы завершим обучение по работе с WebMatrix!!!

Вы, возможно, слышали о термине CRUD применительно к разработке веб-приложений и к данным. Стандарты CRUD используются для Создания(Create), Получения(Retrieve), Обновления(Update), Удаления(Delete) данных. Всё это вы уже проделывали в WebMatrix.

Добавление удаляющей страницы

Для начала создайте новую страницу CSHTML и назовите ее DeleteMovie.cshtml.

Замените HTML-код на следующий:

<h1>Delete a movie</h1>

Are you sure you want to delete the movie @Movie.Name ?

Эта часть кода создает основную форму, содержащую 2 кнопки: одна инициирует POST HTTP (точно так же, как страница редактирования в предыдущей главе), другая перенаправляет пользователя к списку фильмов.

Для удаления элемента эта страница точно так же, как страница EditMovie.cshtml вызывет и передаст параметр, которым будет являться ID фильма. Перед вами отобразится сообщение - «Are you sure you want to delete the movie @Movie.Name?» Значение Movie.Name вставит сервер, но серверу необходимо сообщить, как получить это значение.

Чтобы сделать это, как и прежде, поместите соответсвующий Razor-код сверху страницы, чтобы задействовать входной параметр.

1: @{

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

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

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

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

10:

11: var MovieName=Movie.Name;

12:

13: }

В этой части кода вы увидете, что параметр был передан странице в качестве «id» (с использованием DeleteMovie.cshtml?id=<whatever>), и он используется, чтобы найти определенный фильм. Запрос выполнен по отношению к базе данных, и соответствующая ему запись фильма была найдена. Теперь вы можете получить имя фильма, и найти фильм, когда страница будет отображена.

Попытайтесь выполнить DeleteMovie.cshtml?id=<something>, и на экране отобразится <something>, являющийся ID в вашей базе данных:

Создание удаляющей страницы данных

Если вы нажмете кнопку «No», то будете перенаправлены назад к странице dataMovies.cshtml. Если нажимаете «Yes», то ничего не произойдет, потому что вы ещё не создали код, который произведёт удаление.

Для удаления записи из базы данных, используйте команду SQL DELETE. Она имеет следующий синтаксис:

DELETE FROM <Table> WHERE <Field>=<Value>

Так, если бы мы хотели удалить фильм с id=2, то мы могли бы написать:

DELETE FROM Favorites WHERE ID=2

Когда пользователь нажмет кнопку «Yes», перед ним отобразится форма, и удаление не произойдет, но мы сможем легко сделать это следующим образом:

1: if(IsPost){

3: var SQLDELETE = "DELETE FROM Favorites WHERE ID=@0";

5: db.Execute(SQLDELETE,id);

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

9: }

Фильм удалится, и пользователь будет перенаправлен к странице со списком фильмов для просмотра результата.

Полный код для DeleteMovie.cshtml выглядит так:

1: @{

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

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

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

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

10:

11: var MovieName=Movie.Name;

12:

13: if(IsPost){

14:

15: var SQLDELETE = "DELETE FROM Favorites WHERE ID=@0";

16:

17: db.Execute(SQLDELETE,id);

18:

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

20:

21: }

22:

23: }

24:

25: <h1>Delete a movie</h1>

26:

27: Are you sure you want to delete the movie @Movie.Name ?

28:

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

30:

31: <input type="submit" value="Yes"/>

32:

33: <input type="button" value="No" onclick="window.location = 'dataMovies.cshtml'" />

34:

35:

36:

37: </form>

Вызов удаляющей страницы из списка фильмов

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

На страницу списка фильмов мы просто должны добавить гиперссылку к каждой записи списка фильмов, где гиперссылка к странице DeleteMovie.cshtml передает идентификатор текущего фильма.

Полный код для dataMovies.cshtml выглядит так:

1: @{

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

5: var sqlQ = "SELECT * FROM Favorites";

7: var data = db.Query(sqlQ);

9: }

10:

11: <div id="movieslist">

12:

13: <ol>

14:

15: @foreach(var row in data){

16:

17: <li>

18:

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

20:

21: </a>

22:

23: <a href="DeleteMovie.cshtml?id=@row.id">Delete</a>

24:

25: </li>

26:

27: }

28:

29: </ol>

30:

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

32:

33: </div>

Откройте эту страницу и увидите все возможные варианты для удаления:

Создание удаляющей страницы данных

Если вы теперь поставите удаляющую ссылку на каком-либо из этих фильмов, то перейдете к странице «Удаление фильма». До перехода на эту страницу перед вами отобразится сообщение: «Are you sure you want to delete the movie?».

Создание удаляющей страницы данных

Если вы нажмете «No», то будете возвращены к списку фильмов. Если нажмете «Yes», то будете возвращены к списку, и фильм удалится. Вот что будет, если нажмете «Yes»:

Создание удаляющей страницы данных

Заключение

Поздравляем! Вы создали полное приложение, которое имеет функциональность Создания(Create), Получения(Retrieve), Обновления(Update), Удаления(Delete) данных, и которое использует серверный код, чтобы динамически генерировать HTML. Не так страшен черт как его малюют!

Более подробную информацию о синтаксисе Razor, и о создании приложения с его помощью вы можете узнать здесь http://www.asp.net/webmatrix/fundamentals.

В следующем, заключительном шаге вы опубликуете свою работу в Интернет и увидете, как с помощью WebMatrix вы сможете сохранить свою разработку, а сервер выполнит синхронизацию!

И помните - я продемонстрировал прямые обращения к базе данных - это не всегда безопасный и эффективный метод работы с БД, если вы новичок. Используйте инструменты того фреймфорка или CMS, на котором работает ваш сайт, и только в случае отсутствия оного прибегайте к прямым запросам, но будьте крайне осторожны с ними!!!

16 января 2012

Задойный А.В.

Разработка сайта 101: Часть 8. Создание страницы удаления данных

Итак, вы уже создавали управляемый список любимых фильмов, разрабатывали его, <a href="/information/razrabotka_sayta_101_chast_6_sozdanie_dobavlyayushchey_informatsionnoy_stranitsy/" >добавляли новые фильмы</a>и <a href="/information/razrabotka_sayta_101_chast_7_sozdanie_stranitsy_redaktirovaniya_dannykh/" >отредактировали существующие фильмы</a> в базе данных. Далее вы научитесь удалять записи из базы данных - это предпоследний шаг, а значит уже в следующем уроке мы завершим обучение по работе с WebMatrix!!! Вы, возможно, слышали о термине CRUD применительно к разработке веб-приложений и к данным. Стандарты CRUD используются для Создания(Create), Получения(Retrieve), Обновления(Update), Удаления(Delete) данных. Всё это вы уже проделывали в WebMatrix. <h2>Добавление удаляющей страницы</h2> Для начала создайте новую страницу CSHTML и назовите ее DeleteMovie.cshtml. Замените HTML-код на следующий: <h1>Delete a movie</h1> Are you sure you want to delete the movie @Movie.Name ? <form action="" method="post"> <input type="submit" value="Yes"/> <input type="button" value="No" onclick="window.location = 'dataMovies.cshtml'" /></form> Эта часть кода создает основную форму, содержащую 2 кнопки: одна инициирует POST HTTP (точно так же, как страница редактирования в предыдущей главе), другая перенаправляет пользователя к списку фильмов. Для удаления элемента эта страница точно так же, как страница EditMovie.cshtml вызывет и передаст параметр, которым будет являться ID фильма. Перед вами отобразится сообщение - «Are you sure you want to delete the movie @Movie.Name?» Значение Movie.Name вставит сервер, но серверу необходимо сообщить, как получить это значение. Чтобы сделать это, как и прежде, поместите соответсвующий Razor-код сверху страницы, чтобы задействовать входной параметр. 1: @{ 2: 3: var id=Request["id"]; 4: 5: var SQLSELECT = "SELECT * FROM Favorites where ID=@0"; 6: 7: var db = Database.Open("Movies"); 8: 9: var Movie = db.QuerySingle(SQLSELECT,id); 10: 11: var MovieName=Movie.Name; 12: 13: } В этой части кода вы увидете, что параметр был передан странице в качестве «id» (с использованием DeleteMovie.cshtml?id=<whatever>), и он используется, чтобы найти определенный фильм. Запрос выполнен по отношению к базе данных, и соответствующая ему запись фильма была найдена. Теперь вы можете получить имя фильма, и найти фильм, когда страница будет отображена. Попытайтесь выполнить DeleteMovie.cshtml?id=<something>, и на экране отобразится <something>, являющийся ID в вашей базе данных: <img src="/upload/medialibrary/7d4/7d4d2e17395a424db7d416de075a00ae.PNG" title="Создание удаляющей страницы данных" hspace="5" vspace="5" border="0" alt="Создание удаляющей страницы данных" width="700" height="386" /> Если вы нажмете кнопку «No», то будете перенаправлены назад к странице dataMovies.cshtml. Если нажимаете «Yes», то ничего не произойдет, потому что вы ещё не создали код, который произведёт удаление. Для удаления записи из базы данных, используйте команду SQL DELETE. Она имеет следующий синтаксис: DELETE FROM <Table> WHERE <Field>=<Value> Так, если бы мы хотели удалить фильм с id=2, то мы могли бы написать: DELETE FROM Favorites WHERE ID=2 Когда пользователь нажмет кнопку «Yes», перед ним отобразится форма, и удаление не произойдет, но мы сможем легко сделать это следующим образом: 1: if(IsPost){ 2: 3: var SQLDELETE = "DELETE FROM Favorites WHERE ID=@0"; 4: 5: db.Execute(SQLDELETE,id); 6: 7: Response.Redirect("dataMovies.cshtml"); 8: 9: } Фильм удалится, и пользователь будет перенаправлен к странице со списком фильмов для просмотра результата. Полный код для DeleteMovie.cshtml выглядит так: 1: @{ 2: 3: var id=Request["id"]; 4: 5: var SQLSELECT = "SELECT * FROM Favorites where ID=@0"; 6: 7: var db = Database.Open("Movies"); 8: 9: var Movie = db.QuerySingle(SQLSELECT,id); 10: 11: var MovieName=Movie.Name; 12: 13: if(IsPost){ 14: 15: var SQLDELETE = "DELETE FROM Favorites WHERE ID=@0"; 16: 17: db.Execute(SQLDELETE,id); 18: 19: Response.Redirect("dataMovies.cshtml"); 20: 21: } 22: 23: } 24: 25: <h1>Delete a movie</h1> 26: 27: Are you sure you want to delete the movie @Movie.Name ? 28: 29: <form action="" method="post"> 30: 31: <input type="submit" value="Yes"/> 32: 33: <input type="button" value="No" onclick="window.location = 'dataMovies.cshtml'" /> 34: 35: 36: 37: </form> <h2 style="text-align: center; ">Вызов удаляющей страницы из списка фильмов</h2> Теперь, когда вы научились работать с удаляющей страницей, давайте соединим ее со страницей списка фильмов так, чтобы пользователь мог выбрать элемент из этого списка и удалить его. На страницу списка фильмов мы просто должны добавить гиперссылку к каждой записи списка фильмов, где гиперссылка к странице DeleteMovie.cshtml передает идентификатор текущего фильма. Полный код для dataMovies.cshtml выглядит так: 1: @{ 2: 3: var db= Database.Open("Movies"); 4: 5: var sqlQ = "SELECT * FROM Favorites"; 6: 7: var data = db.Query(sqlQ); 8: 9: } 10: 11: <div id="movieslist"> 12: 13: <ol> 14: 15: @foreach(var row in data){ 16: 17: <li> 18: 19: <a href="EditMovie.cshtml?id=@row.id">@row.Name, @row.Genre, @row.ReleaseYear 20: 21: </a> 22: 23: <a href="DeleteMovie.cshtml?id=@row.id">Delete</a> 24: 25: </li> 26: 27: } 28: 29: </ol> 30: 31: <a href="AddMovie.cshtml">Add a new movie</a> 32: 33: </div> Откройте эту страницу и увидите все возможные варианты для удаления: <img src="/upload/medialibrary/30b/30b58d60e80e79b327a089e4acb9eeb7.PNG" title="Создание удаляющей страницы данных" hspace="5" vspace="5" border="0" alt="Создание удаляющей страницы данных" width="700" height="472" /> Если вы теперь поставите удаляющую ссылку на каком-либо из этих фильмов, то перейдете к странице «Удаление фильма». До перехода на эту страницу перед вами отобразится сообщение: «Are you sure you want to delete the movie?». <img src="/upload/medialibrary/b2f/b2f4acb54ef0c0a12e9244c27ac937d0.PNG" title="Создание удаляющей страницы данных" hspace="5" vspace="5" border="0" alt="Создание удаляющей страницы данных" width="700" height="472" /> Если вы нажмете «No», то будете возвращены к списку фильмов. Если нажмете «Yes», то будете возвращены к списку, и фильм удалится. Вот что будет, если нажмете «Yes»: <img src="/upload/medialibrary/246/246bb59db845453e312436cbffadbb89.PNG" title="Создание удаляющей страницы данных" hspace="5" vspace="5" border="0" alt="Создание удаляющей страницы данных" width="700" height="472" /> <h2 style="text-align: center; ">Заключение</h2> Поздравляем! Вы создали полное приложение, которое имеет функциональность Создания(Create), Получения(Retrieve), Обновления(Update), Удаления(Delete) данных, и которое использует серверный код, чтобы динамически генерировать HTML. Не так страшен черт как его малюют! Более подробную информацию о синтаксисе Razor, и о создании приложения с его помощью вы можете узнать здесь <noindex><a href="http://www.asp.net/webmatrix/fundamentals" rel="nofollow" >http://www.asp.net/webmatrix/fundamentals</a></noindex>. В следующем, заключительном шаге вы опубликуете свою работу в Интернет и увидете, как с помощью WebMatrix вы сможете сохранить свою разработку, а сервер выполнит синхронизацию! И помните - я продемонстрировал прямые обращения к базе данных - это не всегда безопасный и эффективный метод работы с БД, если вы новичок. Используйте инструменты того фреймфорка или CMS, на котором работает ваш сайт, и только в случае отсутствия оного прибегайте к прямым запросам, но будьте крайне осторожны с ними!!! 16 января 2012 Задойный А.В.