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

Question

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

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

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

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

Answer 1

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

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

Теперь вы можете подключить jQuery в своем document.ready или там, где вы инициализируете свой 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, например этот или что-то подобное, чтобы сделать это за вас.Тогда остается просто подключить события для отображения и скрытия всплывающего окна, и все готово.

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