MyBooks

Book.cs

using System;
using System.Collections.Generic;
using System.ComponentModel.DataAnnotations;
using System.Linq;
using System.Web;

namespace MyBooks.Models
{
    public class Book
    {
        public int Id { get; set; }

        public string Name { get; set; }

        public string Author { get; set; }

        public int Year { get; set; }
    }
}

BookController.cs

using System;
using System.Collections.Generic;
using System.Data;
using System.Data.Entity;
using System.Data.Entity.Infrastructure;
using System.Linq;
using System.Net;
using System.Net.Http;
using System.Threading;
using System.Threading.Tasks;
using System.Web;
using System.Web.Mvc;
using System.Web.UI.HtmlControls;

using Newtonsoft.Json;

using MyBooks.Models;

namespace MyBooks.Controllers
{
    public class BookController : Controller
    {
        BookContext db = new BookContext();

        [HttpGet]
        public async Task<ActionResult> MyBooks()
        {
            var query = db.Books
                .Select(x => new BookViewModel
                {
                    Id = x.Id,
                    Name = x.Name,
                    Author = x.Author,
                    Year = x.Year
                });

            var books = await query.ToListAsync();

            return View(books);
        }

        [HttpPost]
        public async Task<ActionResult> Add([FromBody] BookViewModel bookModel)
        {
            var newBook = new Book
            {
                Name = bookModel.Name,
                Author = bookModel.Author,
                Year = bookModel.Year
            };

            try
            {
                db.Books.Add(newBook);
                await db.SaveChangesAsync();

                return Json(new BookViewModel
                {
                    Id = newBook.Id,
                    Name = newBook.Name,
                    Author = newBook.Author,
                    Year = newBook.Year   
                }, JsonRequestBehavior.AllowGet);
            }
            catch (Exception exc)
            {
                // log exception
                return StatusCode(HttpStatusCode.InternalServerError);
            }
        }

        [HttpPost]
        public async Task<ActionResult> Delete(int id)
        {
            Book bookToRemove = new Book
            {
                Id = id // MAGIC step 1
            };

            try
            {
                db.Books.Attach(bookToRemove);
                db.Entry(bookToRemove).State = EntityState.Deleted; // MAGIC step 2
                await db.SaveChangesAsync();

                return Ok();
            }
            catch (Exception exc)
            {
                // log exception
                return StatusCode(HttpStatusCode.InternalServerError);
            }
        }

    }

}

BookViewModel.cs

using System;
using System.Collections.Generic;
using System.ComponentModel.DataAnnotations;
using System.Linq;
using System.Web;

namespace MyBooks.ViewModels
{
    public class BookViewModel
    {
        public int Id { get; set; }

        [Display(Name = "Name")]
        public string Name { get; set; }

        [Display(Name = "Author")]
        public string Author { get; set; }

        [Display(Name = "Year")]
        public int Year { get; set; }
    }
}

MyBooks.cshtml

@model IEnumerable<MyBooks.ViewModels.BookViewModel>

@{
    ViewBag.Title = "MyBooks";
}

<div style="text-align: center">
    <h3>My Books</h3>
</div>
<div>

    @using (Ajax.BeginForm("Add", new AjaxOptions { HttpMethod = "POST", OnSuccess = "handleAddingSuccess", OnFailure = "handleAddingFailed" }))
    { 
        <div style="float: left">
            <table>
                <tr>
                    <td><p>Enter book's name: </p></td>
                    <td>@Html.TextBox("Name")</td>
                </tr>
                <tr>
                    <td><p>Enter author's name: </p></td>
                    <td>
                        @Html.TextBox("Author")
                    </td>
                </tr>
                <tr>
                    <td><p>Enter year of presentation: </p></td>
                    <td>
                        @Html.TextBox("Year")
                    </td>
                </tr>
                <tr>
                    <td>
                        <input type="submit" class="btn btn-primary">
                            <span class="glyphicon glyphicon-plus" aria-hidden="true"></span>
                            <span><strong>Add</strong></span>
                        </input>
                    </td>
                    <td></td>
                </tr>
            </table>
        </div>
    }

    <div id="result" style="width: 600px; height: 600px; overflow: scroll; border: solid 1px black;">
        <table id="booksContainer">
            <tr>
                <td><p style="margin-right: 75px">Name</p></td>
                <td><p style="margin-right: 75px">Author</p></td>
                <td><p style="margin-right: 75px">Year</p></td>
                <td></td>
            </tr>
            foreach (var book in Model)
            {
                <tr id="book_@p.Id.ToString()">
                    <td><p>@b.Name</p></td>
                    <td><p>@b.Author</p></td>
                    <td><p>@b.Year</p></td>
                    <td>
                        <a href="@Url.Action("Delete", "Book", new { id = p.Id })" class="btn btn-primary" onclick="deleteBook">
                            <span class="glyphicon glyphicon-remove" aria-hidden="true"></span>
                            <span><strong>Delete</strong></span>
                        </a>
                    </td>
                </tr>
            }
        </table>
    </div>
</div>

@Scripts.Render("~/scripts/jquery-1.10.2.min.js")
@Scripts.Render("~/scripts/jquery.unobtrusive-ajax.min.js")

@section Scripts {
    <script type="text/javascript">
        function handleAddingSuccess (e) {
            var booksTable = document.getElementById("booksContainer");
            var newBookRow = booksTable.insertRow(0);
            
            newBookRow.insertCell(0).innerHTML = e.Name;
            newBookRow.insertCell(1).innerHTML = e.Author;
            newBookRow.insertCell(2).innerHTML = e.Year;

            var deleteLink = document.createElement("a");

            deleteLink.href = "@Request.Url.Authority//@Request.Url.Host" + "/Book/Delete/" + e.Id.toString();
            deleteLink.className = "btn btn-primary";
            deleteLink.onclick = deleteBook;
            deleteLink.innerHTML = '
            <span class="glyphicon glyphicon-remove" aria-hidden="true"></span>
            <span><strong>Delete</strong></span>';

            newBookRow.insertCell(3).innerHTML = deleteLink.toString();
        }
		
		function handleAddingFailed (e) {
			alert ("Oops, book isn't added: " + e);
		}

        function deleteBook(e) {
            var link = $(this);

            e.preventDefault();

            var requestUrl = e.originalSource.href;
            var request = $.ajax({
                method: "POST",
                url: requestUrl,
            });
            request.done(function () {
                link.parents("tr").fadeTo(300, 0, function () {
                    $(this).remove();
                });
            });
            request.fail(function () {
                alert ("Oops, something went wrong...");
            });
        }
    </script>
}