Блог

У меня есть эта кнопка в пользовательском интерфейсе, где клиент откроет модальный. Модал загрузит частичное представление, полученное Ajax.

  $('#btnfeedback').on('click', function(e) {
        e.preventDefault();
        var debateModal;


        $.get('@Url.Action("LoadFeedbackModal", "Home")', function() {

        }).done(function(info) {

            debateModal = bootbox.dialog(
                {
                    message: info,
                    title: '<span class="fa fa-wechat"></span> Leave Feedback',
                    closeButton: true
                });
            debateModal.find('.modal-header').removeClass('modal-header').addClass('modal-header-info');


        }).fail(function() {
            debateModal = bootbox.alert({ message: "Problem try later", size: 'small' });


        });
    });
  

И это мой контроллер:

 [HttpGet]
public ActionResult LoadFeedbackModal()
{
    return PartialView("Partials/_FeedbackModal", new FeedbackVm());
}

[HttpPost]
public ActionResult LoadFeedbackModal(FeedbackVm feedback)
{
    try
    {
        var fb = Mapper.Map<Feedback>(feedback);

        Db.Feedbacks.Add(fb);

        Db.SaveChanges();

        return Json(new { Mensaje = "Thanks for your feedback", Status = true }, JsonRequestBehavior.AllowGet);
    }
    catch (Exception exception)
    {
        return Json(new { Mensaje = "HUbo un problema :( Intenta luego", Status = false }, JsonRequestBehavior.AllowGet);
    }
}
  

И это мое частичное представление:

     @model TuGrietaLive.ViewModels.Admin.Index.FeedbackVm

@using (Html.BeginForm("LoadFeedbackModal", "Home", FormMethod.Post))

{
    @Html.AntiForgeryToken()

<div class="form-horizontal">
    <p>
        Muchas gracias por tu Feedback. Para nosotros es muy importante.
        <small>Si nos dejas tu correo te podemos contestar :)</small></p>
    <div class="form-group">
        @Html.LabelFor(m => m.FeedbackType, new { @class = "control-label col-md-2 col-xs-12" })
        <div class="col-md-10 col-xs-12">
            @Html.EnumDropDownListFor(model => model.FeedbackType, "Selecciona una Categoria", new { @class = "form-control", name = "FeedbackType" })
            @Html.ValidationMessageFor(model => model.FeedbackType)
        </div>
    </div>

    <div class="form-group">
        <label class="control-label col-md-2 col-xs-12">Email <small>(Opcional)</small></label>
        <div class="col-md-10 col-xs-12">
            @Html.EditorFor(model => model.Email, new { htmlAttributes = new { @class = "form-control"} })
            @Html.ValidationMessageFor(model => model.Email, "", new { @class = "text-danger" })
        </div>
    </div>

    <div class="form-group">
        @Html.LabelFor(m => m.Comment, new { @class = "control-label col-md-2 col-xs-12" })
        <div class="col-xs-12 col-md-10 ">
            @Html.EditorFor(model => model.Comment, new { @class = "form-control" })
            @Html.ValidationMessageFor(model => model.Comment, "", new { @class = "text-danger", rows = 10 })
        </div>
    </div>

    <button type="submit" id="btnsendFeedback" autofocus class="btn btn-block btn-success">
        <span class="glyphicon glyphicon-envelope"></span>Enviar
    </button>
</div>

}
  

Я могу успешно получить представление, и модальный отрисовывает частичное. Теперь я хочу получить ответ сервера после отправки формы.

Как я могу получить сообщение post action? Этот код открывает новое окно с объектом JSON. Я хочу зафиксировать это и открыть модальное. Это меня убивает.

Вам следует изменить тип кнопки btnsendFeedback в вашем диалоговом окне обратной связи на button вместо submit :

 <button type="button" id="btnsendFeedback" autofocus class="btn btn-block btn-success">
    <span class="glyphicon glyphicon-envelope"></span>Enviar
</button>
  

и обрабатывать событие щелчка btnsendFeedback при получении содержимого диалогового окна:

     $('#btnfeedback').on('click', function (e) {
        e.preventDefault();
        var debateModal;


        $.ajax({
            url: '@Url.Action("LoadFeedbackModal", "Home")',
            type: 'GET'
        }).done(function (info) {

            debateModal = bootbox.dialog(
                {
                    message: info,
                    title: '<span class="fa fa-wechat"></span> Leave Feedback',
                    closeButton: true
                });
            debateModal.find('.modal-header').removeClass('modal-header').addClass('modal-header-info');

            $('#btnsendFeedback').on('click', function (e) {
                $.ajax({
                    url: '@Url.Action("LoadFeedbackModal")',
                    type: 'POST',
                    dataType: 'json'
                }).done(function (result) {
                    console.log(result.Mensaje);
                });
            });
        }).fail(function (xhr, status, error) {
            debateModal = bootbox.alert({ message: "Problem try later", size: 'small' });


        });
    });
  

Для начала добавьте идентификатор или класс в свою форму, чтобы мы могли подключиться к ее событию отправки:

 @using (Html.BeginForm("LoadFeedbackModal", "Home", FormMethod.Post, new { @id="feedback-form" }))
  

Затем вы можете использовать этот селектор для получения формы:

 var form = $('#feedback-form');
  

В качестве альтернативы вы могли бы использовать find() для получения формы из модального:

 var form = debateModal.find('form');
  

Затем добавьте обработчик события для события отправки формы:

 form.on('submit', function(e){

});
  

Вы захотите отменить собственное событие, а затем использовать serialize() для подготовки ваших данных AJAX:

 form.on('submit', function(e){
    e.preventDefault();

    var data = form.serialize();
});
  

Как только вы это сделаете, вы можете использовать $.post для отправки данных формы, обрабатывая их по своему усмотрению:

 form.on('submit', function(e){
    e.preventDefault();

    var url = form.attr('action');
    var data = form.serialize();

    $.post(url, data)
        .done(function(response, status, jqxhr){
        })
        .fail(function(jqxhr, status, error){
        });
});
  

Наконец, соберите все это вместе в shown.bs.modal событии, чтобы оно подключилось, как только диалоговое окно станет видимым:

 debateModal.on('shown.bs.modal', function(){

    var form = debateModal.find('form');
    form.on('submit', function(e){
        // prevent/cancel the native submit
        e.preventDefault();

        var url = form.attr('action'); // or use @Url.Action(), if you prefer
        var data = form.serialize();

        $.post(url, data)
            .done(function(response, status, jqxhr){

                /* Do what you need to with the response, and then close the modal */

                debateModal.modal('hide');
            })
            .fail(function(jqxhr, status, error){
            });
    });
}
  

 $.getJSON('@Url.Action("LoadFeedbackModal", "Home")').done(function(info) {

            debateModal = bootbox.dialog(
                {
                    message: info,
                    title: '<span class="fa fa-wechat"></span> Leave Feedback',
                    closeButton: true
                });
            debateModal.find('.modal-header').removeClass('modal-header').addClass('modal-header-info');


        }).fail(function() {
            debateModal = bootbox.alert({ message: "Problem try later", size: 'small' });
       });
  

Предлагаю использовать getJSON вместо get , по любому вопросу дайте мне знать.