Добавление записи в таблицу и на страницу с помощью ajax

143

30 июня 2019, 18:10

Изучаю javascript. Добрался до ajax запросов. В mvc всё работает хорошо. Решил попробовать на web forms. Пытаюсь разместить новую запись на странице, подскажите пожалуйста что я делаю не так. Вот мой код. Код страницы, выступает в роли основной view:

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Tables.aspx.cs" Inherits="WebApplication1.Tables" %>
<!DOCTYPE html>
<script src="../../Scripts/jquery-1.8.0.min.js"></script>
<html lang="en">
<head> 
    <meta charset="utf-8"> 
    <meta http-equiv="X-UA-Compatible" content="IE=edge"> 
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" >
</head>
<body>
    <div>
        <table id="tab" class="table table-bordered">
            <thead>
                <tr>
                    <th>Название</th>
                    <th>Автор</th>
                    <th>Цена</th>
                </tr>
            </thead>
            <tbody>
            </tbody>
        </table>
    </div>
    <form id="form1" runat="server">
        <asp:TextBox ID="txbName" runat="server"></asp:TextBox>
        <asp:TextBox ID="txbAuthor" runat="server"></asp:TextBox>
        <asp:TextBox ID="txbPrice" runat="server"></asp:TextBox>
        <input id="btnAdd" type="submit" value="Добавить" />
    </form>
</body>
</html>

<script>
    $('#btnAdd').on('click', function () {
        $.ajax({
            type: "POST",
            url: "Tables.aspx/AddBook",
            data: JSON.stringify({
                "Name": $('#txbName').val(),
                "Author": $('#txbAuthor').val(),
                "Price": $('#txbPrice').val()
            }),
            contentType: "application/json; charset=utf-8",
            dataType: "json",
            success: function (data) {
                $('#tab tbody').html(data);
            },
            error: function (xhr) {
                alert(xhr.statusCode)
            }
        });
    });
</script>

Код веб метода, контроллер:

[WebMethod]
    public static string AddBook(string Name, string Author, int Price)
    {
        string html = "";
        Book book = new Book() { Name = Name, Author = Author, Price = Price };
        db.Books.Add(book);
        db.SaveChanges();
        html = GetHTMLRow(book);
        return html;
    }

И ещё метод получения html кода для дальнейшего добавления записи на страницу, что то типо частичного view на котором запись собирается:

 public string GetHTMLRow(newBook book)
            {
                db.Books.Add(new Book { Name = book.Name, Author = book.Author, Price = book.Price });
                db.SaveChanges();
                string htmlRow = $@"<tr>
                                        <td>{book.Name}</td>
                                        <td>{book.Author}</td>
                                        <td>{book.Price}</td>
                                    </tr>";
                return htmlRow;
            }

Всё отрабатывает кроме добавления html кода на страницу. Подскажите пожалуйста что нужно исправить что бы это заработало? Может я что то упустил?