ASP.NET MVC «Создать» в Bootstrap Modal для обновления индекса из отдельного представления / контроллера

Question

У меня есть View / Controller с именем «Reviews», в котором я хочу модальное всплывающее окно начальной загрузки, которое показывает действие «Создать» из контроллера «ReviewChecklist».Все это отображается правильно, но мне нужно отправить этот пост, чтобы сохранить данные контрольного списка в базе данных.Это приводит к сбою и отображению неправильной страницы, вместо того, чтобы просто закрывать модальное всплывающее окно.

У меня также есть индекс 'ReviewChecklist', представленный выше, так что в идеале это тоже нужно обновить.

Не уверен, что я подошел к этому что-то совершенно неправильно или получил что-то не совсем правильно, спасибо заранее.

Просмотр 'Просмотр'

<div class="form-group">
            @{
                Html.RenderAction("Index", "ReviewChecklists", new { reviewId = Model.Id, viewOnly = false });
            }

            <button type="button" class="btn btn-primary" data-toggle="modal" data-target="#checklistModal">
                Launch demo modal
            </button>
            <div class="modal fade" id="checklistModal" tabindex="-1" role="dialog" aria-labelledby="checklistModalLabel" aria-hidden="true">
                <div class="modal-dialog" role="document">
                    <div class="modal-content">
                        <div class="modal-header">
                            <h5 class="modal-title" id="checklistModalLabel">Review Checklist</h5>
                            <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                                <span aria-hidden="true">&times;</span>
                            </button>
                        </div>
                        @using (Html.BeginForm("Create", "ReviewChecklistsController", FormMethod.Post, new {Id = "checklistForm" }))
                        {
                            <div class="modal-body">
                                @{Html.RenderAction("Create", "ReviewChecklists", new { reviewId = Model.Id });}
                            </div>
                            <div class="modal-footer">
                                <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
                                <button type="submit" class="btn btn-success">Save Checklist</button>
                            </div>
                        }
                    </div>
                </div>
            </div>
        </div>

Контроллер 'ReviewChecklist':

[HttpPost]
//[ValidateAntiForgeryToken] Causes issues with the modal dialog
        public async Task<ActionResult> Create([Bind(Include = "Id,ReviewId,ChecklistId,Status")] ReviewChecklist[] reviewChecklist)
        {
            foreach (ReviewChecklist item in reviewChecklist)
            {
                db.ReviewChecklists.Add(item);
            }
            await db.SaveChangesAsync();
            return PartialView();
            //return RedirectToAction("Create", "Reviews", new { reviewId = reviewChecklist[0].ReviewId });
        }

Код сценария:

Если вам нужно что-то еще, пожалуйста, прокомментируйте:)

// prepare the form when the DOM is ready 
$(document).ready(function () { 
    alert('setting up form');
    var options = { 
        beforeSubmit:  showRequest,  // pre-submit callback 
        success: showResponse,  // post-submit callback 
        error: handleError
    }; 

    // bind form using 'ajaxForm'
    $('#checklistForm').ajaxForm(options); /// give your create form an ID
    alert('form setup complete');
}); 

// pre-submit callback 
function showRequest(formData, jqForm, options) { 
  //// things you can do before form submit like loaders
    alert('showRequest');
    return true;
} 

// post-submit callback 
function showResponse(responseText, statusText, xhr, $form)  { 
 //// things you can do after the response 
    alert('showResponse');
    alert(responseText);
  if(responseText == 1)
   $("#checklistModal").modal("hide");
   /// show toast or somthing for saving data successfully
} 

function handleError(xhr, textStatus, error) {
    alert('error');
    alert(textStatus);
}

Плагин jQuery.Form был добавлен через Nuget и добавлен в пакеты следующим образом:

bundles.Add(new ScriptBundle("~/bundles/jqueryform").Include(
                    "~/Scripts/jquery.form*"));

, а затем указан в _Layout.cshtml, например,

@Scripts.Render("~/bundles/jqueryform")

Проблема, с которой я сейчас сталкиваюсь, заключается в том, что после завершения отправки она не закрывает модальное окно, а просто отображает весь исходный код страницы?Я также не вижу оповещения для showRequest или showResponse, но отображаются оповещения о настройке формы.

Answer 1

1. Сохраняйте HTML как есть, за исключением того, что задайте Id для создания. Убедитесь, что он также не вложен ни в какие другие формы.

2. Включите эту библиотеку в свой макет из здесь (также доступно в виде пакета Nuget)

Плагин jQuery Form позволяет легко и незаметно обновлять HTML-формы для использования AJAX.

3. Контроллер

    [HttpPost]
    //[ValidateAntiForgeryToken] Causes issues with the modal dialog
    public async Task<ActionResult> Create([Bind(Include = 
       "Id,ReviewId,ChecklistId,Status")] ReviewChecklist[] reviewChecklist)
    {
        foreach (ReviewChecklist item in reviewChecklist)
        {
            db.ReviewChecklists.Add(item);
        }
        await db.SaveChangesAsync();

        return Json(1, JsonRequestBeahvaoir.AllowGet); /// return 1 or 0 or as per requirements or anything, the response you can handle in jQuery showResponse() method later.
    }

4.Script

// prepare the form when the DOM is ready 
  $(document).ready(function() { 
     var options = { 
           beforeSubmit:  showRequest,  // pre-submit callback 
           success:       showResponse  // post-submit callback 
     }; 
     // bind form using 'ajaxForm' 
     $('#myForm1').ajaxForm(options); /// give your create form an ID
  });     

// pre-submit callback 
  function showRequest(formData, jqForm, options) { 
      // things you can do before form submit like loaders
      return true; 
    } 

 // post-submit callback 
  function showResponse(responseText, statusText, xhr, $form)  { 
     // things you can do after the response 
      if(responseText == 1)
       $("#checklistModal").modal("hide");
       // show toast or somthing for saving data successfully
    }