Не работает Ajax-форма в ASP.NET MVC, в чем причина(код внутри)?

Question

[Иван Мурашкин]

Почему не добавляется через AJAX частичное представление?
Код Частичного представления:

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-a

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);
        }

    }
}

Код представления (тут должно подгружаться частичное представление):

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

[Павел Кравченко]

Блок (div id="records") вынесен за пределы формы асинхронной загрузки.
А так же не совпадение имён объекта который отправляешь на сервер (record), ибо именования должны совпадать с атрибутом name у объекта html разметки в форме асинхронной загрузки.

Comments

[Иван Мурашкин]

Какой блок? Тот что с id records?

[Павел Кравченко]

Иван Мурашкин, да, его внеси перед закрывающейся скобкой "}" в форму!

[Иван Мурашкин]

Павел Кравченко, не помогло

[Павел Кравченко]

Иван Мурашкин, А так же не совпадение имён объекта который отправляешь на сервер (record), ибо именования должны совпадать с атрибутом name у объекта html разметки в форме асинхронной загрузки. А у тебя в форме я вообще не вижу объект с атрибутом name="record"

[Иван Мурашкин]

Павел Кравченко, напиши плиз как должно выглядеть, чет туплю...

[Павел Кравченко]

Иван Мурашкин, отправляй на сервер те данные которые вводит пользователь, т.е. входные параметры должны быть атрибуты name тех полей html разметки которые ты хочешь записать в бд. Далее в контроллере записывай по одному их. И в частичное представление отправь параметр по которому потом ты в цикле foreach ты найдёшь и выведешь записи. В (div id="records") помести изначальный вывод списка дел, которые у тебя в начале странице и всё это должно быть в Ajax форме!