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).....}.... 

Как вы можете видеть нагрузку() в JQuery вызывает PartialView имени PartialEdit.

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

Вопросы

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

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

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

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

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

Answer 1

Спасибо за все ваши ввода, решения, которое работает для меня в данный момент того, эта функция прилагается к„кнопке Submit“в диалоговом окне ....

"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 2

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

Answer 3

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

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 ication. Всегда используйте помощники 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 4

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

    }); 

И о ур вопрос внутри после действия, вы должны выполнять бизнес-логику, то называют «Return RedirectToAction (» VIEWNAME», новый {идентификатор = ххх})»

Answer 5

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

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

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

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