Технологии Microsoft для создания RIA-приложений

Web Matrix. Работа с данным

Разбить на страницы
Показывать лекцию целиком

Создание базы данных

1.Запустим WebMatrix и в окне быстрого запуска выберем "Сайт на основе шаблона"

2.Выберем "Пустой сайт" ( Empty site ) из списка, в поле имя сайта введем "SmallBakery" и нажмем кнопку "ОК"

(рис 9.1)

3.В открывшемся окне проекта перейдем в рабочее пространство ( workspace ) Базы данных.

4.Создадим новую базу данных с помощью кнопки "Новая база данных" или "Добавить базы данных на сайт":

(рис 9.2)

5.На панели слева появится файл базы- SmallBakery.sdf. Перейдем во вкладку "Таблицы":

(рис 9.3)

На верхней панели станет активной кнопка "Создать таблицу":

(рис 9.4)

6.Нажмем на кнопку "Создать таблицу", после чего откроется конструктор таблиц:

(рис 9.5)

7.В области "Свойство столбца", введем имя первого столбца "id". Установим для него свойства: "Идентификатор" - true (что позволит автоматически нумеровать записи с шагом 1, начиная с 1), "Первичный ключ" - true:

(рис 9.6)

8.Создадим новый столбец с помощью кнопки на верхней панели "Создать столбец":

(рис 9.7)

9.В области "Свойство столбца", введем имя второго столбца "name". Установим свойство "Разрешить значение NULL" - false (столбец теперь не может содержать нулевые значения), и выберем символьный тип данных переменной длины - nvarchar:

(рис 9.8)

10. Создадим третью колонку и назовем её "description". Установим свойства: "Разрешить значение NULL" – true и и выберем символьный тип данных переменной длины - nvarchar:

(рис 9.9)

11.Создадим четвертую колонку с именем "price". Установим свойства: "Разрешить значение NULL" – true и выберем денежный тип данных "money":

(рис 9.10)

12.Нажмем CTRL+ S для сохранения таблицы и назовем таблицу "Product".

В конечном итоге должно получиться:

(рис 9.11)

Добавление данных в базу данных

Добавим некоторые данные в базу данных, с которыми в дальнейшем будем работать.

1.Перейдем на панель работы с данными, с помощью кнопки на верхней панели - "Данные" или из левой панели (кликните правой кнопкой мыши на название таблицы и выберите "Данные" ):

(рис 9.12)

В результате откроется панель для работы с данными:

(рис 9.13)

2.Добавим в таблицу следующие записи:

namedescriptionprice
Bread Baked fresh every day. 2,99
Strawberry Shortcake Made with organic strawberries from our garden. 9,99
Apple Pie Second only to your mom's pie. 12,99
Pecan Pie If you like pecans, this is for you. 10,99
Lemon Pie Made with the best lemons in the world. 11,99
Cupcakes Your kids and the kid in you will love these. 7,99

И помните, колонка "id" будет заполняться автоматически, из-за свойства "Идентификатор" - true.

3.После ввода данных, дизайнер таблиц будет выглядеть так:

(рис 9.14)

Отображение данных из базы данных

1.На левой панели перейдем, в рабочее пространство ( workspace ) "Файлы", и создадим новый файл:

(рис 9.15)

2.В появившемся списке выберем - CSHTML и назовем его ListProducts.cshtml:

(рис 9.16)

3.Заменим исходный код страницы ListProducts.cshtml на:

@{ 
    var db = Database.Open("SmallBakery");
    var selectQueryString = "SELECT * FROM Product ORDER BY name";
 }

<!DOCTYPE html>
<html>
 <head>
   <title>Small Bakery Products</title>
   <style>
       table, th, td {
         border: solid 1px #bbbbbb;
         border-collapse: collapse;
         padding: 2px;
       }
    </style>
 </head>
 <body>
   <h1>Small Bakery Products</h1>
   <table>
       <thead>
           <tr>
               <th>Id</th>
               <th>Product</th>
               <th>Description</th>
               <th>Price</th>
           </tr>
       </thead>
       <tbody>
           @foreach(var row in db.Query(selectQueryString))
    {
            <tr>
               <td>@row.id</td>
                   <td>@row.name</td>
                   <td>@row.description</td>
                   <td>@row.price</td>
            </tr>
           }
       </tbody>
   </table>
 </body>
</html>

Рассмотрим подробнее два фрагмента кода.

Первый фрагмент:

@{ 
    var db = Database.Open("SmallBakery");
    var selectQueryString = "SELECT * FROM Product ORDER BY name";
 }

В первой строчке этого фрагмента кода, с помощью метода Database.Open - открывается база данных SmallBakery.sdf, которая была создана ранее.

Во второй строчке создается переменная с SQL запросом к базе. В нашем случае, запрос будет осуществлять выборку всех записей из таблицы Product и сортировать их по имени продукта.

Второй фрагмент:

<tbody>
           @foreach(var row in db.Query(selectQueryString))
    {
            <tr>
                   <td>@row.id</td>
                   <td>@row.name</td>
                   <td>@row.description</td>
                   <td>@row.price</td>
            </tr>
           }
       </tbody>

В этом фрагменте кода, динамически формируется таблица с результатами SQL запроса.

4.Запустим приложение, после чего откроется окно браузера:

(рис 9.17)

Добавление записей в базу данных

1.В текущем проекте создадим еще один CSHTML файл, и назовем его InsertProducts.cshtml:

(рис 9.18)

2.Заменим начальный код страницы InsertProducts.cshtml на:

@{
    var db = Database.Open("SmallBakery");
    var name = Request["Name"];
    var description = Request["Description"];
    var price = Request["Price"];
     
    if (IsPost) 
        {
        name = Request["Name"];
        if (String.IsNullOrEmpty(name)) 
        {
           ModelState.AddError("Name", "Product name is required.");
        }
 
        description = Request["Description"];
        if (String.IsNullOrEmpty(description)) 
         {
          ModelState.AddError("Description", 
                "Product description is required.");
         }
         

        price = Request["Price"];
        if (String.IsNullOrEmpty(price)) 
        {
          ModelState.AddError("Price", "Product price is required.");
        }        if(ModelState.IsValid)
 {
            var insertQuery = "INSERT INTO Product (name, description, price) " +
                "VALUES (@0, @1, @2)";
            db.Execute(insertQuery, name, description, price);
            Response.Redirect(@Href("/ListProducts"));
        }
    }
}

<!DOCTYPE html>
<html>
<head>
   <title>Add Products</title>
   <style type="text/css">
      label {float:left; width: 8em; text-align: right; 
               margin-right: 0.5em;}
      fieldset {padding: 1em; border: 1px solid; width: 35em;}
      legend {padding: 2px 4px; border: 1px solid; font-weight:bold;}
   </style>
</head>
<body>
   <h1>Add New Product</h1>
   
   @Html.ValidationSummary()
     
  
 <form method="post" "action=''>
       <fieldset>
           <legend>Add Product</legend>
           <div>
               <label>Name:</label>
               <input name="Name" type="text" size="50" value="@name" />
           </div>
           <div>
               <label>Description:</label>
               <input name="Description" type="text" size="50"
                   value="@description" />
           </div>
           <div>
               <label>Price:</label>
               <input name="Price" type="text" size="50" value="@price" />
           </div>
           <div>
               <label> </label>
               <input type="submit" value="Insert" class="submit" />
           </div>
       </fieldset>
          
   </form>
</body>
</html>

Тег <body></body> содержит HTML форму с тремя текстовыми полями ( text box ) имя продукта, описание продукта, и его стоимость. Когда пользователь жмет на кнопку Insert, создается соединение с базой данных SmallBakery.sdf ( Метод Database.Open ), после чего из формы берутся значения текстовых полей ( text box ).

Для проверки данных, введенных пользователем, используется следующие фрагменты кода:

…
        if (name.IsEmpty()) 
        {
           ModelState.AddError("Name", "Product name is required.");
        }
  	…
        
        if (description.IsEmpty()) 
         {
          ModelState.AddError("Description", 
                "Product description is required.");
         }
        …

        if (price.IsEmpty()) 
        {
          ModelState.AddError("Price", "Product price is required.");
        }
…

И если значение переменой name, description или price пустое, используем метод ModelState.AddError.Далее метод ModelState.IsValid проверяет, все ли данные прошли проверку (в нашем случае, не пустые поля), и если да, то выполняется SQL запрос с параметрами:

if(ModelState.IsValid)
{
var insertQuery = "INSERT INTO Product (name, description, price) " + "VALUES (@0, @1, @2)";
db.Execute(insertQuery, name, description, price);
}

После выполнения запроса страница, с помощью метода Response.Redirect, переадресуется на страницу ListProducts.cshtml.

И в заключении о строчке с методом Html.ValidationSummary(), которая выводит накопленные сообщения об ошибках, а если точнее сообщения которые мы прописали в методе ModelState.AddError.

К примеру, если мы нажмем кнопку "Insert" с пустыми полями, то результатом будет:

(рис 9.19)

3.Теперь добавим запись в базу данных, для этого заполним форму:

(рис 9.20)
Name:"Test"
Description:"Test"
Price:"0,00"

4.Нажмем кнопку "Insert", после чего произойдет переадресация на страницу ListProducts.cshtml, где в конце списка появится новая запись:

(рис 9.21)

Редактирование записей в базе данных

1.В текущем проекте создадим CSHTML файл, и назовем его EditProducts.cshtml:

(рис 9.22)

2.Заменим исходный код страницы EditProducts.cshtml на:

@{    
    var db = Database.Open("SmallBakery");    
    var selectQueryString = "SELECT * FROM Product ORDER BY Name";
}

<!DOCTYPE html>
<html>
<head>
    <title>Edit Products</title>
    <style type="text/css">
        table, th, td {
          border: solid 1px #bbbbbb;
          border-collapse: collapse;
          padding: 2px;
        }
    </style>
</head>
<body>
    <h1>Edit Small Bakery Products</h1>
    <table>
      <thead>
        <tr>
          <th> </th>
          <th>Name</th>
          <th>Description</th>
          <th>Price</th>
        </tr>
      </thead>
      <tbody>
        @foreach (var row in db.Query(selectQueryString)) {
          <tr>
            <td><a href="@Href("/UpdateProducts", row.id)">Edit</a></td>
            <td>@row.name</td>
            <td>@row.description</td>
            <td>@row.price</td>
          </tr>
        }
      </tbody>
    </table>
</body>
</html>

Как можно заметить, код этой страницы похож на код страницы ListProducts.cshtml, созданной ранее, но отличается колонкой с динамически - генерируемыми ссылками на страницу редактирования записей (её мы создадим позднее).

3.Запустим приложение, в результате откроется окно браузера со следующим содержанием:

(рис 9.23)

Ссылки, в первой колонке, будут иметь вид:

http://localhost:28163/UpdateProducts/n

где localhost:28163 – адрес сервера , UpdateProducts страница редактирования , n - номер продукта, который соответствует значению столбца id в базе данных.

4.В текущем проекте создадим CSHTML файл, и назовем его UpdateProducts.cshtml:

(рис 9.24)

5.Заменим исходный код страницы UpdateProducts.cshtml на:

@{
    var db = Database.Open("SmallBakery");
    var selectQueryString = "SELECT * FROM Product WHERE id=@0";
    var productId  = UrlData[0];
     
    if (productId.IsEmpty()) 
     {
         Response.Redirect(@Href("/EditProducts"));
     } 
     
    var row = db.QuerySingle(selectQueryString, productId);
    var name = row.name;
    var description = row.description;
    var price = row.price;
     
    if (IsPost) 
        {
        name = Request["Name"];
        if (String.IsNullOrEmpty(name)) 
        {
           ModelState.AddError("Name", "Product name is required.");
        }
 
        description = Request["Description"];
        if (String.IsNullOrEmpty(description)) 
         {
          ModelState.AddError("Description", 
                "Product description is required.");
         }
         

        price = Request["Price"];
        if (String.IsNullOrEmpty(price)) 
        {
          ModelState.AddError("Price", "Product price is required.");
        }        
 price = Request["price"];
        if (price.IsEmpty()) {
          ModelState.AddError("Price", "Product price is required.");
        }
 
        if(ModelState.IsValid) 
{
            var updateQueryString = 
              "UPDATE Product SET name=@0, description=@1, price=@2 WHERE id=@3" ;
            db.Execute(updateQueryString, name, description, price, productId);
            Response.Redirect(@Href("/EditProducts"));
        }
    }
}

<!DOCTYPE html>
<html>
<head>
    <title>Update Product</title>
    <style type="text/css">
       label { float: left; width: 8em; text-align: right;
                margin-right: 0.5em;}
       fieldset { padding: 1em; border: 1px solid; width: 35em;}
       legend { padding: 2px 4px;  border: 1px solid; font-weight: bold;}
    </style>
</head>
<body>
    <h1>Update Product</h1>
      
    @Html.ValidationSummary()
     
    <form method="post" action="" > 
        <fieldset>
            <legend>Update Product</legend>
            <div>
                <label>Name:</label>
                <input name="Name" type="text" size="50" value="@name" />
            </div>
            <div>
                <label>Description:</label>
                <input name="Description" type="text" size="50"
                   value="@description" />
            </div>
            <div>
                <label>Price:</label>
                <input name="Price" type="text" size="50" value="@price" />
            </div>
            <div>
                <label> </label>
                <input type="submit" value="Update" class="submit" />
            </div>
        </fieldset>
    </form>
</body>
</html>

Тег <body></body> содержит HTML форму, в которой будет отображаться результаты SQL запроса с параметром:
SELECT * FROM Product WHERE id=@0

Значение параметра будет браться из URL ссылки:

var productId = UrlData[0];

Проверим, содержит ли переменная productId, значения, если нет, то переадресация на страницу EditProducts.cshtml:

if (productId.IsEmpty()) 
     {
         Response.Redirect(@Href("/EditProducts"));
     }

Далее используем метод QuerySingle который будет возвращать одну запись запроса:

var row = db.QuerySingle(selectQueryString, productId);

Присваиваем переменным, значения которые содержаться в row:

var name = row.name;
    var description = row.description;
    var price = row.price;

Фрагмент кода if(isPost) {…}, будет выполняться, после нажатия на кнопку "Update". В данном фрагменте осуществляется проверка введенных данных, с помощью метода String.IsNullOrEmpty() и выполнение SQL запроса с параметрами на обновление конкретной записи:

var updateQueryString = 
              "UPDATE Product SET name=@0, description=@1, price=@2 WHERE id=@3";
            db.Execute(updateQueryString, name, description, price, productId);
            Response.Redirect(@Href("/EditProducts"));

6.Запустим страницу EditProducts.cshtml и кликнем "Edit" последней записи. После чего отобразиться страница UpdateProducts.cshtm:

(рис 9.25)

7.Изменим значения поля Price с "0" на "1", и щелкнем кнопку "Update". В результате отобразиться страница EditProducts.cshtml с измененным значением:

(рис 9.26)

Удаление записей из базы данных

1.В текущем проекте создадим CSHTML файл, и назовем его ListProductsForDelete.cshtml:

(рис 9.27)

2.Заменим исходный код страницы ListProductsForDelete.cshtml на:

@{
  var db = Database.Open("SmallBakery");
  var selectQueryString = "SELECT * FROM Product ORDER BY Name";
}

<!DOCTYPE html>
<html>
<head>
    <title>Delete a Product</title>   
    <style>
        table, th, td {
          border: solid 1px #bbbbbb;
          border-collapse: collapse;
          padding: 2px;
        }
     </style>
</head>
<body>
  <h1>Delete a Product</h1>
  <form method="post" action="" name="form">
    <table border="1">
      <thead>
        <tr>
          <th> </th>
          <th>Name</th>
          <th>Description</th>
          <th>Price</th>
        </tr>
      </thead>
      <tbody>
        @foreach (var row in db.Query(selectQueryString)) {
          <tr> 
            <td><a href="@Href("/DeleteProduct", row.id)">Delete</a></td>
            <td>@row.name</td>
            <td>@row.description</td>
            <td>@row.price</td>
          </tr>
        }
      </tbody>
    </table>
  </form>
</body>
</html>

Код этой страницы очень похож на код страницы EditProducts.cshtml, созданной ранее, но вместо ссылки Edit, используется ссылка Delete:

3.Запустим приложение, после чего откроется окно браузера:

(рис 9.28)

4.В текущем проекте создадим CSHTML файл, и назовем его Deleteproduct.cshtml:

(рис 9.29)

5.Заменим исходный код страницы DeleteProduct.cshtml на:

@{
  var db = Database.Open("SmallBakery");
  var productId = UrlData[0];
  if (productId.IsEmpty()) {
    Response.Redirect(@Href("/ListProductsForDelete"));
  }
  var prod = db.QuerySingle("SELECT * FROM Product WHERE id = @0", productId);
  if( IsPost  !productId.IsEmpty()) 
 {            
    var deleteQueryString = "DELETE FROM Product WHERE id = @0";
    db.Execute(deleteQueryString, productId);   
    Response.Redirect("/ListProductsForDelete");
  }
}

<!DOCTYPE html>
<html
<head>
    <title>Delete Product</title>
</head>
<body>
  <h1>Delete Product - Confirmation</h1>
  <form method="post" action="" name="form">
    <p>Are you sure you want to delete the following product?</p>
    <p>
Name: @prod.name <br /> 
       Description: @prod.description <br />
       Price: @prod.price
   </p>
    <p><input type="submit" value="Delete" /></p>
  </form>
</body></html>

Принцип работы страницы такой же, как и UpdateProducts.cshtml. Только вместо SQL запроса на обновление используется SQL запрос на удаление записи:

var deleteQueryString = "DELETE FROM Product WHERE id = @0";
    db.Execute(deleteQueryString, productId);   
    Response.Redirect("/ListProductsForDelete");

6.Запустим страницу ListProductsForDelete.cshtml и выберем последнюю запись на удаление:

(рис 9.30)

7.Нажмем на кнопку "Delete". Из списка исчезнет последняя запись:

(рис 9.31)
Страницы:

Создание базы данных

1.Запустим WebMatrix и в окне быстрого запуска выберем "Сайт на основе шаблона"

2.Выберем "Пустой сайт" ( Empty site ) из списка, в поле имя сайта введем "SmallBakery" и нажмем кнопку "ОК"

(рис 9.1)

3.В открывшемся окне проекта перейдем в рабочее пространство ( workspace ) Базы данных.

4.Создадим новую базу данных с помощью кнопки "Новая база данных" или "Добавить базы данных на сайт":

(рис 9.2)

5.На панели слева появится файл базы- SmallBakery.sdf. Перейдем во вкладку "Таблицы":

(рис 9.3)

На верхней панели станет активной кнопка "Создать таблицу":

(рис 9.4)

6.Нажмем на кнопку "Создать таблицу", после чего откроется конструктор таблиц:

(рис 9.5)

7.В области "Свойство столбца", введем имя первого столбца "id". Установим для него свойства: "Идентификатор" - true (что позволит автоматически нумеровать записи с шагом 1, начиная с 1), "Первичный ключ" - true:

(рис 9.6)

8.Создадим новый столбец с помощью кнопки на верхней панели "Создать столбец":

(рис 9.7)

9.В области "Свойство столбца", введем имя второго столбца "name". Установим свойство "Разрешить значение NULL" - false (столбец теперь не может содержать нулевые значения), и выберем символьный тип данных переменной длины - nvarchar:

(рис 9.8)

10. Создадим третью колонку и назовем её "description". Установим свойства: "Разрешить значение NULL" – true и и выберем символьный тип данных переменной длины - nvarchar:

(рис 9.9)

11.Создадим четвертую колонку с именем "price". Установим свойства: "Разрешить значение NULL" – true и выберем денежный тип данных "money":

(рис 9.10)

12.Нажмем CTRL+ S для сохранения таблицы и назовем таблицу "Product".

В конечном итоге должно получиться:

(рис 9.11)

Добавление данных в базу данных

Добавим некоторые данные в базу данных, с которыми в дальнейшем будем работать.

1.Перейдем на панель работы с данными, с помощью кнопки на верхней панели - "Данные" или из левой панели (кликните правой кнопкой мыши на название таблицы и выберите "Данные" ):

(рис 9.12)

В результате откроется панель для работы с данными:

(рис 9.13)

2.Добавим в таблицу следующие записи:

namedescriptionprice
Bread Baked fresh every day. 2,99
Strawberry Shortcake Made with organic strawberries from our garden. 9,99
Apple Pie Second only to your mom's pie. 12,99
Pecan Pie If you like pecans, this is for you. 10,99
Lemon Pie Made with the best lemons in the world. 11,99
Cupcakes Your kids and the kid in you will love these. 7,99

И помните, колонка "id" будет заполняться автоматически, из-за свойства "Идентификатор" - true.

3.После ввода данных, дизайнер таблиц будет выглядеть так:

(рис 9.14)

Отображение данных из базы данных

1.На левой панели перейдем, в рабочее пространство ( workspace ) "Файлы", и создадим новый файл:

(рис 9.15)

2.В появившемся списке выберем - CSHTML и назовем его ListProducts.cshtml:

(рис 9.16)

3.Заменим исходный код страницы ListProducts.cshtml на:

@{ 
    var db = Database.Open("SmallBakery");
    var selectQueryString = "SELECT * FROM Product ORDER BY name";
 }

<!DOCTYPE html>
<html>
 <head>
   <title>Small Bakery Products</title>
   <style>
       table, th, td {
         border: solid 1px #bbbbbb;
         border-collapse: collapse;
         padding: 2px;
       }
    </style>
 </head>
 <body>
   <h1>Small Bakery Products</h1>
   <table>
       <thead>
           <tr>
               <th>Id</th>
               <th>Product</th>
               <th>Description</th>
               <th>Price</th>
           </tr>
       </thead>
       <tbody>
           @foreach(var row in db.Query(selectQueryString))
    {
            <tr>
               <td>@row.id</td>
                   <td>@row.name</td>
                   <td>@row.description</td>
                   <td>@row.price</td>
            </tr>
           }
       </tbody>
   </table>
 </body>
</html>

Рассмотрим подробнее два фрагмента кода.

Первый фрагмент:

@{ 
    var db = Database.Open("SmallBakery");
    var selectQueryString = "SELECT * FROM Product ORDER BY name";
 }

В первой строчке этого фрагмента кода, с помощью метода Database.Open - открывается база данных SmallBakery.sdf, которая была создана ранее.

Во второй строчке создается переменная с SQL запросом к базе. В нашем случае, запрос будет осуществлять выборку всех записей из таблицы Product и сортировать их по имени продукта.

Второй фрагмент:

<tbody>
           @foreach(var row in db.Query(selectQueryString))
    {
            <tr>
                   <td>@row.id</td>
                   <td>@row.name</td>
                   <td>@row.description</td>
                   <td>@row.price</td>
            </tr>
           }
       </tbody>

В этом фрагменте кода, динамически формируется таблица с результатами SQL запроса.

4.Запустим приложение, после чего откроется окно браузера:

(рис 9.17)

Добавление записей в базу данных

1.В текущем проекте создадим еще один CSHTML файл, и назовем его InsertProducts.cshtml:

(рис 9.18)

2.Заменим начальный код страницы InsertProducts.cshtml на:

@{
    var db = Database.Open("SmallBakery");
    var name = Request["Name"];
    var description = Request["Description"];
    var price = Request["Price"];
     
    if (IsPost) 
        {
        name = Request["Name"];
        if (String.IsNullOrEmpty(name)) 
        {
           ModelState.AddError("Name", "Product name is required.");
        }
 
        description = Request["Description"];
        if (String.IsNullOrEmpty(description)) 
         {
          ModelState.AddError("Description", 
                "Product description is required.");
         }
         

        price = Request["Price"];
        if (String.IsNullOrEmpty(price)) 
        {
          ModelState.AddError("Price", "Product price is required.");
        }        if(ModelState.IsValid)
 {
            var insertQuery = "INSERT INTO Product (name, description, price) " +
                "VALUES (@0, @1, @2)";
            db.Execute(insertQuery, name, description, price);
            Response.Redirect(@Href("/ListProducts"));
        }
    }
}

<!DOCTYPE html>
<html>
<head>
   <title>Add Products</title>
   <style type="text/css">
      label {float:left; width: 8em; text-align: right; 
               margin-right: 0.5em;}
      fieldset {padding: 1em; border: 1px solid; width: 35em;}
      legend {padding: 2px 4px; border: 1px solid; font-weight:bold;}
   </style>
</head>
<body>
   <h1>Add New Product</h1>
   
   @Html.ValidationSummary()
     
  
 <form method="post" "action=''>
       <fieldset>
           <legend>Add Product</legend>
           <div>
               <label>Name:</label>
               <input name="Name" type="text" size="50" value="@name" />
           </div>
           <div>
               <label>Description:</label>
               <input name="Description" type="text" size="50"
                   value="@description" />
           </div>
           <div>
               <label>Price:</label>
               <input name="Price" type="text" size="50" value="@price" />
           </div>
           <div>
               <label> </label>
               <input type="submit" value="Insert" class="submit" />
           </div>
       </fieldset>
          
   </form>
</body>
</html>

Тег <body></body> содержит HTML форму с тремя текстовыми полями ( text box ) имя продукта, описание продукта, и его стоимость. Когда пользователь жмет на кнопку Insert, создается соединение с базой данных SmallBakery.sdf ( Метод Database.Open ), после чего из формы берутся значения текстовых полей ( text box ).

Для проверки данных, введенных пользователем, используется следующие фрагменты кода:

…
        if (name.IsEmpty()) 
        {
           ModelState.AddError("Name", "Product name is required.");
        }
  	…
        
        if (description.IsEmpty()) 
         {
          ModelState.AddError("Description", 
                "Product description is required.");
         }
        …

        if (price.IsEmpty()) 
        {
          ModelState.AddError("Price", "Product price is required.");
        }
…

И если значение переменой name, description или price пустое, используем метод ModelState.AddError.Далее метод ModelState.IsValid проверяет, все ли данные прошли проверку (в нашем случае, не пустые поля), и если да, то выполняется SQL запрос с параметрами:

if(ModelState.IsValid)
{
var insertQuery = "INSERT INTO Product (name, description, price) " + "VALUES (@0, @1, @2)";
db.Execute(insertQuery, name, description, price);
}

После выполнения запроса страница, с помощью метода Response.Redirect, переадресуется на страницу ListProducts.cshtml.

И в заключении о строчке с методом Html.ValidationSummary(), которая выводит накопленные сообщения об ошибках, а если точнее сообщения которые мы прописали в методе ModelState.AddError.

К примеру, если мы нажмем кнопку "Insert" с пустыми полями, то результатом будет:

(рис 9.19)

3.Теперь добавим запись в базу данных, для этого заполним форму:

(рис 9.20)
Name:"Test"
Description:"Test"
Price:"0,00"

4.Нажмем кнопку "Insert", после чего произойдет переадресация на страницу ListProducts.cshtml, где в конце списка появится новая запись:

(рис 9.21)

Редактирование записей в базе данных

1.В текущем проекте создадим CSHTML файл, и назовем его EditProducts.cshtml:

(рис 9.22)

2.Заменим исходный код страницы EditProducts.cshtml на:

@{    
    var db = Database.Open("SmallBakery");    
    var selectQueryString = "SELECT * FROM Product ORDER BY Name";
}

<!DOCTYPE html>
<html>
<head>
    <title>Edit Products</title>
    <style type="text/css">
        table, th, td {
          border: solid 1px #bbbbbb;
          border-collapse: collapse;
          padding: 2px;
        }
    </style>
</head>
<body>
    <h1>Edit Small Bakery Products</h1>
    <table>
      <thead>
        <tr>
          <th> </th>
          <th>Name</th>
          <th>Description</th>
          <th>Price</th>
        </tr>
      </thead>
      <tbody>
        @foreach (var row in db.Query(selectQueryString)) {
          <tr>
            <td><a href="@Href("/UpdateProducts", row.id)">Edit</a></td>
            <td>@row.name</td>
            <td>@row.description</td>
            <td>@row.price</td>
          </tr>
        }
      </tbody>
    </table>
</body>
</html>

Как можно заметить, код этой страницы похож на код страницы ListProducts.cshtml, созданной ранее, но отличается колонкой с динамически - генерируемыми ссылками на страницу редактирования записей (её мы создадим позднее).

3.Запустим приложение, в результате откроется окно браузера со следующим содержанием:

(рис 9.23)

Ссылки, в первой колонке, будут иметь вид:

http://localhost:28163/UpdateProducts/n

где localhost:28163 – адрес сервера , UpdateProducts страница редактирования , n - номер продукта, который соответствует значению столбца id в базе данных.

4.В текущем проекте создадим CSHTML файл, и назовем его UpdateProducts.cshtml:

(рис 9.24)

5.Заменим исходный код страницы UpdateProducts.cshtml на:

@{
    var db = Database.Open("SmallBakery");
    var selectQueryString = "SELECT * FROM Product WHERE id=@0";
    var productId  = UrlData[0];
     
    if (productId.IsEmpty()) 
     {
         Response.Redirect(@Href("/EditProducts"));
     } 
     
    var row = db.QuerySingle(selectQueryString, productId);
    var name = row.name;
    var description = row.description;
    var price = row.price;
     
    if (IsPost) 
        {
        name = Request["Name"];
        if (String.IsNullOrEmpty(name)) 
        {
           ModelState.AddError("Name", "Product name is required.");
        }
 
        description = Request["Description"];
        if (String.IsNullOrEmpty(description)) 
         {
          ModelState.AddError("Description", 
                "Product description is required.");
         }
         

        price = Request["Price"];
        if (String.IsNullOrEmpty(price)) 
        {
          ModelState.AddError("Price", "Product price is required.");
        }        
 price = Request["price"];
        if (price.IsEmpty()) {
          ModelState.AddError("Price", "Product price is required.");
        }
 
        if(ModelState.IsValid) 
{
            var updateQueryString = 
              "UPDATE Product SET name=@0, description=@1, price=@2 WHERE id=@3" ;
            db.Execute(updateQueryString, name, description, price, productId);
            Response.Redirect(@Href("/EditProducts"));
        }
    }
}

<!DOCTYPE html>
<html>
<head>
    <title>Update Product</title>
    <style type="text/css">
       label { float: left; width: 8em; text-align: right;
                margin-right: 0.5em;}
       fieldset { padding: 1em; border: 1px solid; width: 35em;}
       legend { padding: 2px 4px;  border: 1px solid; font-weight: bold;}
    </style>
</head>
<body>
    <h1>Update Product</h1>
      
    @Html.ValidationSummary()
     
    <form method="post" action="" > 
        <fieldset>
            <legend>Update Product</legend>
            <div>
                <label>Name:</label>
                <input name="Name" type="text" size="50" value="@name" />
            </div>
            <div>
                <label>Description:</label>
                <input name="Description" type="text" size="50"
                   value="@description" />
            </div>
            <div>
                <label>Price:</label>
                <input name="Price" type="text" size="50" value="@price" />
            </div>
            <div>
                <label> </label>
                <input type="submit" value="Update" class="submit" />
            </div>
        </fieldset>
    </form>
</body>
</html>

Тег <body></body> содержит HTML форму, в которой будет отображаться результаты SQL запроса с параметром:
SELECT * FROM Product WHERE id=@0

Значение параметра будет браться из URL ссылки:

var productId = UrlData[0];

Проверим, содержит ли переменная productId, значения, если нет, то переадресация на страницу EditProducts.cshtml:

if (productId.IsEmpty()) 
     {
         Response.Redirect(@Href("/EditProducts"));
     }

Далее используем метод QuerySingle который будет возвращать одну запись запроса:

var row = db.QuerySingle(selectQueryString, productId);

Присваиваем переменным, значения которые содержаться в row:

var name = row.name;
    var description = row.description;
    var price = row.price;

Фрагмент кода if(isPost) {…}, будет выполняться, после нажатия на кнопку "Update". В данном фрагменте осуществляется проверка введенных данных, с помощью метода String.IsNullOrEmpty() и выполнение SQL запроса с параметрами на обновление конкретной записи:

var updateQueryString = 
              "UPDATE Product SET name=@0, description=@1, price=@2 WHERE id=@3";
            db.Execute(updateQueryString, name, description, price, productId);
            Response.Redirect(@Href("/EditProducts"));

6.Запустим страницу EditProducts.cshtml и кликнем "Edit" последней записи. После чего отобразиться страница UpdateProducts.cshtm:

(рис 9.25)

7.Изменим значения поля Price с "0" на "1", и щелкнем кнопку "Update". В результате отобразиться страница EditProducts.cshtml с измененным значением:

(рис 9.26)

Удаление записей из базы данных

1.В текущем проекте создадим CSHTML файл, и назовем его ListProductsForDelete.cshtml:

(рис 9.27)

2.Заменим исходный код страницы ListProductsForDelete.cshtml на:

@{
  var db = Database.Open("SmallBakery");
  var selectQueryString = "SELECT * FROM Product ORDER BY Name";
}

<!DOCTYPE html>
<html>
<head>
    <title>Delete a Product</title>   
    <style>
        table, th, td {
          border: solid 1px #bbbbbb;
          border-collapse: collapse;
          padding: 2px;
        }
     </style>
</head>
<body>
  <h1>Delete a Product</h1>
  <form method="post" action="" name="form">
    <table border="1">
      <thead>
        <tr>
          <th> </th>
          <th>Name</th>
          <th>Description</th>
          <th>Price</th>
        </tr>
      </thead>
      <tbody>
        @foreach (var row in db.Query(selectQueryString)) {
          <tr> 
            <td><a href="@Href("/DeleteProduct", row.id)">Delete</a></td>
            <td>@row.name</td>
            <td>@row.description</td>
            <td>@row.price</td>
          </tr>
        }
      </tbody>
    </table>
  </form>
</body>
</html>

Код этой страницы очень похож на код страницы EditProducts.cshtml, созданной ранее, но вместо ссылки Edit, используется ссылка Delete:

3.Запустим приложение, после чего откроется окно браузера:

(рис 9.28)

4.В текущем проекте создадим CSHTML файл, и назовем его Deleteproduct.cshtml:

(рис 9.29)

5.Заменим исходный код страницы DeleteProduct.cshtml на:

@{
  var db = Database.Open("SmallBakery");
  var productId = UrlData[0];
  if (productId.IsEmpty()) {
    Response.Redirect(@Href("/ListProductsForDelete"));
  }
  var prod = db.QuerySingle("SELECT * FROM Product WHERE id = @0", productId);
  if( IsPost  !productId.IsEmpty()) 
 {            
    var deleteQueryString = "DELETE FROM Product WHERE id = @0";
    db.Execute(deleteQueryString, productId);   
    Response.Redirect("/ListProductsForDelete");
  }
}

<!DOCTYPE html>
<html
<head>
    <title>Delete Product</title>
</head>
<body>
  <h1>Delete Product - Confirmation</h1>
  <form method="post" action="" name="form">
    <p>Are you sure you want to delete the following product?</p>
    <p>
Name: @prod.name <br /> 
       Description: @prod.description <br />
       Price: @prod.price
   </p>
    <p><input type="submit" value="Delete" /></p>
  </form>
</body></html>

Принцип работы страницы такой же, как и UpdateProducts.cshtml. Только вместо SQL запроса на обновление используется SQL запрос на удаление записи:

var deleteQueryString = "DELETE FROM Product WHERE id = @0";
    db.Execute(deleteQueryString, productId);   
    Response.Redirect("/ListProductsForDelete");

6.Запустим страницу ListProductsForDelete.cshtml и выберем последнюю запись на удаление:

(рис 9.30)

7.Нажмем на кнопку "Delete". Из списка исчезнет последняя запись:

(рис 9.31)
Вернуться к учебному плану