Ajax form not working in ASP.NET MVC, what is the reason (code inside)?

Question

ASP.NET

Why isn't the partial view added via AJAX?
Partial view code:

NewRecord.cshtml

@model Organizer.Models.Record
<tr>
    <td>@Html.DisplayFor(m => m.TypeRecord)</td>
    <td>@Html.DisplayFor(m => m.Theme)</td>
    <td>@Html.DisplayFor(m => m.DateTimeBegin)</td>
    <td>@Html.DisplayFor(m => m.DateTimeEnd)</td>
    <td>@Html.DisplayFor(m => m.Place)</td>
</tr>

Controller code

using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.Mvc;
using Organizer.Models;

namespace Organizer.Controllers {
    public class HomeController : Controller {

        OrganizerContext db = new OrganizerContext();

        [HttpGet]
        public ActionResult Index() {

            IEnumerable<Record> allRecords = db.Records.ToList(); 
            return View(allRecords);
        }

        [HttpPost]
        public ActionResult Add(Record record) {

            db.Records.Add(record);
            db.SaveChanges();
            return PartialView(record);
        }

        protected override void Dispose(bool disposing) {
            db.Dispose();
            base.Dispose(disposing);
        }

    }
}

View code (partial view should be loaded here):

Index.cshtml

@using Organizer.Models
@model IEnumerable<Record>

@{
    ViewBag.Title = "Organizer";
}

<div>
    <table>
        
        @foreach (Record record in Model) {
            <tr>
                <td>@record.TypeRecord</td>
                <td>@record.Theme</td>
                <td>@record.DateTimeBegin</td>
                <td>@record.DateTimeEnd</td>
                <td>@record.Place</td>
            </tr>
        }
    </table>
</div>

@using (Ajax.BeginForm("Add", new AjaxOptions { UpdateTargetId = "records" })) {
    <table id="tableRecord">
        <tr>
            <td class="tableRow selectRow">
                <select id="listTypeRecord" name="TypeRecord">
                    <option value="Встреча">Встреча</option>
                    <option value="Дело">Дело</option>
                    <option value="Памятка">Памятка</option>
                </select>
            </td>
            <td class="tableRow"><input class="tableInput" type="text" placeholder="Тема" name="Theme"/></td>
            <td class="tableRow"><input class="tableInput" type="text" placeholder="Дата начала" name="DateTimeBegin"/></td>
            <td class="tableRow hidingField"><input class="tableInput" type="text" placeholder="Дата окончания" name="DateTimeEnd"/></td>
            <td class="tableRow hidingField"><input class="tableInput" type="text" placeholder="Место встречи" name="Place"/></td>
        </tr>
    </table>
    <input class="btnCreate" type="submit" name="createRecord" value="Создать запись">
}

<div id="records"></div>
@section Scripts {
    @Scripts.Render("~/Scripts/jquery-3.1.1.min.js")
    @Scripts.Render("~/Scripts/jquery.unobtrusive-ajax.min.js")
}

Answer 1

The block (div id="records") is moved outside the asynchronous loading form.
And also, the names of the object that you send to the server (record) do not match, because the names must match the name attribute of the html markup object in the form of asynchronous loading.