Ajax запросы с помощью jquery

Изучаю ajax запросы. Нашёл на metanit пример в mvc проекте. Вот например вызов формы ajax запросом.

<div>
    @using (Ajax.BeginForm("BookSearch", new AjaxOptions { UpdateTargetId = "results" }))
    {
        <input type="text" name="name" />
        <input type="submit" value="Поиск" />
    }
    <div id="results"></div>
</div>

Но тут используется c# хелперы. А как написать то же самое с помощью jquery? Нашёл примеры ajax запросов с помощью jquery которые начинаются примерно так:

$.ajax({
});

Но не могу понять как сделать то же самое что реализовано у меня с помощью хелперов. Подскажите пожалуйста как это должно выглядеть?

Код View:

@{
    ViewBag.Title = "Index";
}
<div>
    <input type="text" name="name" id="txt" />
    <input type="button" id="Search" value="Поиск" name="btn" />
    @section scripts {
        <script type="text/javascript">
            $('[name = "btn"]').on('click', function () {
                $.ajax({
                    type: "POST",
                    url: "/Home/BookSearch",
                    data: { "name": $('#txt').val }
                });
            });
        </script>
    }
    <div id="results"></div>
</div>

Код контроллера:

Context db = new Context();
        public ActionResult Index()
        {
            return View();
        }
        [HttpPost]
        public ActionResult BookSearch(string name)
        {
            var allbooks = db.Books.Where(a => a.Author.Contains(name)).ToList();
            if (allbooks.Count <= 0)
            {
                return HttpNotFound();
            }
            return View(allbooks);
        }

И ошибка на клиенте: