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

Я просто играю с 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?

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

7
asp.net-mvc-3 jquery jquery-ui jquery-ui-dialog modal-dialog

5 ответов

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

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 hardcoding в 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
});
6

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

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

...это своего рода комбинация ответов, приведенных выше.

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

1

кнопка в порядке под частичным представлением, но похоже, что вы хотите отправить форму через 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 по мере необходимости. Вы можете получить более навороченные, но тогда этот ответ будет слишком длинным :)

0

Ну, jQuery submit ничего не делает, вам нужно иметь форму внутри частичного представления, тогда что происходит, когда диалоговое окно jQuery submit execute, вы вызываете свою форму 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();
        }    

    });

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

0

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

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

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

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