jQuery, MVC3: отправка формы частичного представления в модальном диалоге

Question

Сейчас я просто играю с jQuery и MVC3, и мне интересно, как я могу отправить форму, которая была динамически загружена в диалог jQueryUI?

Пока мой код состоит из ...

Javascript / JQuery

$(document).ready(function () {

    $('.trigger').live('click', function (event) {

       var id = $(this).attr('rel');

       var dialogBox = $("<div>");

       $(dialogBox).dialog({
           autoOpen: false,
           resizable: false,
           title: 'Edit',
           modal: true,
           show: "blind",
           hide: "blind",
           open: function (event, ui) {
               $(this).load("PartialEdit/" + id.toString());
           }
        }
    });

    $(dialogBox).dialog('open');

})    });

cshtml

<h2>Detail</h2><a href="#" class="trigger" rel="1">Open</a>

Контроллер

public ActionResult PartialEdit(int id)
    {
        return PartialView(new EditViewModel() { Name = id.ToString() });
    }

    [HttpPost]
    public ActionResult PartialEdit(int id, FormCollection collection)
    {
        // What to put here???            
    }

Частичное представление

....@using (Html.BeginForm()){....Html.EditorFor(model => model.Name).....}....

Как вы можете видеть, load () в jQuery вызывает PartialView с именем PartialEdit.

Форма загружается просто отлично, но я не могу понять, как я на самом деле отправляю форму?

Вопросы

Как мне получить пользовательский интерфейс для отправки формы и закрыть диалог? Что должен вернуть [HttpPost] PartialEdit?

На данный момент у меня есть кнопка отправки в частичном представлении. При щелчке форма отправляется, и браузер делает все, что возвращает [HttpPost] PartialEdit (в настоящее время отображается пустая страница).

Однако после отправки я хотел бы вместо этого инициировать событие на стороне клиента (возможно, полное обновление страницы или частичное обновление страницы в зависимости от используемого контекста). Я не уверен, с чего начать?

Кроме того, мне следует поместить кнопку отправки в PartialView или использовать кнопки в диалоговом окне jQuery-UI?

Любые предложения / указатели приветствуются.

Answer 1

Попробуйте что-нибудь между строк:

open: function (event, ui) {
    $(this).load("PartialEdit/" + id.toString(), function(html) {
        $('form', html).submit(function() {
            $.ajax({
                url: this.action,
                type: this.method,
                data: $(this).serialize(),
                success: function(res) {
                    if (res.success) {
                        $(dialogBox).dialog('close');
                    }
                }
            });
            return false;
        });
    });
}

и действие контроллера может вернуть JSON:

[HttpPost]
public ActionResult PartialEdit(int id, FormCollection collection)
{ 
    // do some processing ...

    // obviously you could also return false and some error message
    // so that on the client side you could act accordingly
    return Json(new { success = true });
}

Последняя часть для улучшения это:

"PartialEdit/" + id.toString()

Никогда не применяйте такое жесткое кодирование URL в приложении ASP.NET MVC. Всегда используйте помощники URL при работе с URL. Так что сделайте свой якорь немного более динамичным и вместо:

<a href="#" class="trigger" rel="1">Open</a>

использование:

@Html.ActionLink(
    "Open", 
    "PartialEdit", 
    new {
        id = "1" // you probably don't need a rel attribute
    }, 
    new { 
        @class = "trigger"
    }
)

и затем:

$(this).load(this.href, function(html) {
    ...
    return false; // now that the anchor has a href don't forget this
});

Answer 2

Спасибо за ваш вклад, решение, которое работает для меня на данный момент, заключается в том, чтобы эту функцию прикрепить к кнопке «Отправить» в диалоговом окне ....

"Submit": function () {
    var $this = this;
    var form = $('form', $this);
    if (!$(form).valid()) {
       return false;
    }

    $.post(form.attr("action"), JSON.stringify($(form).serializeObject()), function () {
        $($this).dialog("close").dialog("distroy").remove();
    });
}

... что-то вроде комбинации ответов выше.

Еще раз спасибо.

Answer 3

Я столкнулся с подобной проблемой сегодня, когда мне пришлось отправить форму, которая была в частичном представлении - и частичное представление было в диалоге, который был создан из другой формы!

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

Вот как я определил свой диалог в первой форме:

var udialog = $('#userdialog').dialog({
            open: function(event, ui) {                    
                $(this).load('xx');
            },
            buttons: {
                "Submit" : function(){                         
                    $.ajax(
                         {
                             url: 'xx',
                             type: "POST",
                             async: true,
                             data: $('form', $(this)).serialize()
                    });
                }
             }                 
        });

Answer 4

Что ж, jQuery submit ничего не делает, вам нужно иметь форму внутри частичного представления, тогда что произойдет, когда выполнится диалоговое окно jQuery submit, вы вызываете форму submit, у которой уже определено действие.

Посмотрите мой код ниже, который не представляет ajax submit

      }); 
    $dialog
        .dialog("option", "buttons", {
            "Submit":function(){
                var dlg = $(this);
                var $frm = $(frm);
                if(onFormSubmitting != null)
                    onFormSubmitting();
                $frm.submit();
        },
        "Cancel": function() { 
            $(this).dialog("close");
            $(this).empty();
        }    

    });

А что касается вашего вопроса внутри действия post, вы должны выполнить свою бизнес-логику, а затем вызвать "Return RedirectToAction (" viewname ", new {id = xxx})"

Answer 5

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

$('#theIdOfYourForm').live('submit', function(event){
    event.preventDefault();
    var form = $(this);
    $.post(form.attr('action'), form.serialize(), function(data){
        if (data.IsError) { alert(data.Error); }
        else { alert(data.Message); }
    });
});

И вернуть объект JSON из вашего действия HttpPost PartialEdit, которое определяет IsError, Error или Message при необходимости.Вы можете полюбить это, но тогда этот ответ будет слишком длинным:)