jQuery AJAX Post Success не будет обновлять div, отображает частичный вид

Кажется, я не могу получить сообщение jQuery AJAX для обновления div с возвращенным частичным представлением. Частичный вид возвращается с правильным html и отображается полностью в браузере, но я не могу его отобразить в div, на который я бы хотел. Я уверен, что это что-то довольно простое, но я не могу понять, что после многих часов попытки решить это.

В конечном итоге то, что я пытаюсь достичь, – это когда форма размещена, что результаты отображаются в другом div, и тогда я каким-то образом обновил бы другой div другим частичным представлением через другой вызов ajax. Я поставил этот тест, чтобы ознакомиться с тем, как все работает, но я изо всех сил пытаюсь это понять.

controller:

[HttpPost] [ValidateAntiForgeryToken] public ActionResult Create([Bind(Include="id,Name")] Test test) { if (ModelState.IsValid) { db.Test.Add(test); db.SaveChanges(); return PartialView("DetailsPartial", test); } return PartialView("CreatePartial"); } 

Главная страница:

 @{ ViewBag.Title = "Index"; } 

Index

@Scripts.Render("~/bundles/jquery") @Scripts.Render("~/bundles/jqueryval") $(document).ready(function () { $('#Create').click(function (event) { event.preventDefault(); $.ajax({ type: 'get', url: '/Test/Create' }).done(function (data) { $('#CreatePlaceholder').html(data) }) }) $('#CreateForm').submit(function (event) { event.preventDefault(); var $form = $(this); var formData = $form.serialize; alert(formData); formData.__RequestVerificationToken = $('input[name=__RequestVerificationToken]').val(); $.ajax({ type: 'POST', url: '/Test/Create', data: formData, success: function (result) { $('#DetailsPlaceholder').html(result); } }) }); })

Создание частичного представления:

 @model PerformanceTools.Models.Test 
@Html.AntiForgeryToken()

Test


@Html.ValidationSummary(true)
@Html.LabelFor(model => model.Name, new { @class = "control-label col-md-2" })
@Html.EditorFor(model => model.Name) @Html.ValidationMessageFor(model => model.Name)

Подробный частичный просмотр:

 @model PerformanceTools.Models.Test 
@Html.DisplayNameFor(model => model.id)
@Html.DisplayFor(model => model.id)
@Html.DisplayNameFor(model => model.Name)
@Html.DisplayFor(model => model.Name)

Однако вы оказываете частичное представление, помещенное внутри div.

  
@{Html.RenderPartial("YourPartial");}

Об успехе вызова Ajax .html () в div не на частичном представлении.

  success: function (data) { $('#partialSummaryDiv).html(data); } 

Он не отображается в Div, потому что вы не определили частичный вид в div. Если вы хотите, чтобы частичный вид скрывался до тех пор, пока не будет достигнут успех ajax, вам нужно будет добавить дополнительную логику

Проблема заключалась в том, что событие никогда не подключалось к формам, которые были добавлены на страницу после того, как DOM был готов.

Я смог исправить проблему, используя .on на пустом заполнителе div.

  $('#CreatePlaceholder').on('submit', '#CreateForm', function (event) { event.preventDefault(); var formData = $(this).serialize(); formData.__RequestVerificationToken = $('input[name=__RequestVerificationToken]').val(); $.ajax({ type: 'POST', url: '/Test/Create', data: formData }).done(function (data) { $('#DetailsPlaceholder').html(data); }) });