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

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

По умолчанию в нашем проекте уже есть представление Index.cshtml с некоторой стандартной разметкой. Изменим его, чтобы взаимодействовать с сервером.

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

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

<div id="tableBlock"></div>
<div id="editBlock"><p><b>Редактирование книги</b></p>
    <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">
    <p><b>Добавление книги</b></p>
    <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>
@section scripts
{
<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><tr><th>ID</th><th>Название</th><th>Автор</th><th>Год издания</th></tr>";
        $.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>
}

Так как для организации запросов к серверу применяется код jquery, то необходимо убедиться, что на мастер-странице уже подключена библиотека jquery, по умолчанию она подключается внизу страницы. Весь остальной код javascript, использующий jquery, добавляется в секции scripts, которая по умолчанию определена на мастер-странице после подключения библиотеки 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', 'inline-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.