Создание представления для Web API

Данное руководство устарело. Актуальное руководство: Руководство по ASP.NET Core

Для создания представления возьмем уже имеющее в нашем проекте представление Index.cshtml.

Наш визуальный интерфейс будет очень прост: на странице будет три блока. Первый блок (tableBlock) будет предназначен для вывода информации обо всех книгах, второй блок (editBlock) будет содержать форму редактирования книги, а третий блок (createBlock) будет включать форму добавления новой книги. При этом второй и третий блоки будут перекрывать друг друга и в зависимости от того, что нам надо - создать новую или редактировать имеющуюся книгу, мы будем делать видимым один из блоков, управляя css-стилем display.

Итак, изменим файл Index.cshtml следующим образом:

<div id="tableBlock"></div>
<div id="editBlock"><h3>Редактирование книги</h3>
    <table>
    <tr><td><input type="hidden" id="editId" /></td><td></td></tr>
    <tr><td><label>Название: </label></td><td><input type="text" id="editName" /></td></tr>
    <tr><td><label>Автор: </label></td><td><input type="text" id="editAuthor" /></td></tr>
    <tr><td><label>Год: </label></td><td><input type="number" id="editYear" /></td></tr>
        </table>
    <button id="editBook">Сохранить</button>
</div>
<div id="createBlock">
    <h3>Добавление книги</h3>
    <table>
    <tr><td><label>Название: </label></td><td><input type="text" id="addName" /></td></tr>
    <tr><td><label>Автор: </label></td><td><input type="text" id="addAuthor" /></td></tr>
    <tr><td><label>Год: </label></td><td><input type="number" id="addYear" /></td></tr>
     </table>
    <button id="addBook">Сохранить</button>
</div>
<script type="text/javascript">
    $(document).ready(function () {

        GetAllBooks();

        $("#editBook").click(function (event) {
            event.preventDefault();
            EditBook();
        });

        $("#addBook").click(function (event) {
            event.preventDefault();
            AddBook();
        });

    });
    // Получение всех книг по ajax-запросу
    function GetAllBooks() {
        
        $("#createBlock").css('display', 'block');
        $("#editBlock").css('display', 'none');
        $.ajax({
            url: '/api/values',
            type: 'GET',
            dataType: 'json',
            success: function (data) {
                WriteResponse(data);
            },
            error: function (x, y, z) {
                alert(x + '\n' + y + '\n' + z);
            }
        });
    }
 // Добавление новой книги
    function AddBook() {
        // получаем значения для добавляемой книги
        var book = {
            Name: $('#addName').val(),
            Author: $('#addAuthor').val(),
            Year: $('#addYear').val()
        };
 
        $.ajax({
            url: '/api/values',
            type: 'POST',
            data: JSON.stringify(book),
            contentType: "application/json;charset=utf-8",
            success: function (data) {
                GetAllBooks();
            },
            error: function (x, y, z) {
                alert(x + '\n' + y + '\n' + z);
            }
        });
    }
 // Удаление книги
    function DeleteBook(id) {
 
        $.ajax({
            url: '/api/values/' + id,
            type: 'DELETE',
            contentType: "application/json;charset=utf-8",
            success: function (data) {
                GetAllBooks();
            },
            error: function (x, y, z) {
                alert(x + '\n' + y + '\n' + z);
            }
        });
    }
    // редактирование книги
    function EditBook() {
        var id = $('#editId').val()
        // получаем новые значения для редактируемой книги
        var book = {
            Id: $('#editId').val(),
            Name: $('#editName').val(),
            Author: $('#editAuthor').val(),
            Year: $('#editYear').val()
        };
        $.ajax({
            url: '/api/values/' + id,
            type: 'PUT',
            data: JSON.stringify(book),
            contentType: "application/json;charset=utf-8",
            success: function (data) {
                GetAllBooks();
            },
            error: function (x, y, z) {
                alert(x + '\n' + y + '\n' + z);
            }
        });
    }
 // вывод полученных данных на экран
    function WriteResponse(books) {
        var strResult = "<table><th>ID</th><th>Название</th><th>Автор</th><th>Год издания</th>";
        $.each(books, function (index, book) {
            strResult += "<tr><td>" + book.Id + "</td><td> " + book.Name + "</td><td>" + 
            book.Author + "</td><td>" + book.Year +
            "</td><td><a id='editItem' data-item='" + book.Id + "' onclick='EditItem(this);' >Редактировать</a></td>" +
            "<td><a id='delItem' data-item='" + book.Id + "' onclick='DeleteItem(this);' >Удалить</a></td></tr>";
        });
        strResult += "</table>";
        $("#tableBlock").html(strResult);
        
    }
    // обработчик удаления
    function DeleteItem(el) {
        
        // получаем id удаляемого объекта
        var id = $(el).attr('data-item');
        DeleteBook(id);
    }
    // обработчик редактирования
    function EditItem (el) {
        
        // получаем id редактируемого объекта
        var id = $(el).attr('data-item');
        GetBook(id);
    }
    // вывод данных редактируемой книги в поля для редактирования
    function ShowBook(book) {
        if (book != null) {
            $("#createBlock").css('display', 'none');
            $("#editBlock").css('display', 'block');
            $("#editId").val(book.Id);
            $("#editName").val(book.Name);
            $("#editAuthor").val(book.Author);
            $("#editYear").val(book.Year);
        }
        else {
            alert("Такая книга не существует");
        }
    }
    // запрос книги на редактирование
    function GetBook(id) {
      
        $.ajax({
            url: '/api/values/' + id,
            type: 'GET',
            dataType: 'json',
            success: function (data) {
                ShowBook(data);
            },
            error: function (x, y, z) {
                alert(x + '\n' + y + '\n' + z);
            }
        });
    }
</script>

Так как в моем случае приложение развернуто на локальном сервере по адресу http://localhost:xxxx, то а качестве адреса для отправки ajax-запросов используется относительный url /api/values/

Поскольку в данном случае мы используем код jquery, то необходимо убедиться, что на мастер странице уже подключена библиотека jquery до того места, где идет рендеринг представления (то есть вызов RenderBody()). По умолчанию же jquery подключается внизу страницы. Также добавим в файл стилей определения стилей для блоков:

div {
	display:inline-block; 
	margin:20px;
}
#tableBlock {
    width:auto;
}
#editBlock {
    display:none;
    float:right;
}
#createBlock {
    float:right;
}

В итоге после загрузке страницы в веб-браузере мы получим все наши книги из БД:

Мы можем отредактировать уже имеющуюся книгу, нажав на ссылку 'Редактировать' у соответствующей книги. И тогда у нас в станет видимой форма для редактирования, поля которой будут заполнены значениями этой книги:

Теперь разберем код представления. При загрузке страницы в браузере в коде javascript мы одновременно получаем все книги из БД с помощью функции GetAllBooks:

	function GetAllBooks() {
        $("#createBlock").css('display', 'block');
        $("#editBlock").css('display', 'none');
        $.ajax({
            url: '/api/values',
            type: 'GET',
            dataType: 'json',
            success: function (data) {
                WriteResponse(data);
            },
            error: function (x, y, z) {
                alert(x + '\n' + y + '\n' + z);
            }
        });
    }

Функция переключает видимость блоков createBlock и editBlock и отправляет запрос на сервер. Поскольку это запрос GET без параметра, он будет сопоставлен с методом контроллера GetBooks, а полученные из этого метода данные будут выведены на страницу через функцию WriteResponse.

В функции WriteResponse на каждую ссылку 'Редактировать' мы вешаем обработчик нажатия EditItem(this), а на ссылку 'Удалить' - обработчик DeleteItem(this). Оба эти обработчика в качестве параметра получают нажатый элемент <a...> и затем получают через атрибут data-item id нажатой книги.

Обработчик DeleteItem вызывает метод DeleteBook, передавая в него id удаляемой книги:

	function DeleteBook(id) {
        $.ajax({
            url: '/api/values/' + id,
            type: 'DELETE',
            contentType: "application/json;charset=utf-8",
            success: function (data) {
                GetAllBooks();
            },
            error: function (x, y, z) {
                alert(x + '\n' + y + '\n' + z);
            }
        });
    }

Поскольку это запрос Delete, то он обращается к методу контроллера DeleteBook

Редактирование разбивается на два этапа: загрузка данных в форму редактирования и отправка новых значений на сервер. Для загрузки с сервера данных книги используется функция GetBook:

	 function GetBook(id) {
      
        $.ajax({
            url: '/api/values/' + id,
            type: 'GET',
            dataType: 'json',
            success: function (data) {
                ShowBook(data);
            },
            error: function (x, y, z) {
                alert(x + '\n' + y + '\n' + z);
            }
        });
    }

Так как это GET-запрос с параметром, то он обращается на контроллере к методу public Book GetBook(int id), а полученную в виде ответа книгу передает для вывода в функцию ShowBook.

Второй этап редактирования - отправка обновленных данных происходит по нажатию кнопки на форме. Так как мы в функции jquery повесили на нее обработчик EditBook. то он будет отправлять новые данные в PUT-запросе (за обработку которого в контроллере отвечает метод EditBook):

	function EditBook() {
        var id = $('#editId').val()
        // получаем новые значения для редактируемой книги
        var book = {
            Id: $('#editId').val(),
            Name: $('#editName').val(),
            Author: $('#editAuthor').val(),
            Year: $('#editYear').val()
        };
        $.ajax({
            url: '/api/values/' + id,
            type: 'PUT',
            data: JSON.stringify(book),
            contentType: "application/json;charset=utf-8",
            success: function (data) {
                GetAllBooks();
            },
            error: function (x, y, z) {
                alert(x + '\n' + y + '\n' + z);
            }
        });
    }

Аналогично загрузке в PUT-запросе будет действовать создание новой книги и отправка на сервер данных в POST-запросе в функции AddBook.