Модальная форма в asp.net mvc RC с использованием jquery - PullRequest
Новая
       12

Модальная форма в asp.net mvc RC с использованием jquery

6 голосов
/ 07 марта 2009

Я новичок в ajax / jquery, и мне было трудно найти простой пример, включающий следующее:

  • ASP.Net MVC RC1 (или 2)
  • JQuery
  • модальная форма

Я бы хотел, чтобы пользователь мог щелкнуть ссылку / кнопку в представлении (родительском) и отобразить модальную форму, содержащую форму. содержимое модального диалога должно быть представлением MVC (дочерний).

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

1 Ответ

12 голосов
/ 07 марта 2009

Итак, вам не нужно думать обо всем сразу. Сначала создайте форму в html спереди и по центру на странице, прикрепите действие и заставьте его работать без модальной фантазии.
Как только ваша логика формы заработает, вы можете зацикливаться в jQuery. Если вы хотите начать с модальности и всплывающего окна или с Asynchronous Post с jQuery, решать только вам. Я обычно хотел бы заставить это работать прежде, чем я сделаю это симпатичным, таким образом, мы пойдем этим путем. Если для определения формы вы используете стандартный синтаксис <% Html.BeginForm ... {%>, удалите его. Перейти старой школы HTML! (Я знаю, что вы можете дополнительно настроить Html.Beginform, но проще использовать HTML) 

<form action="<%= Url.ActionLink(...)%>" id="SomeForm">

Теперь вы можете подключить jQuery в вашем документе. Или где бы вы не инициализировали JS. 

$('#SomeForm').bind('submit', youractionfunction);

В вашей форме действия вы, вероятно, будете звонить в пост jQuery, где обратный вызов поста скрывает вашу форму и обновляет остальную часть страницы. Документация по API 

function youractionfunction(e){
  $.post($(e).attr('action'), // we get the action attribute (url) from the form
         { title : $('#titleBox').val()}, // the values we're passing
         yourCallbackFunction); 
  return false;  // This is important, this will stop the event from bubbling and your form from submitting twice.
}

Теперь у вас есть форма ajaxy, так что вы можете работать с обратным вызовом. 

function yourCallbackFunction(data)
{
    // do something with the result.
}

Теперь мы можем поговорить о модальности. Обычно это немного больно, но вы можете использовать плагин jQuery, например this или что-то подобное, чтобы сделать это для вас. Тогда нужно просто связать события, чтобы показать и скрыть всплывающее окно, и все готово.

Если ваше намерение состояло в том, чтобы эта форма загружалась асинхронно при нажатии на ссылку "показать", это немного более хлопотно, но все же выполнимо. Вы можете использовать jQuery.Load ( Api Documentation ), чтобы вытащить html и внедрить его в dom, но вам все равно придется связывать события (опять же, с привязкой ('submit'). .) описано выше).

...